Start UI Change

frontend/layouts/default.vue

@@ -240,26 +240,42 @@ onMounted(() => {
         </UCard>
       </UContainer>
     </div>
-    <UDashboardLayout class="safearea" v-else>
-      <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
-        <UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;"
-                          :class="['!border-transparent']" :ui="{ left: 'flex-1' }">
-          <template #left>
+    <div class="safearea flex min-h-screen w-full flex-col overflow-hidden" v-else>
+<!--      <div
+          class="border-b border-default bg-default px-3 py-2"
+          style="padding-top: max(env(safe-area-inset-top, 0px), 0.5rem);"
+      >
+        <TenantDropdown class="min-w-0 w-full max-w-sm" />
+      </div>-->
+
+      <UDashboardGroup class="flex min-h-0 flex-1 flex-col overflow-hidden">
+
+
+        <UDashboardSidebar
+            id="sidebar"
+            collapsible
+            resizable
+            :default-size="18"
+            :min-size="14"
+            :max-size="24"
+            class="shrink-0 border-r border-default bg-default"
+        >
+          <template #header>
             <TenantDropdown class="w-full"/>
+
           </template>
-        </UDashboardNavbar>
 
-        <UDashboardSidebar id="sidebar">
-
-          <MainNav/>
-
-          <div class="flex-1"/>
-
-          <template #footer>
+          <template #default="{ collapsed }">
+            <MainNav :collapsed="collapsed" />
+          </template>
 
+          <template #footer="{ collapsed }">
             <div class="flex flex-col gap-3">
+              <div class="flex items-center gap-2">
+                <UColorModeToggle :class="[collapsed ? 'mx-auto' : 'ml-3']"/>
+                <UDashboardSidebarCollapse v-if="collapsed" class="mx-auto" />
+              </div>
 
-              <UColorModeToggle class="ml-3"/>
               <LabelPrinterButton class="w-full"/>
 
               <div class="flex flex-col gap-1">
@@ -272,10 +288,10 @@ onMounted(() => {
                     :icon="item.icon"
                     @click="item.click ? item.click() : null"
                 >
-                  {{ item.label }}
+                  <span v-if="!collapsed">{{ item.label }}</span>
 
                   <template #trailing>
-                    <UBadge v-if="item.badge" color="primary" variant="solid" size="xs">
+                    <UBadge v-if="!collapsed && item.badge" color="primary" variant="solid" size="xs">
                       {{ item.badge }}
                     </UBadge>
                   </template>
@@ -287,19 +303,18 @@ onMounted(() => {
             </div>
           </template>
         </UDashboardSidebar>
-      </UDashboardPanel>
 
-      <UDashboardPage>
-        <UDashboardPanel grow>
+
+        <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
           <slot/>
-        </UDashboardPanel>
-      </UDashboardPage>
+
+        </div>
+      </UDashboardGroup>
 
       <HelpSlideover/>
 
       <Calculator v-if="calculatorStore.isOpen"/>
-
-    </UDashboardLayout>
+    </div>
   </div>
 
   <div