From 496ece54eb561f2c8f7651ebca8cc251f755a1fe Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Thu, 18 Jun 2020 23:06:58 +0200
Subject: [PATCH] Add navigation drawer

---
 frontend/components/Navbar.vue | 125 ++++++++++++++++++++++++---------
 1 file changed, 92 insertions(+), 33 deletions(-)

diff --git a/frontend/components/Navbar.vue b/frontend/components/Navbar.vue
index 2121204..2a571a2 100644
--- a/frontend/components/Navbar.vue
+++ b/frontend/components/Navbar.vue
@@ -1,49 +1,108 @@
 <template>
-    <v-app-bar fixed app color="primary">
-        <v-btn to="/" text rounded>Simple Notes</v-btn>
-        <v-spacer />
-        <client-only>
-            <v-btn aria-label="theme switcher" icon @click="toggleTheme">
-                <v-icon
-                    >{{ $vuetify.theme.dark ? mdiBrightness2 : mdiBrightness5 }}
-                </v-icon>
-            </v-btn>
-        </client-only>
-        <v-menu transition="scroll-y-transition" offset-y bottom left>
-            <template v-slot:activator="{ on }">
-                <v-btn aria-label="menu" icon v-on="on">
-                    <v-icon>{{ mdiDotsVertical }}</v-icon>
-                </v-btn>
-            </template>
+    <div>
+        <v-navigation-drawer v-model="drawer" clipped fixed app color="primary">
+            <client-only>
+                <v-list-item v-if="loggedIn">
+                    <v-list-item-avatar>
+                        <v-icon>{{ mdiAccount }}</v-icon>
+                    </v-list-item-avatar>
 
-            <v-list>
-                <v-list-item
-                    v-if="loggedIn && !$route.path.includes('/notes')"
-                    to="/notes"
-                >
-                    My notes
+                    <v-list-item-content>
+                        <v-list-item-title>
+                            {{ $auth.$state.user.username }}
+                        </v-list-item-title>
+                    </v-list-item-content>
                 </v-list-item>
-                <v-list-item v-if="loggedIn" @click="logout">
-                    Logout
-                </v-list-item>
-                <v-list-item v-else>
-                    <v-btn to="/account" text rounded>Account</v-btn>
-                </v-list-item>
-            </v-list>
-        </v-menu>
-    </v-app-bar>
+                <v-divider />
+                <v-list>
+                    <v-list-item
+                        v-for="(item, i) in items"
+                        :key="i"
+                        :to="item.to"
+                        router
+                        nuxt
+                        exact
+                    >
+                        <v-list-item-action>
+                            <v-icon>{{ item.icon }}</v-icon>
+                        </v-list-item-action>
+                        <v-list-item-content>
+                            <v-list-item-title v-text="item.title" />
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+            </client-only>
+            <template v-slot:append>
+                <client-only>
+                    <div class="pa-2">
+                        <v-btn
+                            v-if="loggedIn"
+                            block
+                            color="secondary"
+                            @click.stop="logout"
+                        >
+                            Logout
+                        </v-btn>
+                        <v-btn v-else block color="secondary" to="/account">
+                            Login
+                        </v-btn>
+                    </div>
+                </client-only>
+            </template>
+        </v-navigation-drawer>
+
+        <v-app-bar clipped-left fixed app color="primary">
+            <v-app-bar-nav-icon @click.stop="drawer = !drawer">
+                <v-icon>{{ mdiMenu }}</v-icon>
+            </v-app-bar-nav-icon>
+            <v-btn to="/" text rounded>Simple Notes</v-btn>
+            <v-spacer />
+            <client-only>
+                <v-btn aria-label="theme switcher" icon @click="toggleTheme">
+                    <v-icon>
+                        {{
+                            $vuetify.theme.dark
+                                ? mdiBrightness2
+                                : mdiBrightness5
+                        }}
+                    </v-icon>
+                </v-btn>
+            </client-only>
+        </v-app-bar>
+    </div>
 </template>
 
 <script>
-import { mdiDotsVertical, mdiBrightness5, mdiBrightness2 } from '@mdi/js'
+import {
+    mdiMenu,
+    mdiBrightness5,
+    mdiBrightness2,
+    mdiPencil,
+    mdiHome,
+    mdiAccount,
+} from '@mdi/js'
 import { mapState } from 'vuex'
 
 export default {
     name: 'Navbar',
     data: () => ({
-        mdiDotsVertical,
+        mdiMenu,
         mdiBrightness5,
         mdiBrightness2,
+        mdiAccount,
+        drawer: false,
+        items: [
+            {
+                icon: mdiHome,
+                title: 'Welcome',
+                to: '/',
+            },
+            {
+                icon: mdiPencil,
+                title: 'Notes',
+                to: '/notes',
+            },
+        ],
     }),
     computed: {
         ...mapState('auth', ['loggedIn']),