web: mobile navigation

web/src/components/sidebar/CobaltLogo.svelte

@@ -12,4 +12,9 @@
         align-items: center;
         padding: calc(var(--sidebar-padding) * 2 - 2px);
     }
+    @media screen and (max-width: 535px) {
+        #cobalt-logo {
+            display: none;
+        }
+    }
 </style>

web/src/components/sidebar/Sidebar.svelte

@@ -72,4 +72,39 @@
         padding-bottom: var(--sidebar-padding);
         overflow: scroll;
     }
+
+    @media screen and (max-width: 535px) {
+        #sidebar,
+        #sidebar-tabs,
+        .sidebar-inner-container {
+            flex-direction: row;
+        }
+        #sidebar {
+            width: 100%;
+            height: auto;
+            overflow: scroll;
+            position: fixed;
+            bottom: 0;
+        }
+        #sidebar::before {
+            content: '';
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            display: block;
+            position: absolute;
+            pointer-events: none;
+            background: linear-gradient(90deg,
+                rgba(0, 0, 0, 0.9) 0%,
+                rgba(0, 0, 0, 0) 4%,
+                rgba(0, 0, 0, 0) 50%,
+                rgba(0, 0, 0, 0) 96%,
+                rgba(0, 0, 0, 0.9) 100%
+            );
+        }
+        #sidebar-tabs {
+            justify-content: space-around;
+            padding-bottom: 0;
+        }
+    }
 </style>

web/src/components/sidebar/SidebarTab.svelte

@@ -39,4 +39,14 @@
     .sidebar-tab:hover {
         opacity: 1;
     }
+
+    @media screen and (max-width: 535px) {
+        .sidebar-tab {
+            padding: 5px var(--sidebar-padding);
+            min-width: calc(var(--sidebar-width) / 2);
+        }
+        .sidebar-tab.active {
+            z-index: 2;
+        }
+    }
 </style>

web/src/routes/+layout.svelte

@@ -42,4 +42,14 @@
         display: flex;
         overflow: scroll;
     }
+    @media screen and (max-width: 535px) {
+        #cobalt {
+            display: grid;
+            grid-template-columns: unset;
+            grid-template-rows: 1fr var(--sidebar-width);
+        }
+        #content {
+            order: -1;
+        }
+    }
 </style>