feat(kitchen sink / inbox): implement toggle menus

gitsindonesia · Jun 19, 2023 · ddd0e34 · ddd0e34
1 parent b0a97bf
commit ddd0e34
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/starter/kitchen-sink/components/inbox/Aside.vue b/starter/kitchen-sink/components/inbox/Aside.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-//
+const inboxDrawer = useInboxDrawer();
 </script>
 
 <template>
   <VNavDrawer
     :bordered="$colorMode.preference !== 'light'"
     mini
-    class="flex flex-col items-center py-2 gap-2 sticky !-auto"
+    class="flex flex-col items-center py-2 gap-2 sticky !-auto !z-30"
     :class="{
       '!bg-gray-blue-50': $colorMode.preference === 'light',
     }"
   >
-    <VBtn prefix-icon="ri:menu-line" fab icon />
+    <VBtn prefix-icon="ri:menu-line" fab icon @click="inboxDrawer = !inboxDrawer" />
     <VBtn prefix-icon="ri:mail-line" fab icon text class="mt-4" />
     <VBtn prefix-icon="ri:message-line" fab icon text />
     <VBtn prefix-icon="ri:user-line" fab icon text />

diff --git a/starter/kitchen-sink/components/inbox/Menus.vue b/starter/kitchen-sink/components/inbox/Menus.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-const modelValue = defineModel<boolean>({
-  default: true,
-});
+const inboxDrawer = useInboxDrawer();
 </script>
 
 <template>
   <VNavDrawer
-    v-model="modelValue"
+    v-model="inboxDrawer"
     class="px-4 !h-auto py-3 sticky top-16 self-start w-[250px]"
   >
     <VBtn prefix-icon="ri:edit-line" size="lg" color="primary" block> Compose </VBtn>

diff --git a/starter/kitchen-sink/composables/globalState.ts b/starter/kitchen-sink/composables/globalState.ts
@@ -0,0 +1 @@
+export const useInboxDrawer = () => useState("inbox-drawer", () => true);
diff --git a/starter/kitchen-sink/layouts/inbox.vue b/starter/kitchen-sink/layouts/inbox.vue
@@ -4,8 +4,7 @@ useHead({
     class: "bg-white dark:bg-gray-true-800",
   },
 });
-
-const menu = useState("inbox-menu", () => true);
+const inboxDrawer = useInboxDrawer();
 </script>
 
 <template>
@@ -14,9 +13,12 @@ const menu = useState("inbox-menu", () => true);
     <div class="flex-grow">
       <InboxNavbar />
       <div class="flex">
-        <InboxMenus v-model="menu" />
+        <InboxMenus />
         <div
           class="flex-grow bg-white h-[calc(100vh-100px)] overflow-y-auto rounded-xl my-4 border dark:bg-gray-true-800 dark:border-gray-true-700"
+          :class="{
+            'ml-4': !inboxDrawer,
+          }"
         >
           <slot />
         </div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const useInboxDrawer = () => useState("inbox-drawer", () => true);