web/satellite/vuetify-poc: allow navigation drawer to be toggled

This change allows the navigation drawer to be toggled by clicking the
the hamburger menu in the navigation bar. The hamburger menu has been
hidden in pages not containing a navigation drawer.

Resolves #6034

Change-Id: I48cfee1f48964c500c07f09f188c7077442261ab

web/satellite/vuetify-poc/src/layouts/default/Account.vue

@@ -3,8 +3,8 @@
 
 <template>
     <v-app>
-        <default-bar />
-        <account-nav />
+        <default-bar show-nav-drawer-button />
+        <account-nav v-if="appStore.state.isNavigationDrawerShown" />
         <default-view />
     </v-app>
 </template>
@@ -15,4 +15,8 @@ import { VApp } from 'vuetify/components';
 import DefaultBar from './AppBar.vue';
 import AccountNav from './AccountNav.vue';
 import DefaultView from './View.vue';
+
+import { useAppStore } from '@poc/store/appStore';
+
+const appStore = useAppStore();
 </script>

web/satellite/vuetify-poc/src/layouts/default/AppBar.vue

@@ -4,15 +4,16 @@
 <template>
     <v-app-bar :elevation="0">
         <v-app-bar-nav-icon
+            v-if="showNavDrawerButton"
             variant="text"
             color="default"
             class="ml-1"
             size="x-small"
             density="comfortable"
-            @click.stop="drawer = !drawer"
+            @click.stop="appStore.toggleNavigationDrawer()"
         />
 
-        <v-app-bar-title class="mx-1">
+        <v-app-bar-title class="mx-1" :class="{ 'ml-4': !showNavDrawerButton }">
             <v-img
                 v-if="theme.global.current.value.dark"
                 src="@poc/assets/logo-dark.svg"
@@ -154,11 +155,19 @@ import {
     VDivider,
 } from 'vuetify/components';
 
-const drawer = ref<boolean>(true);
+import { useAppStore } from '@poc/store/appStore';
+
 const activeTheme = ref<number>(0);
 
+const appStore = useAppStore();
 const theme = useTheme();
 
+const props = withDefaults(defineProps<{
+    showNavDrawerButton: boolean;
+}>(), {
+    showNavDrawerButton: false,
+});
+
 function toggleTheme(newTheme: string): void {
     if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
         return;

web/satellite/vuetify-poc/src/layouts/default/Default.vue

@@ -3,8 +3,8 @@
 
 <template>
     <v-app>
-        <default-bar />
-        <ProjectNav />
+        <default-bar show-nav-drawer-button />
+        <ProjectNav v-if="appStore.state.isNavigationDrawerShown" />
         <default-view />
     </v-app>
 </template>
@@ -25,6 +25,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
 import { useABTestingStore } from '@/store/modules/abTestingStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { LocalData } from '@/utils/localData';
+import { useAppStore } from '@poc/store/appStore';
 
 const router = useRouter();
 
@@ -32,6 +33,7 @@ const billingStore = useBillingStore();
 const usersStore = useUsersStore();
 const abTestingStore = useABTestingStore();
 const projectsStore = useProjectsStore();
+const appStore = useAppStore();
 
 /**
  * Stores project to vuex store and browser's local storage.

web/satellite/vuetify-poc/src/store/appStore.ts

@@ -0,0 +1,22 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import { defineStore } from 'pinia';
+import { reactive } from 'vue';
+
+class AppState {
+    public isNavigationDrawerShown = true;
+}
+
+export const useAppStore = defineStore('app', () => {
+    const state = reactive<AppState>(new AppState());
+
+    function toggleNavigationDrawer(): void {
+        state.isNavigationDrawerShown = !state.isNavigationDrawerShown;
+    }
+
+    return {
+        state,
+        toggleNavigationDrawer,
+    };
+});