From d15023e1f020aa33a6b6d881b87c66c07bdfc191 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 3 Jan 2025 19:27:58 +0300
Subject: [PATCH] Headless drawer for designer

---
 apps/showcase/assets/styles/tailwind/main.css |  4 ++
 .../components/layout/AppDesigner.vue         | 37 ++++++++++++++-----
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/apps/showcase/assets/styles/tailwind/main.css b/apps/showcase/assets/styles/tailwind/main.css
index dec8d14e1..e0140547b 100644
--- a/apps/showcase/assets/styles/tailwind/main.css
+++ b/apps/showcase/assets/styles/tailwind/main.css
@@ -10,4 +10,8 @@
     .btn-design-outlined {
         @apply px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60;
     }
+
+    .icon-btn {
+      @apply h-8 w-8 rounded-full inline-flex justify-center items-center hover:bg-surface-100 dark:hover:bg-surface-800 text-zinc-500 dark:text-zinc-400 transition-colors duration-200;
+    }
 }
\ No newline at end of file
diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 9507f282b..e975765c6 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -1,18 +1,32 @@
 <template>
     <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide" :dt="drawerTokens">
-        <template #header>
-            <div class="flex items-center gap-2">
-                <Button v-if="$appState.designer.activeView !== 'dashboard'" variant="text" severity="secondary" rounded type="button" icon="pi pi-chevron-left" @click="openDashboard" />
-                <span class="font-bold text-xl">{{ viewTitle }}</span>
+        <template #container="{ closeCallback }">
+            <div class="flex items-center justify-between p-5">
+                <div class="flex items-center gap-2">
+                    <button v-if="$appState.designer.activeView !== 'dashboard'" type="button" @click="openDashboard" class="icon-btn">
+                        <i class="pi pi-chevron-left" />
+                    </button>
+                    <span class="font-bold text-xl">{{ viewTitle }}</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <button type="button" @click="toggleDarkMode" class="icon-btn">
+                        <i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
+                    </button>
+                    <button type="button" @click="closeCallback" class="icon-btn">
+                        <i class="pi pi-times" />
+                    </button>
+                </div>
             </div>
-        </template>
 
-        <DesignDashboard v-if="$appState.designer.activeView === 'dashboard'" />
-        <DesignCreateTheme v-else-if="$appState.designer.activeView === 'create_theme'" />
-        <DesignEditor v-else-if="$appState.designer.activeView === 'editor'" :deferred="deferredTabs" />
+            <div class="flex-auto overflow-auto pb-5 px-5">
+                <DesignDashboard v-if="$appState.designer.activeView === 'dashboard'" />
+                <DesignCreateTheme v-else-if="$appState.designer.activeView === 'create_theme'" />
+                <DesignEditor v-else-if="$appState.designer.activeView === 'editor'" :deferred="deferredTabs" />
+            </div>
 
-        <template #footer>
-            <DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" />
+            <div class="p-5">
+                <DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" />
+            </div>
         </template>
     </Drawer>
     <ConfirmDialog group="designer"></ConfirmDialog>
@@ -177,6 +191,9 @@ export default {
             this.$appState.designer.theme.preset.semantic.primary = this.$appState.designer.theme.preset.primitive.emerald;
             this.$appState.designer.theme.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.slate };
             this.$appState.designer.theme.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.zinc };
+        },
+        toggleDarkMode() {
+            EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
         }
     },
     computed: {