diff --git a/web/satellite/vuetify-poc/src/layouts/default/Account.vue b/web/satellite/vuetify-poc/src/layouts/default/Account.vue
index 5a5333641..1a658e5c8 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/Account.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/Account.vue
@@ -3,8 +3,8 @@
-
-
+
+
@@ -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();
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
index 2bdcd6321..c4624075c 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -4,15 +4,16 @@
-
+
(true);
+import { useAppStore } from '@poc/store/appStore';
+
const activeTheme = ref(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;
diff --git a/web/satellite/vuetify-poc/src/layouts/default/Default.vue b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
index 02c6f1367..1ae68ca62 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/Default.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
@@ -3,8 +3,8 @@
-
-
+
+
@@ -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.
diff --git a/web/satellite/vuetify-poc/src/store/appStore.ts b/web/satellite/vuetify-poc/src/store/appStore.ts
new file mode 100644
index 000000000..4c4b30020
--- /dev/null
+++ b/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(new AppState());
+
+ function toggleNavigationDrawer(): void {
+ state.isNavigationDrawerShown = !state.isNavigationDrawerShown;
+ }
+
+ return {
+ state,
+ toggleNavigationDrawer,
+ };
+});