From 8e7c20fde98bfd0169f0018bea28b59fcdcc732d Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Sun, 17 Nov 2024 21:08:05 -0500
Subject: [PATCH] Enabled the sidebar to slideout.

Use main, header, and aside.

Disabled #Sticker2 and the snapshot button for now.
---
 src/App.vue               | 16 ++++++++--------
 src/main.ts               |  2 ++
 src/views/StickerView.vue | 21 ++++++++++-----------
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7b2f69e..2207ca3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@ import OverlayBadge from 'primevue/overlaybadge';
 
 <template>
   <div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
-    <div id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-72 lg:w-28 select-none">
+    <aside id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-36 lg:w-28 select-none">
       <div class="flex flex-col h-full">
         <div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
           Designer
@@ -58,9 +58,9 @@ import OverlayBadge from 'primevue/overlaybadge';
           </a>
         </div>
       </div>
-    </div>
-    <div class="min-h-screen flex flex-col relative flex-auto">
-      <div class="flex justify-between items-center px-8 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]">
+    </aside>
+    <main class="min-h-screen flex flex-col relative flex-auto">
+      <header class="flex justify-between items-center px-4 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]">
         <div class="flex">
           <a
             v-styleclass="{
@@ -71,7 +71,7 @@ import OverlayBadge from 'primevue/overlaybadge';
                             leaveActiveClass: 'animate-fadeoutleft',
                             hideOnOutsideClick: true
                         }"
-            class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-1"
+            class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-2"
           >
             <i class="pi pi-bars text-4xl" />
           </a>
@@ -120,13 +120,13 @@ import OverlayBadge from 'primevue/overlaybadge';
             </a>
           </li>
         </ul>
-      </div>
-      <div class="p-4 flex flex-col flex-auto">
+      </header>
+      <div class="p-0 sm:p-4">
         <div class="border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto">
           <RouterView />
         </div>
       </div>
-    </div>
+    </main>
   </div>
 </template>
 
diff --git a/src/main.ts b/src/main.ts
index df4f62d..8f869bf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import App from './App.vue'
 import router from './router'
 import PrimeVue from 'primevue/config';
 import Aura from '@primevue/themes/aura';
+import StyleClass from 'primevue/styleclass';
 
 const app = createApp(App)
 
@@ -18,4 +19,5 @@ app.use(PrimeVue, {
   }
 })
 
+app.directive('styleclass', StyleClass);
 app.mount('#app')
diff --git a/src/views/StickerView.vue b/src/views/StickerView.vue
index f687b30..25c3508 100644
--- a/src/views/StickerView.vue
+++ b/src/views/StickerView.vue
@@ -67,30 +67,29 @@ function onFormSubmit() {
 <template>
   <div id="StickerPage">
     <h1>Sticker</h1>
-    <div id="StickerWrapper">
-      <p>6-inch sticker</p>
+<!--    <Button class="w-20" type="submit" severity="secondary" label="Take a snapshot" />-->
+    <div id="StickerWrapper" class="sticky top-0 z-10">
       <Sticker
         id="Sticker1"
         v-bind:layout v-bind:color="color2"
         v-bind:message1 v-bind:message2
         v-bind:message3 v-bind:message4
       />
-      <p>8-inch sticker</p>
-      <Sticker
-        id="Sticker2"
-        v-bind:layout v-bind:color="color2"
-        v-bind:message1 v-bind:message2
-        v-bind:message3 v-bind:message4
-      />
+<!--      <p>8-inch sticker</p>-->
+<!--      <Sticker-->
+<!--        id="Sticker2"-->
+<!--        v-bind:layout v-bind:color="color2"-->
+<!--        v-bind:message1 v-bind:message2-->
+<!--        v-bind:message3 v-bind:message4-->
+<!--      />-->
     </div>
-    <Button type="submit" severity="secondary" label="Take a snapshot" />
     <Card>
       <template #content>
         <Form v-slot="$form"
               v-bind:initialValues
               v-bind:resolver="resolver"
               @submit="onFormSubmit">
-          <div class="bg-surface-50 dark:bg-surface-950 px-6 py-10 md:px-12 lg:px-5">
+          <div class="bg-surface-50 dark:bg-surface-950 px-3 py-5 md:px-12 lg:px-5">
             <div class="grid grid-cols-12 gap-4">
               <div class="col-span-12">
                 <label for="nickname2">Layout {{layout}}</label>