Fix mobile navigation...

matiasdelellis · Feb 6, 2024 · 3703403 · 3703403
1 parent 5bd29a5
commit 3703403
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/css/not-vue.css b/css/not-vue.css
@@ -178,4 +178,40 @@
 
 #app-navigation:not(.vue) .collapsible:hover > a, #app-navigation:not(.vue) .collapsible:focus > a {
   background-image: none;
+}
+
+/* mobile.css */
+
+@media only screen and (width < 1024px) {
+
+  #app-navigation:not(.vue) {
+    transform: translateX(-300px);
+    position: fixed;
+    height: var(--body-height);
+  }
+
+  .snapjs-left #app-navigation {
+    transform: translateX(0);
+  }
+
+  #app-navigation:not(.hidden) + #app-content {
+    margin-left: 0;
+  }
+
+  #app-navigation-toggle {
+    position: fixed;
+    display: inline-block !important;
+    left: 0;
+    width: 44px;
+    height: 44px;
+    z-index: 1050;
+    cursor: pointer;
+    opacity: 0.6;
+  }
+
+  #app-navigation-toggle:hover,
+  #app-navigation-toggle:focus {
+    opacity: 1;
+  }
+
 }