Collapsable info tab on images

gallery/static/sass/components/image-view/info-tab.sass

@@ -1,5 +1,5 @@
 .info-container
-    width: 100%
+    width: 25rem
     height: 100%
 
     display: flex
@@ -9,6 +9,10 @@
     background-color: RGB($bg-200)
 
     overflow-y: auto
+    transition: transform 0.3s cubic-bezier(.79, .14, .15, .86)
+
+    &.collapsed
+        transform: translateX(-25rem)
 
 .info-tab
     width: 100%

gallery/static/sass/components/image-view/view.sass

@@ -7,6 +7,9 @@
 .image-grid
     padding: 0
 
+    width: 100%
+    height: 100vh
+
     position: relative
 
     display: grid
@@ -15,10 +18,11 @@
     grid-template-rows: 1fr auto
     gap: 0
 
-    height: 100vh
-
     z-index: 3
 
+    &.collapse
+        grid-template-columns: 0rem 1fr
+
 #image-info
     grid-area: info
 #image-tools