OrcasHub: Add navigation drawer on mobile

assets/style.css

@@ -6,6 +6,107 @@ html, body {
   font-family: sans-serif;
 }
 
+/* OrcasHub logo at the top of the page. */
+.header-logo {
+  display: flex;
+  justify-content: center;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  background-color: #374151;
+}
+@media (min-width: 768px) {
+  .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 */
+.navbar {
+  height: 3rem;
+  background-color: #374151;
+
+  &.d-flex.pa-4 {
+    padding: 0 16px !important;
+  }
+
+  ul {
+    line-height: 1.25rem;
+    display: inline-flex;
+    height: min-content;
+
+    li + li {
+      margin-left: 16px;
+    }
+
+    li {
+      list-style: none;
+      padding: 0.5rem 0.75rem;
+      border-radius: 0.375rem;
+
+      &.active {
+        background-color: #111827;
+
+        a {
+          color: #ffffff;
+        }
+      }
+    }
+
+    a {
+      text-decoration: none;
+      color: #d1d5db;
+      font-weight: 500;
+      font-size: 0.875rem;
+    }
+  }
+}
+
+.right-side-header-buttons {
+  button {
+    color: #d1d5db !important;
+  }
+  a {
+    color: #d1d5db !important;
+  }
+}
+
+/* Remove the background image */
+nav {
+  background-image: none !important;
+}
+
 li {
   margin-left: 10px;
 }

components/NavHeader.vue

@@ -1,18 +1,83 @@
 <template>
-  <div class='d-flex pa-4'>
+  <div class="d-flex pa-4 navbar">
-    <v-btn icon large nuxt to='/'>
+    <ul>
-      <img src='/logo.png' height='40' />
+      <li>
-    </v-btn>
+        <a href="/">Home</a>
+      </li>
+      <li>
+        <a href="/classified/for-sale">Classifieds</a>
+      </li>
+      <li class="active">
+        <a href="/events">Events</a>
+      </li>
+      <li>
+        <a href="https://groups.orcashub.org">Groups</a>
+      </li>
+      <li>
+        <a href="/community-resources">Resources</a>
+      </li>
+    </ul>
 
     <v-spacer/>
 
-    <div class='d-flex'>
+    <div class="mobile-only">
-      <v-btn icon large href='/about' :title='$t("common.about")' :aria-label='$t("common.about")'>
+      <v-app-bar-nav-icon class="mobile-menu-button" @click.stop="drawer = !drawer" >
-        <v-icon v-text='mdiInformation' />
+        <v-icon v-text="mdiMenu" />
-      </v-btn>
+      </v-app-bar-nav-icon>
-      <v-btn icon large @click='toggleDark'>
+      <client-only>
-        <v-icon v-text='mdiContrastCircle' />
+        <v-navigation-drawer v-model="drawer" absolute left temporary>
-      </v-btn>
+          <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 }">
@@ -93,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()