fix: mobile sidebar (close #14)

pulsejet · Feb 22, 2025 · fdb236e · fdb236e
1 parent 1bad8a7
commit fdb236e
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
     <title>Ownly</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -5,27 +5,50 @@
 
     <!-- This view will show the main app -->
     <main v-else-if="!showLogin" class="full-h is-fullwidth router-view">
-      <NavBar></NavBar>
+      <!-- Main navigation menu ("bar" for historical reasons) -->
+      <NavBar class="nav-bar" :class="{ show: showNav }"></NavBar>
+
+      <!-- Backdrop for navigation on mobile -->
+      <div v-if="showNav" class="nav-backdrop" @click="showNav = false"></div>
+
       <div class="router-view-inner">
+        <!-- Top bar for mobile -->
+        <div class="top-bar has-background-primary soft-if-dark">
+          <button class="button is-primary soft-if-dark" @click="showNav = true">
+            <FontAwesomeIcon :icon="faBars" />
+          </button>
+        </div>
+
+        <!-- Main content -->
         <RouterView v-slot="{ Component }">
-          <component :is="Component" />
+          <component class="router-view-content" :is="Component" />
         </RouterView>
       </div>
     </main>
   </Transition>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
-import { RouterView } from 'vue-router';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { RouterView, useRoute } from 'vue-router';
+
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 
 import NavBar from '@/components/NavBar.vue';
 import LandingView from '@/views/LandingView.vue';
 
 import { GlobalBus } from '@/services/event-bus';
 import { Toast } from '@/utils/toast';
 
+const route = useRoute();
 const showLogin = ref(true);
+const showNav = ref(false);
+
+watch(
+  () => route.path,
+  () => (showNav.value = false),
+);
 
 onMounted(() => {
   GlobalBus.addListener('wksp-error', wkspErrorListener);
@@ -52,4 +75,53 @@ main.router-view {
     overflow: hidden;
   }
 }
+
+.top-bar,
+.nav-backdrop {
+  display: none;
+}
+
+/** Mobile styling - hide the navbar and show with button */
+@media (max-width: 1023px) {
+  .router-view-inner {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .router-view-content {
+    flex: 1;
+  }
+
+  .nav-bar {
+    position: fixed;
+    z-index: 100000;
+    will-change: transform;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease-in-out;
+    touch-action: manipulation;
+
+    &.show {
+      transform: translateX(0);
+    }
+  }
+
+  .nav-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 10000;
+    touch-action: manipulation;
+  }
+
+  .top-bar {
+    display: block;
+    padding: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    touch-action: manipulation;
+  }
+}
 </style>
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -48,6 +48,7 @@ main.full-h {
 }
 
 * {
+  -webkit-tap-highlight-color: transparent;
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,6 +48,7 @@ main.full-h { @@
     }
     * {
+      -webkit-tap-highlight-color: transparent;
       scrollbar-width: thin;
       scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
     }
@@ Expand Down @@