sprintify-ui 0.8.11 → 0.8.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseLayoutSidebar.vue

@@ -93,7 +93,7 @@
 
     <div
       class="flex flex-col min-h-full || xl:print:pl-0"
-      :class="[collapsed ? 'xl:pl-16' : 'xl:pl-64']"  
+      :class="[collapsed ? 'xl:pl-14' : 'xl:pl-64']"  
     >
       <div class="sticky top-0 left-0 z-10 shadow shrink-0 || print:hidden">
         <BaseSystemAlert
@@ -141,7 +141,7 @@
     <!-- Static sidebar for desktop -->
     <div
       class="z-10 hidden || xl:fixed xl:inset-y-0 xl:flex xl:flex-col || xl:print:hidden"
-      :class="[collapsed ? 'xl:w-16' : 'xl:w-64']"  
+      :class="[collapsed ? 'xl:w-14' : 'xl:w-64']"  
     >
       <!-- Sidebar component, swap this element with another sidebar if you like -->
       <div
@@ -150,7 +150,7 @@
         :class="[dark ? 'bg-slate-800' : 'bg-slate-50 ring-1 ring-black ring-opacity-10']"
       >
         <div
-          class="flex"
+          class="flex items-center shrink-0"
           :class="[dark ? 'bg-slate-900' : 'border-b']"
           :style="{ height: navbarHeight + 'px' }"
         >
@@ -172,13 +172,13 @@
             class="px-3 flex justify-center items-center"
             :class="[
               dark ? 'text-slate-400 hover:text-slate-50' : 'text-slate-500 hover:text-slate-900',
-              collapsed ? 'grow' : 'shrink-0'
+              collapsed ? 'w-full' : 'shrink-0'
             ]"
             @click="toggleCollapse"
           >
             <BaseIcon
               icon="mdi:dock-left"
-              class="w-6 h-6"
+              class="w-5 h-5"
             />
           </button>
         </div>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -2,6 +2,7 @@ import { DateTime } from 'luxon';
 import PageDashboard from '../../.storybook/components/PageDashboard.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
 import { useSystemAlertStore } from '../stores/systemAlerts';
+import { sizes } from '../../.storybook/utils';
 
 export default {
   title: 'Layout/BaseLayoutSidebarConfigurable',
@@ -9,6 +10,14 @@ export default {
   parameters: {
     layout: 'fullscreen',
   },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: sizes,
+    },
+  },
   args: {
     user: {
       email: 'jane@witify.io',
@@ -49,7 +58,7 @@ export default {
           {
             label: 'Articles',
             to: '/articles',
-            icon: 'heroicons:document-text-solid',
+            icon: 'heroicons:document-text-20-solid',
             count: 3134,
             actions: [
               {
@@ -75,7 +84,7 @@ export default {
           {
             label: 'Users',
             to: '/users',
-            icon: 'heroicons:users-solid',
+            icon: 'heroicons:users-20-solid',
           },
         ],
       },
@@ -85,12 +94,12 @@ export default {
           {
             label: 'Account',
             to: '/account',
-            icon: 'heroicons:cog-solid',
+            icon: 'heroicons:cog-20-solid',
           },
           {
             label: 'Logout',
             action: logout,
-            icon: 'heroicons:arrow-left-on-rectangle-solid',
+            icon: 'heroicons:arrow-left-on-rectangle-20-solid',
           },
         ],
       },
@@ -99,12 +108,12 @@ export default {
       {
         label: 'Dashboard',
         to: '/',
-        icon: 'heroicons:home-solid',
+        icon: 'heroicons:home-20-solid',
       },
       {
         label: 'Settings',
         to: '/account',
-        icon: 'heroicons:cog-solid',
+        icon: 'heroicons:cog-20-solid',
       },
       {
         label: 'Logout',

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -8,8 +8,8 @@
   >
     <template #menu="{ collapsed }">
       <div
-        class="py-6"
-        :class="[collapsed ? '' : 'px-3']"
+        class=""
+        :class="[collapsed ? 'py-3' : 'px-3 py-6']"
       >
         <div :class="[collapsed ? 'space-y-2' : 'space-y-8']">
           <template
@@ -27,6 +27,13 @@
               >
                 {{ section.label }}
               </h2>
+              
+              <div
+                v-else
+                class="px-4"
+              >
+                <hr class="my-2 border-slate-600">
+              </div>
 
               <div
                 :class="[