Add drawer component and support side thumbnails.

src/scss/carousel.scss

@@ -23,11 +23,19 @@ img,video {
   width: 100%;
   height: 100%;
 
+  flex-direction: column;
+
   user-select: none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
+:host([direction="vertical"]) .embla__container {
+  flex-direction: column;
+}
+:host([direction="horizontal"]) .embla__container {
+  flex-direction: row;
+}
 
 .embla__viewport {
   width: 100%;
@@ -50,9 +58,14 @@ img,video {
 .embla__slide {
   position: relative;
   height: 100%;
-  margin-right: 5px;
   overflow: visible;
 }
+:host([direction="vertical"]) .embla__slide {
+  margin-bottom: 5px;
+}
+:host([direction="horizontal"]) .embla__slide {
+  margin-right: 5px;
+}
 .embla__slide img,video {
   // Letterbox media. <frigate-card-ha-hls-player> has similar added directly in
   // its element.

src/scss/drawer-inject.scss

@@ -0,0 +1,34 @@
+:host {
+    // Drawer width sizes to contents.
+    width: unset;
+};
+
+#d, #fs {
+    // Override width/height to be 100% instead of 100v[wh].
+    height: 100%;
+
+    // Position absolutely.
+    position: absolute;
+}
+
+:host([location=right]) #d {
+    // Position to the right.
+    left: unset;
+    right: 0;
+    transform: translateX(100%);
+};
+
+:host([location=right][open]) #d  {
+    transform: none;
+    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.5);
+}
+
+#fs {
+    width: 100%;
+    inset: 0;
+}
+
+#ifs {
+    // Override width/height to be 100% instead of 100v[wh].
+    height: 100%;
+};

src/scss/drawer.scss

@@ -0,0 +1,3 @@
+side-drawer {
+    background-color: var(--card-background-color);
+}

src/scss/timeline.scss

@@ -6,6 +6,9 @@
   display: block;
   background-color: var(--card-background-color);
   padding-bottom: 5px;
+
+  // So that absolute sidedrawer is relative to this host.
+  position: relative;
 }
 
 div.timeline {