@mptw/skylens-ui 1.4.39 → 1.4.41

package/components/SLSidebarNav.vue

@@ -25,6 +25,7 @@
         SLSidebarNavGroupItem(
           v-else-if='item.navType === "group"'
           :nav-collapsed='closured'
+          :nav-dark='dark'
           :item-config='item'
           @click:item='onClickedItem'
         )
@@ -114,7 +115,7 @@ export default defineComponent({
   @apply relative flex flex-col s('w-[188px]') h-full bg-white rounded-r-lg shadow transition-all
 
   &.dark
-    @apply bg-primary
+    @apply bg-primary-800
 
     &.closure
       .sidebar-logo
@@ -129,8 +130,10 @@ export default defineComponent({
             @apply s('lg:block')
 
       .sidebar-toggle
+        @apply bg-primary-900
+
         &:hover
-          @apply bg-primary-300 text-white
+          @apply bg-primary-600
 
     .sidebar-logo
       .logo
@@ -162,10 +165,10 @@ export default defineComponent({
             @apply border-2 border-primary-600 bg-primary-300
 
     .sidebar-toggle
-      @apply bg-primary-300 text-white
+      @apply bg-primary-900 text-white
 
       &:hover
-        @apply bg-primary-25 text-primary
+        @apply bg-primary-600
 
   &.closure
     @apply s('-ml-[188px]')
@@ -184,12 +187,10 @@ export default defineComponent({
           @apply s('lg:block')
 
     .sidebar-toggle
-      @apply bg-primary-600 text-white
-      margin-right -20px
-      border-radius 0px 12px 12px 0px
+      @apply s('-mr-5') bg-primary-300 rounded-l-none rounded-r-xl text-white
 
       &:hover
-        @apply bg-primary-300 text-white
+        @apply bg-primary-400 text-white
 
       .icon-chevron-left
         @apply hidden
@@ -248,11 +249,7 @@ export default defineComponent({
           @apply border-2 border-primary-100
 
   &-toggle
-    @apply absolute top-0 right-0 flex justify-center items-center bg-primary-50 text-sm text-primary-600 leading-none transition-all
-    width 20px
-    height 40px
-    margin-top 10px
-    border-radius 12px 0px 0px 12px
+    @apply absolute top-0 right-0 flex justify-center items-center w-5 h-10 s('mt-2.5') bg-primary-50 rounded-l-xl text-sm text-primary-500 leading-none transition-all
 
     &:hover
       @apply bg-primary-300 text-white

package/components/SLSidebarNavGroupItem.vue

@@ -3,6 +3,7 @@
   SLSidebarNavGroupItemSection(
     v-for='(groupSection, i) in itemConfig.sections'
     :nav-collapsed='navCollapsed'
+    :nav-dark='navDark'
     :item-config='groupSection'
     :key='`${groupSection.code}-${i}`'
   )
@@ -19,6 +20,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    navDark: {
+      type: Boolean,
+      default: false,
+    },
     itemConfig: {
       type: Object as PropType<NavItemGroup>,
       required: true,
@@ -32,6 +37,10 @@ export default defineComponent({
 </script>
 
 <style lang="stylus">
+.sidebar.dark
+  .sidebar-nav-group-item
+    @apply bg-primary-900
+
 .sidebar-nav-group-item
   @apply w-full mt-1 p-2 space-y-1 bg-primary-50 rounded-lg overflow-hidden
 </style>

package/components/SLSidebarNavGroupItemSection.vue

@@ -43,7 +43,7 @@
   ClientOnly
     Teleport(to='#nav')
       .sidebar-nav-group-item-section-popup(
-        :class='{ single: itemConfig.links.length === 0 }'
+        :class='{ single: itemConfig.links.length === 0, dark: navDark}'
         ref='popupEl'
         @mouseenter='onPopupMouseEnter'
         @mouseleave='onIconMouseLeave'
@@ -56,6 +56,8 @@
           .sidebar-nav-group-item-section-popup-link-title {{ itemConfig.title }}
           .sidebar-nav-group-item-section-popup-link-icon(v-if='itemConfig.status === "plus"')
             SLIcon(icon='add')
+          .sidebar-nav-group-item-section-popup-link-icon(v-else)
+            SLIcon(icon='sort-down')
         .sidebar-nav-group-item-section-popup-divide(v-if='itemConfig.links.length > 0')
         NuxtLink.sidebar-nav-group-item-section-popup-link(
           v-for='(link, i) in itemConfig.links'
@@ -81,6 +83,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    navDark: {
+      type: Boolean,
+      default: false,
+    },
     itemConfig: {
       type: Object as PropType<NavItemSection>,
       required: true,
@@ -362,6 +368,25 @@ export default defineComponent({
       &-right
         @apply s('lg:hidden')
 
+.sidebar.dark
+  .sidebar-nav-group-item-section
+    &-header
+      @apply bg-primary-900 text-white
+      @apply s('hover:bg-primary')
+
+      &.active, &.router-link-exact-active
+        @apply bg-primary-600
+        @apply s('hover:bg-primary-600')
+
+    &-body
+      &-wrapper
+        .sidebar-nav-group-item-section-link
+          @apply bg-primary-900 text-white
+          @apply s('hover:bg-primary-800') s('active:bg-primary-600')
+
+          &.router-link-exact-active
+            @apply bg-primary-600
+            @apply s('hover:bg-primary-600')
 
 .sidebar-nav-group-item-section
   @apply flex flex-col
@@ -411,7 +436,32 @@ export default defineComponent({
           @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
 
 .sidebar-nav-group-item-section-popup
-  @apply flex-col p-2 space-y-1 bg-white rounded-lg overflow-hidden shadow-md hidden
+  @apply flex-col s('min-w-[142px]') p-2 space-y-1 bg-white rounded-lg overflow-hidden shadow-md hidden
+
+  &.dark
+    @apply bg-primary-900
+
+    &.single
+      .sidebar-nav-group-item-section-popup-link
+        &:hover
+          .sidebar-nav-group-item-section-popup-link-icon
+            @apply text-primary-500
+
+        &.router-link-exact-active, &:active
+          .sidebar-nav-group-item-section-popup-link-icon
+            @apply text-primary
+
+        &-icon
+          @apply text-primary-500
+
+    .sidebar-nav-group-item-section-popup-link
+      @apply bg-primary-900 text-white
+      @apply s('hover:bg-primary') s('active:bg-primary-600')
+
+      &.router-link-exact-active
+        @apply bg-primary-600
+        @apply s('hover:bg-primary-600')
+
 
   &[data-show]
     @apply flex
@@ -419,6 +469,9 @@ export default defineComponent({
   &.single
     @apply p-0
 
+    .sidebar-nav-group-item-section-popup-link
+      @apply py-2 pr-1 pl-2
+
   &-link
     @apply flex items-center justify-between flex-nowrap py-1 px-2 space-x-4 bg-white rounded-lg text-sm text-primary
     @apply s('hover:bg-primary-200') s('hover:font-bold') s('active:bg-primary-600') s('active:text-white') s('active:font-bold')
@@ -428,7 +481,7 @@ export default defineComponent({
       @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
 
     &-icon
-      @apply inline-flex
+      @apply inline-flex origin-center rotate-180
 
   &-divide
     @apply h-px bg-primary-200

package/components/SLSidebarNavLinkItem.vue

@@ -2,7 +2,7 @@
 NuxtLink.sidebar-nav-link-item(
   :to='itemConfig.to ? itemConfig.to : "javascript:;"',
   :external='!itemConfig.to',
-  :class='{ "sidebar-nav-link-item--home": itemConfig.to === "/application" }'
+  :class='{ "sidebar-nav-link-item--home": itemConfig.to === "/application", "router-link-active": linkActive }'
   ref='linkComp'
   @click='onClickedItem'
 )
@@ -75,6 +75,8 @@ export default defineComponent({
   },
   emits: ['click:item'],
   setup(props, { emit }) {
+    const route = useRoute();
+
     const { navCollapsed, itemConfig } = toRefs(props);
 
     const linkComp = shallowRef<NuxtLinkType | null>(null);
@@ -83,6 +85,19 @@ export default defineComponent({
     let popperInstance: PopperInstance | null = null;
     let popupHideTimeoutId: any = null;
 
+    const linkActive = computed(() => {
+      let linkActive = false;
+
+      itemConfig.value.include?.forEach((i) => {
+        const regexp = new RegExp(i);
+        if (regexp.test(route.path)) {
+          linkActive = true;
+        }
+      });
+
+      return linkActive;
+    });
+
     function showPopup() {
       if (
         !linkComp.value ||
@@ -191,6 +206,7 @@ export default defineComponent({
     return {
       linkComp,
       popupEl,
+      linkActive,
       onIconMouseEnter,
       onIconMouseLeave,
       onPopupMouseEnter,
@@ -211,6 +227,23 @@ export default defineComponent({
     &-right
       @apply s('lg:hidden')
 
+.sidebar.dark
+  .sidebar-nav-link-item
+    @apply bg-primary-800 text-white
+    @apply s('hover:bg-primary') s('active:bg-primary-600')
+
+    &.router-link-exact-active, &.router-link-active
+      @apply bg-primary-600
+      @apply s('hover:bg-primary-600') s('active:bg-primary-600')
+
+    &.sidebar-nav-link-item--home.router-link-active
+      @apply bg-primary-800 text-white
+      @apply s('hover:bg-primary') s('active:bg-primary-600')
+
+    &.sidebar-nav-link-item--home.router-link-exact-active.router-link-active
+      @apply bg-primary-600
+      @apply s('hover:bg-primary-600') s('active:bg-primary-600')
+
 .sidebar-nav-link-item
   @apply flex items-center justify-start py-2 pr-3 pl-2 bg-white rounded-lg text-base text-primary
   @apply s('hover:bg-primary-200') s('hover:font-bold') s('active:bg-primary-600') s('active:text-white') s('active:font-bold')

package/components/SLSidebarNavSectionItem.vue

@@ -46,6 +46,11 @@ export default defineComponent({
   .sidebar-nav-section-item
     @apply s('lg:items-center')
 
+.sidebar.dark
+  .sidebar-nav-section-item
+    &-header
+      @apply text-secondary-200
+
 .sidebar-nav-section-item
   @apply flex flex-col space-y-1
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.39",
+  "version": "1.4.41",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",