OrcasHub: Add navigation drawer on mobile

assets/style.css

@@ -18,11 +18,38 @@ html, body {
   .header-logo svg {
     height: 8rem;
   }
+
+  .mobile-only {
+    display: none !important;
+  }
 }
 @media (max-width: 768px) {
   .header-logo svg {
     height: 5rem;
   }
+
+  .navbar {
+    height: 0 !important;
+  }
+
+  /* Do not show the header buttons on mobile */
+  .navbar ul,
+  .v-application .d-flex.right-side-header-buttons {
+    display: none !important;
+  }
+
+  .v-navigation-drawer__content .active {
+    background-color: #e8e8e8;
+  }
+}
+
+.mobile-menu-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  color: #9ca3af !important;
+  background-color: #1f2937;
+  border-radius: 0.375rem;
 }
 
 /* OrcasHub header links */
@@ -30,8 +57,6 @@ html, body {
   height: 3rem;
   background-color: #374151;
 
-  /* TODO: Hide the navbar links on mobile and replace with toggleable menu. */
-
   &.d-flex.pa-4 {
     padding: 0 16px !important;
   }

components/NavHeader.vue

@@ -20,13 +20,64 @@
 
     <v-spacer/>
 
-    <div class='d-flex'>
-      <v-btn icon large href='/about' :title='$t("common.about")' :aria-label='$t("common.about")'>
-        <v-icon v-text='mdiInformation' />
-      </v-btn>
-      <v-btn icon large @click='toggleDark'>
-        <v-icon v-text='mdiContrastCircle' />
-      </v-btn>
+    <div class="mobile-only">
+      <v-app-bar-nav-icon class="mobile-menu-button" @click.stop="drawer = !drawer" >
+        <v-icon v-text="mdiMenu" />
+      </v-app-bar-nav-icon>
+      <client-only>
+        <v-navigation-drawer v-model="drawer" absolute left temporary>
+          <v-list nav dense>
+            <v-list-item-group
+              v-model="group"
+              active-class="deep-purple--text text--accent-4"
+            >
+              <v-list-item tag="a" href="https://orcashub.org">
+                <v-list-item-title>Home</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                tag="a"
+                href="https://orcashub.org/classified/for-sale"
+              >
+                <v-list-item-title>Classifieds</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item class="active">
+                <v-list-item-title>Events</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item tag="a" href="https://groups.orcashub.org">
+                <v-list-item-title>Groups</v-list-item-title>
+              </v-list-item>
+
+              <v-list-item tag="a" href="https://wiki.orcashub.org">
+                <v-list-item-title>Resources</v-list-item-title>
+              </v-list-item>
+
+              <v-divider></v-divider>
+
+              <v-list-item
+                v-if="$auth.loggedIn && ($auth.user.is_admin || $auth.user.is_editor)"
+                nuxt
+                to="/admin"
+              >
+                <v-list-item-title v-text="$t(`common.${$auth.user.role}`)" />
+              </v-list-item>
+
+              <v-list-item v-if="$auth.loggedIn" @click="logout">
+                <v-list-item-title v-text="$t('common.logout')" />
+              </v-list-item>
+
+              <v-list-item v-if="!$auth.loggedIn" nuxt to="/login">
+                <v-list-item-title v-text="$t('common.login')" />
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+        </v-navigation-drawer>
+      </client-only>
+    </div>
+
+    <div class='d-flex right-side-header-buttons'>
       <client-only>
         <v-menu offset-y transition="slide-y-transition" bottom max-height=600>
           <template v-slot:activator="{ on, attrs }">
@@ -107,22 +158,19 @@
 </template>
 <script>
 
-import { mdiLogin, mdiDotsVertical, mdiLogout, mdiAccount, mdiCog, mdiInformation, mdiContrastCircle, mdiCalendarAccount } from '@mdi/js'
+import { mdiLogin, mdiDotsVertical, mdiMenu, mdiLogout, mdiAccount, mdiCog, mdiCalendarAccount } from '@mdi/js'
 import { mapActions, mapGetters } from 'vuex'
 
 export default {
   data () {
-    return { mdiLogin, mdiDotsVertical, mdiLogout, mdiAccount, mdiCog, mdiInformation, mdiContrastCircle, mdiCalendarAccount }
+    return { mdiLogin, mdiDotsVertical, mdiMenu, mdiLogout, mdiAccount, mdiCog, mdiCalendarAccount, drawer: false, group: null }
+  },
+  watch: {
+    group() {
+      this.drawer = false
+    },
   },
-  computed: {
-    ...mapGetters(['hide_thumbs', 'is_dark']),
-  },  
   methods: {
-    ...mapActions(['setLocalSetting']),
-    async toggleDark() {
-      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
-      this.setLocalSetting({ key: 'theme.is_dark', value: !this.is_dark })
-    },    
     logout () {
       this.$root.$message('common.logout_ok')
       this.$auth.logout()