@weni/unnnic-system 1.26.0 → 1.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.26.0",
+  "version": "1.26.2",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/components/Sidebar/SidebarItem.vue

@@ -11,7 +11,7 @@
       size="ant"
       :scheme="active.item ? 'weni-600' : 'neutral-cloudy'"
     />
-    <p :class="{ 'unnnic-sidebar-item__label': true, active: active.item }">
+    <p :class="{ 'unnnic-sidebar-item__label': true, active: active.item }" :title="item.label">
       {{ item.label }}
     </p>
     <Icon
@@ -48,6 +48,7 @@
             'unnnic-sidebar-item-child__label': true,
             active: isActive(childIndex),
           }"
+          :title="child.label"
         >
           {{ child.label }}
         </p>
@@ -74,6 +75,10 @@ export default {
       type: Object,
       default: () => ({ item: false, childIndex: null }),
     },
+    autoNavigateFirstChild: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -94,6 +99,10 @@ export default {
   methods: {
     handleShowChildrenList() {
       this.showChildrenList = !this.showChildrenList;
+      const isOpening = this.showChildrenList;
+      if (isOpening && this.autoNavigateFirstChild) {
+        this.$emit('navigate', { item: this.item, child: this.item.children[0] });
+      }
     },
     isActive(paramChildIndex = null) {
       const { item, childIndex } = this.active;
@@ -155,6 +164,7 @@ export default {
   &__label {
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
 
     font-family: $unnnic-font-family-secondary;
     font-size: $unnnic-font-size-body-gt;
@@ -188,6 +198,7 @@ export default {
     &__label {
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
 
       font-family: $unnnic-font-family-secondary;
       font-size: $unnnic-font-size-body-gt;

package/src/components/Sidebar/index.vue

@@ -16,6 +16,7 @@
             childIndex: active.childIndex,
           }"
           @navigate="handleNavigate($event)"
+          :autoNavigateFirstChild="autoNavigateFirstChild"
         />
       </li>
     </ul>
@@ -61,6 +62,10 @@ export default {
       type: Object,
       default: () => ({ itemIndex: null, childIndex: null }),
     },
+    autoNavigateFirstChild: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     handleNavigate({ item, child }) {
@@ -82,8 +87,7 @@ export default {
   position: fixed;
 
   width: v-bind('width');
-  height: 100vh;
-  padding: $unnnic-spacing-sm;
+  height: 100%;
 
   &--left {
     border-top-left-radius: $unnnic-border-radius-md;
@@ -98,6 +102,23 @@ export default {
     flex-direction: column;
     list-style: none;
     gap: $unnnic-spacing-xs;
+    overflow-y: auto;
+    height: 100%;
+
+    &::-webkit-scrollbar {
+        width: $unnnic-spacing-inline-nano;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: $unnnic-color-neutral-cleanest;
+        border-radius: $unnnic-border-radius-pill;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: $unnnic-color-neutral-soft;
+        border-radius: $unnnic-border-radius-pill;
+
+      }
   }
 }
 </style>

package/src/stories/Sidebar.stories.js

@@ -8,14 +8,19 @@ const items = [
   {
     label: 'Item 2 Grouped',
     icon: 'forum',
+    children: [{ label: 'Child 1' }],
+  },
+  {
+    label: 'Item 3 Grouped',
+    icon: 'forum',
     children: [{ label: 'Child 1' }, { label: 'Child 2' }],
   },
   {
-    label: 'Item 3',
+    label: 'Item 4',
     icon: 'tune',
   },
   {
-    label: 'Item 4 Grouped icons',
+    label: 'Item 5 Grouped icons',
     icon: 'tune',
     children: [
       { label: 'Child 1', icon: 'abc' },
@@ -33,6 +38,7 @@ export default {
     },
     items: { control: { type: 'object' } },
     width: { control: { type: 'text' } },
+    autoNavigateFirstChild: { control: { type: 'boolean' } },
   },
 };
 
@@ -73,4 +79,5 @@ Default.args = {
   width: '300px',
   position: 'left',
   active: { itemIndex: 1, childIndex: 0 },
+  autoNavigateFirstChild: true,
 };