Side Navigation: support a leading icon for the secondary dropdown in the navbar

stencil-workspace/src/components.d.ts

@@ -20,7 +20,7 @@ import { ModusNavbarButton, ModusNavbarDropdownItem, ModusNavbarDropdownOptions,
 import { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 import { RadioButton } from "./components/modus-radio-group/modus-radio-button";
 import { ModusSentimentScaleType } from "./components/modus-sentiment-scale/modus-sentiment-scale.models";
-import { ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
+import { ModusHeaderNavigationItemInfo, ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
 import { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnSort, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableErrors, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowActionConfig, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
 import { Cell, Column, Row } from "@tanstack/table-core";
 import { TableCellEdited, TableContext } from "./components/modus-table/models/table-context.models";
@@ -44,7 +44,7 @@ export { ModusNavbarButton, ModusNavbarDropdownItem, ModusNavbarDropdownOptions,
 export { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 export { RadioButton } from "./components/modus-radio-group/modus-radio-button";
 export { ModusSentimentScaleType } from "./components/modus-sentiment-scale/modus-sentiment-scale.models";
-export { ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
+export { ModusHeaderNavigationItemInfo, ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
 export { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnSort, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableErrors, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowActionConfig, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
 export { Cell, Column, Row } from "@tanstack/table-core";
 export { TableCellEdited, TableContext } from "./components/modus-table/models/table-context.models";
@@ -1180,6 +1180,10 @@ export namespace Components {
         "disabled": boolean;
         "expanded": boolean;
         "focusItem": () => Promise<void>;
+        /**
+          * (optional to enable header dropdown feature)
+         */
+        "isHeader": ModusHeaderNavigationItemInfo;
         /**
           * (optional) Label for the item and the tooltip message.
          */
@@ -2591,9 +2595,11 @@ declare global {
     };
     interface HTMLModusSideNavigationItemElementEventMap {
         "sideNavItemClicked": { id: string; selected: boolean };
+        "sideNavItemHeaderClicked": { id: string; selected: boolean };
         "sideNavItemFocus": { id: string };
         "_sideNavItemAdded": HTMLElement;
         "_sideNavItemRemoved": HTMLElement;
+        "sideNavListItemClicked": { id: string };
     }
     interface HTMLModusSideNavigationItemElement extends Components.ModusSideNavigationItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLModusSideNavigationItemElementEventMap>(type: K, listener: (this: HTMLModusSideNavigationItemElement, ev: ModusSideNavigationItemCustomEvent<HTMLModusSideNavigationItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4268,6 +4274,10 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         "expanded"?: boolean;
+        /**
+          * (optional to enable header dropdown feature)
+         */
+        "isHeader"?: ModusHeaderNavigationItemInfo;
         /**
           * (optional) Label for the item and the tooltip message.
          */
@@ -4277,13 +4287,15 @@ declare namespace LocalJSX {
          */
         "menuIcon"?: string;
         /**
-          * An event that fires when mouse click or `Enter` key press on an item.
+          * An event that fires when a mouse click or `Enter` key press on an item.
          */
         "onSideNavItemClicked"?: (event: ModusSideNavigationItemCustomEvent<{ id: string; selected: boolean }>) => void;
         /**
           * An event that fires when an item is in focus.
          */
         "onSideNavItemFocus"?: (event: ModusSideNavigationItemCustomEvent<{ id: string }>) => void;
+        "onSideNavItemHeaderClicked"?: (event: ModusSideNavigationItemCustomEvent<{ id: string; selected: boolean }>) => void;
+        "onSideNavListItemClicked"?: (event: ModusSideNavigationItemCustomEvent<{ id: string }>) => void;
         "on_sideNavItemAdded"?: (event: ModusSideNavigationItemCustomEvent<HTMLElement>) => void;
         "on_sideNavItemRemoved"?: (event: ModusSideNavigationItemCustomEvent<HTMLElement>) => void;
         /**

stencil-workspace/src/components/modus-list-item/modus-list-item.spec.ts

@@ -10,12 +10,12 @@ describe('modus-list-item', () => {
     expect(root).toEqualHtml(`
       <modus-list-item>
         <mock:shadow-root>
-          <li class='standard' tabindex="0">
+          <li class='standard' part="list-item-li" tabindex="0">
            <div class="text-container">
             <span class='slot'>
               <slot></slot>
             </span>
-           </div>  
+           </div>
           </li>
         </mock:shadow-root>
       </modus-list-item>
@@ -30,12 +30,12 @@ describe('modus-list-item', () => {
     expect(root).toEqualHtml(`
       <modus-list-item>
         <mock:shadow-root>
-          <li class='standard' tabindex="0">
+          <li class='standard'part="list-item-li" tabindex="0">
            <div class="text-container">
             <span class='slot'>
               <slot></slot>
             </span>
-           </div>  
+           </div>
           </li>
         </mock:shadow-root>
         List Item

stencil-workspace/src/components/modus-list-item/modus-list-item.tsx

@@ -64,6 +64,7 @@ export class ModusListItem {
     return (
       <li
         ref={(el) => (this.listItemRef = el)}
+        part="list-item-li"
         class={containerClass}
         tabIndex={this.disabled ? -1 : 0}
         onClick={() => (!this.disabled ? this.itemClick.emit() : null)}

stencil-workspace/src/components/modus-list-item/readme.md

@@ -39,13 +39,21 @@ Type: `Promise<void>`
 
 
 
+## Shadow Parts
+
+| Part             | Description |
+| ---------------- | ----------- |
+| `"list-item-li"` |             |
+
+
 ## Dependencies
 
 ### Used by
 
  - [modus-action-bar](../modus-action-bar)
  - [modus-navbar](../modus-navbar)
  - [modus-navbar-profile-menu](../modus-navbar/profile-menu)
+ - [modus-side-navigation-item](../modus-side-navigation/modus-side-navigation-item)
  - [modus-table-row-actions-menu](../modus-table/parts/row/actions/modus-table-row-actions-menu)
 
 ### Graph
@@ -54,6 +62,7 @@ graph TD;
   modus-action-bar --> modus-list-item
   modus-navbar --> modus-list-item
   modus-navbar-profile-menu --> modus-list-item
+  modus-side-navigation-item --> modus-list-item
   modus-table-row-actions-menu --> modus-list-item
   style modus-list-item fill:#f9f,stroke:#333,stroke-width:4px
 ```

stencil-workspace/src/components/modus-list/readme.md

@@ -19,6 +19,7 @@
  - [modus-action-bar](../modus-action-bar)
  - [modus-navbar](../modus-navbar)
  - [modus-navbar-profile-menu](../modus-navbar/profile-menu)
+ - [modus-side-navigation-item](../modus-side-navigation/modus-side-navigation-item)
  - [modus-table-row-actions-menu](../modus-table/parts/row/actions/modus-table-row-actions-menu)
 
 ### Graph
@@ -27,6 +28,7 @@ graph TD;
   modus-action-bar --> modus-list
   modus-navbar --> modus-list
   modus-navbar-profile-menu --> modus-list
+  modus-side-navigation-item --> modus-list
   modus-table-row-actions-menu --> modus-list
   style modus-list fill:#f9f,stroke:#333,stroke-width:4px
 ```

stencil-workspace/src/components/modus-side-navigation/modus-side-navigation-item/modus-side-navigation-item.scss

@@ -19,7 +19,7 @@
     height,
     width,
     opacity 0.2s ease-out 0s;
-  z-index: 1030;
+  z-index: 0;
 
   svg path {
     fill: $modus-side-navigation-item-icon-color;
@@ -34,7 +34,7 @@
     display: flex;
     justify-content: center;
     padding-left: 1.25rem;
-    z-index: 1030;
+    z-index: 0;
 
     modus-tooltip {
       height: 1.5rem;
@@ -80,6 +80,18 @@
     .level-icon {
       padding: 0 1rem;
     }
+
+    .icon-expanded {
+      transform: rotate(90deg);
+    }
+
+    .icon-collapsed {
+      transform: rotate(0deg);
+    }
+
+    .icon-dropdownvisible {
+      transform: rotate(270deg);
+    }
   }
 
   &.selected {
@@ -100,3 +112,81 @@
     opacity: $modus-side-navigation-item-disabled-opacity;
   }
 }
+
+$modus-dropdown-list-border-color: var(--modus-dropdown-list-border-color, #6a6e79) !default;
+
+.dropdown.disabled {
+  pointer-events: none;
+}
+
+.dropdown:hover {
+  cursor: pointer;
+}
+
+.dropdown-list {
+  border-collapse: collapse;
+  border-radius: $rem-4px;
+  display: none;
+  max-height: 200px;
+  opacity: 1;
+  overflow-x: auto;
+  overflow-y: auto;
+  position: absolute;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 1050;
+
+  &.animate-list {
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &.visible {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &.list-border {
+    border: 1px solid $modus-dropdown-list-border-color;
+  }
+
+  &.top {
+    bottom: 0;
+  }
+
+  &.right {
+    top: 0;
+  }
+
+  &.left {
+    right: 0;
+    top: 0;
+  }
+
+  .list-item::part(list-item-li) {
+    background-color: $modus-side-navigation-item-bg;
+    border-radius: unset;
+    color: $modus-side-navigation-item-color;
+  }
+
+  .list-item::part(list-item-li):hover {
+    background-color: $modus-side-navigation-item-hover-bg;
+  }
+}
+
+.dropdown-item {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-family: $primary-font;
+  font-size: $rem-14px;
+  gap: 1rem;
+  padding: 0.4rem;
+
+  .menu-item-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}