feat: expand menu items

packages/kaspersky-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspersky/components",
-  "version": "6.40.2",
+  "version": "6.40.3",
   "description": "Kaspersky Design System UI Kit",
   "author": "AO Kaspersky Lab",
   "license": "Apache-2.0",

packages/kaspersky-components/src/sider/Sider.stories.tsx

@@ -641,7 +641,20 @@ const menuUserItems: Record<string, unknown>[] = [
     weight: 100,
     key: 'Settings',
     klId: 'navigation.settings',
-    isRoot: true
+    isRoot: true,
+    items: [{
+      key: 'Help',
+      onClick: () => true
+    },
+    {
+      klId: 'about-window',
+      key: 'About',
+      onClick: () => true
+    },
+    {
+      key: 'Logout',
+      onClick: () => true
+    }]
   },
   {
     iconClass: 'user',
@@ -701,7 +714,7 @@ export const SiderWithMenu: StoryObj<SiderProps> = {
           </ServicesMenu>
           <AppLogo/>
           <Menu menuItems={menuItems} minimized={menuMinimized} />
-          <UserMenu menuItems={menuUserItems} minimized={menuMinimized} />
+          <UserMenu menuItems={menuUserItems} minimized={menuMinimized} subsPop={true} />
         </Sider>
       </RootLayout>
     )

packages/kaspersky-components/src/sider/SiderMenu.tsx

@@ -5,7 +5,7 @@ import { MenuItem } from './SiderMenuItem'
 import { menuCss } from '@src/sider/menuCss'
 import { MenuItemProps, MenuProps, StateActions } from '@src/sider/types'
 
-const MenuComponent = ({ menuItems, className, minimized }: MenuProps) => {
+const MenuComponent = ({ menuItems, className, minimized, subsPop }: MenuProps) => {
   const [menuState, setMenuState] = useState(menuItems)
   const [active, setActive] = useState('')
 
@@ -20,20 +20,24 @@ const MenuComponent = ({ menuItems, className, minimized }: MenuProps) => {
   }: StateActions) => {
     const updateLevel = (menuItem: any) => {
       const { state: currentItem, expanded = false, items = undefined } = menuItem
+
       if (collapseAll) {
         menuItem.expanded = false
+        if (menuItem.items) menuItem.items.map(updateLevel)
         return menuItem
       }
-      if (currentItem === toggleExpandItem) {
+
+      if (toggleExpandItem && (currentItem === toggleExpandItem)) {
         menuItem.expanded = !expanded
         return menuItem
       }
 
-      if (currentItem === activateItem) {
-        menuItem.active = true
-        setActive(activateItem as string)
-      } else {
+      if (activateItem) {
         menuItem.active = false
+        if (currentItem === activateItem) {
+          menuItem.active = true
+          setActive(activateItem as string)
+        }
       }
 
       if (items) {
@@ -49,10 +53,10 @@ const MenuComponent = ({ menuItems, className, minimized }: MenuProps) => {
     collapseAll()
   }, [minimized])
 
-  return (<nav className={cn(className, 'uif-menu uif-menu-user', minimized && 'menu-minimized')}>
+  return (<nav className={cn(className, 'uif-menu uif-menu-user', minimized && 'menu-minimized', subsPop && 'menu-subs-pop')}>
     {
       menuItems.map((item: MenuItemProps) => {
-        return <MenuItem key={item.key} data={item} menuState={{ updateMenuState, setActive, active }} />
+        return <MenuItem key={item.key} data={item} menuState={{ updateMenuState, collapseAll, setActive, active, minimized }} />
       })
     }
   </nav>)

packages/kaspersky-components/src/sider/SiderMenuItem.tsx

@@ -14,6 +14,7 @@ const MenuItemComponent = ({
   const haveSubs = Boolean(data.items && data.items.length)
 
   const toggleItem = (item: string) => {
+    menuState.minimized && menuState.collapseAll()
     menuState.updateMenuState({ toggleExpandItem: item })
   }
 
@@ -22,6 +23,7 @@ const MenuItemComponent = ({
     menuState.setActive(data.state)
     alert('Active item: ' + data.state)
     data.onClick && data.onClick()
+    menuState.minimized && menuState.collapseAll()
   }
 
   const entryClick = () => {

packages/kaspersky-components/src/sider/menuCss.ts

@@ -62,6 +62,12 @@ export const menuItemCss = css`
 
   &.expanded,
   .expanded {
+  &:has(.active) {
+      > .uif-menu-item-entry {
+        color: ${colors.mainInteract.primary};
+      }
+    }
+
     > .uif-menu-item-entry .uif-menu-item-entry-arrow {
       transform: rotate(90deg);
     }
@@ -86,14 +92,24 @@ export const menuItemCss = css`
     }
   }
 
-  .menu-collapsed & {
+  .menu-minimized &,
+  .menu-subs-pop & {
     .uif-menu-item-entry-arrow,
     .uif-menu-item-entry-title {
       display: none;
     }
+
+    .uif-menu-item-subs {
+      display: none;
+    }
+
+    .uif-menu-item-subs-wrapper {
+      overflow: visible;
+    }
 
     &.expanded,
-    .expanded {
+    .expanded,
+    &:has(.expanded) {
       & > .uif-menu-item-subs {
         opacity: 1;
         display: block;
@@ -104,22 +120,44 @@ export const menuItemCss = css`
       }
     }
 
+    &:has(.active) {
+      > .uif-menu-item-entry {
+        color: ${colors.mainInteract.primary};
+      }
+    }
+
     .uif-menu-item-subs {
       position: absolute;
-      left: 45px;
+      left: 100%;
       margin-top: -32px;
 
       .uif-menu-item-subs-wrapper {
         background-color: ${colors.bg.base};
         border-radius: ${SPACES[4]}px;
-        translate: 20px 0;
+        translate: 1px 0;
       }
 
       .uif-menu-item-entry-title {
         margin: 0;
       }
     }
   }
+
+  .menu-subs-pop & {
+    .uif-menu-item-entry-title {
+      display: block;
+    }
+
+    .uif-menu-item.expanded {
+      position: relative;
+    }
+
+    .uif-menu-item-subs {
+      margin-top: 0;
+      bottom: 0;
+      translate: 16px 0;
+    }
+  }
 `
 
 export const menuCss = css`
@@ -130,7 +168,8 @@ export const menuCss = css`
   flex-direction: column;
   gap: ${SPACES[2]}px;
 
-  &.menu-collapsed {
+  &.menu-minimized,
+  &.menu-subs-pop {
     overflow: visible;
   }
 `

packages/kaspersky-components/src/sider/types.ts

@@ -34,7 +34,8 @@ export type MenuItemProps = {
 export type MenuProps = {
   menuItems: any,
   className?: string,
-  minimized?: boolean
+  minimized?: boolean,
+  subsPop?: boolean
 }
 
 export type StateActions = {