@stack-spot/portal-layout 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.11.0](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.10.0...portal-layout@v2.11.0) (2024-10-11)
+
+
+### Features
+
+* Feat 1943 accordion menu section ([#419](https://github.com/stack-spot/portal-commons/issues/419)) ([1a940af](https://github.com/stack-spot/portal-commons/commit/1a940af2e4c102f2c37434cbfc8bb89788b9a2f6))
+
 ## [2.10.0](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.9.2...portal-layout@v2.10.0) (2024-10-10)
 
 

package/dist/components/menu/MenuSectionGroup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const MenuSectionGroup: React.FC<React.HTMLAttributes<HTMLUListElement>>;
+//# sourceMappingURL=MenuSectionGroup.d.ts.map

package/dist/components/menu/MenuSectionGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSectionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSectionGroup.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAoH7E,CAAA"}

package/dist/components/menu/MenuSectionGroup.js

@@ -0,0 +1,121 @@
+import { theme } from '@stack-spot/portal-theme';
+import styled from 'styled-components';
+import { MENU_CONTENT_PADDING as PADDING } from './constants.js';
+export const MenuSectionGroup = styled.ul `
+  padding: 0 0 0 16px;
+  display: flex;
+  flex-direction: column;
+  visibility: hidden;
+  transition: visibility 0s 0.3s;
+
+  &.no-indentation {
+    padding: 0;
+  }
+
+  .item-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    &.root {
+      padding: 0 16px;
+      margin-top: 16px;
+      border-radius: 0;
+    }
+
+    .label {
+      flex: 1;
+      &.hidden, &.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      &.ellipsis {
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  li a {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s, background-color 0.2s;
+
+    &:hover {
+      background-color: ${theme.color.light['500']};
+    }
+    
+    &.action {
+      &:before {
+        content: '';
+        position: absolute;
+        left: 2px;
+        width: 2px;
+        height: 0;
+        background: inherit;
+        transition: height 0.2s;
+      }
+
+      &.active {
+  
+        &:hover {
+          background-color: transparent;
+        }
+  
+        &:before {
+          background: ${theme.color.primary['500']};
+          height: 24px;
+        }
+      }
+
+      &:not(.active):hover:before {
+        background: ${theme.color.light.contrastText};
+        height: 24px;
+      }
+    }
+
+    .chevron {
+      transition: transform 0.5s;
+      &:not(.open) {
+        transform: rotate(180deg);
+      }
+    }
+
+    .item-row-title {
+      opacity: 0.7;
+    }
+  }
+
+  &.open {
+    visibility: visible;
+    transition: unset;
+    & > li > a  {
+      height: 56px;
+    }
+  }
+
+  &:not(.open) &.open > li > a {
+    height: 0;
+  }
+
+  &.root {
+    /* margin-bottom: ${PADDING}px; */
+
+    & > li {
+      .group-title {
+        margin-left: ${PADDING}px;
+        margin-bottom: 5px;
+        margin-top: 40px;
+        display: block;
+      }
+
+      &:first-child {
+        .group-title {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+`;
+//# sourceMappingURL=MenuSectionGroup.js.map

package/dist/components/menu/MenuSectionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSectionGroup.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSectionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,oBAAoB,IAAI,OAAO,EAAE,MAAM,aAAa,CAAA;AAE7D,MAAM,CAAC,MAAM,gBAAgB,GAAqD,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0CjE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;wBAqB1B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;sBAM5B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA8B5B,OAAO;;;;uBAIR,OAAO;;;;;;;;;;;;;CAa7B,CAAA"}

package/dist/components/menu/MenuSections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;AAwChD;;GAEG;AACH,wBAAgB,sBAAsB,SAOrC;AA8ID;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,2BAAiC,SAAS,4CAsGlE,CAAA"}
+{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;AAwChD;;GAEG;AACH,wBAAgB,sBAAsB,SAOrC;AA2ID;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,2BAAiC,SAAS,4CAyHlE,CAAA"}

package/dist/components/menu/MenuSections.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Flex, IconBox, Text } from '@citric/core';
-import { ChevronRight, Cog, Collapse, Expand, MobileComments } from '@citric/icons';
+import { Divider, Flex, IconBox, Text } from '@citric/core';
+import { ChevronRight, Cog, Collapse, Expand, MobileComments, ChevronUpFill } from '@citric/icons';
 import { useKeyboardControls } from '@stack-spot/portal-components';
 import { useAnchorTag } from '@stack-spot/portal-components/anchor';
+import { listToClass } from '@stack-spot/portal-theme';
 import { interpolate, useTranslate } from '@stack-spot/portal-translate';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { elementIds, getLayoutElements } from '../../elements.js';
 import { StarFillWithGradient } from '../../svg/StarFillWithGradient.js';
 import { isLessThan30Days } from '../Rate/hook.js';
 import { MenuContent } from './MenuContent.js';
+import { MenuSectionGroup } from './MenuSectionGroup.js';
 /**
  * Amount of time to wait before hiding the menu overlay once the mouse leaves its area.
  */
@@ -90,7 +92,7 @@ function isMenuContentVisible() {
  * @param props React props for the component {@link MenuSection} & { id, setCurrentOverlay }. Id identifies the current section and
  * setCurrentOverlay controls the overlay (preview) content.
  */
-const Section = ({ icon, label, href, target, onClick, active, content, customContent, setCurrentOverlay, id, hasContent, className, }) => {
+const Section = ({ icon, label, href, target, onClick, active, content, customContent, setCurrentOverlay, hasContent, id, }) => {
     const Link = useAnchorTag();
     const contentToRender = typeof content === 'function' ? content() : content;
     const t = useTranslate(dictionary);
@@ -119,12 +121,12 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
         hideOverlayImmediately();
     }
     const labelText = typeof label === 'string' ? label : label.id;
-    return (_jsxs("li", { role: "menuitem", title: labelText, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, children: [_jsx(Link, { href: href, target: target, onClick: click, onMouseEnter: prepareShowOverlay, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), title: labelText, "aria-label": labelText, onKeyDown: onClick ? e => e.key === 'Enter' && onClick() : undefined, ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", px: 5, children: [_jsx(IconBox, { children: icon }), typeof label === 'string' ? _jsx(Text, { appearance: "microtext1", className: "section-label", ml: 3, children: label }) : label.element] }) }), shouldShowOverlay() &&
+    return (_jsxs(_Fragment, { children: [_jsx(Link, { href: href, target: target, onClick: click, onMouseEnter: prepareShowOverlay, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), title: labelText, "aria-label": labelText, onKeyDown: onClick ? e => e.key === 'Enter' && onClick() : undefined, ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", px: 5, children: [_jsx(IconBox, { children: icon }), typeof label === 'string' ? _jsx(Text, { appearance: "microtext1", className: "section-label", ml: 3, children: label }) : label.element] }) }), shouldShowOverlay() &&
                 _jsx(IconBox, { size: "sm", className: "section-submenu-icon", as: "button", "aria-label": interpolate(t.menuOptions, label), "aria-controls": MENU_OVERLAY_ID, "aria-expanded": false, onKeyDown: (event) => {
                         if (event.key === 'Enter') {
                             prepareShowOverlay(event);
                         }
-                    }, children: _jsx(ChevronRight, {}) })] }, labelText));
+                    }, children: _jsx(ChevronRight, {}) })] }));
 };
 /**
  * Renders the overlay content.
@@ -158,15 +160,18 @@ export const MenuSections = ({ sections = [], ...props }) => {
     const t = useTranslate(dictionary);
     // this is a mock state only used to force an update on the component.
     const [_, setUpdate] = useState(0);
+    const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
     const toggleMenu = useCallback((hasContent) => {
         const layout = document.getElementById('layout');
         if (!layout)
             return;
         if (layout.classList.contains('menu-compact')) {
             layout.classList.remove('menu-compact');
+            setIsMenuCollapsed(false);
         }
         else {
             layout.classList.add('menu-compact');
+            setIsMenuCollapsed(true);
         }
         if (hasContent) {
             if (layout.classList.contains('menu-content-visible')) {
@@ -180,12 +185,16 @@ export const MenuSections = ({ sections = [], ...props }) => {
     }, []);
     // the current overlay showing, when the user hovers the section icon. This is the index of the item in the sections array.
     const [currentOverlay, setCurrentOverlay] = useState();
+    const sectionItemsOverlay = useMemo(() => sections.flatMap((s) => 'children' in s ? s.children?.map((c) => c) : s), [sections]);
     const sectionItems = useMemo(() => sections.reduce((result, s, i) => s.hidden
         ? result
         : [
             ...result,
-            _jsx(Section, { id: i, ...s, setCurrentOverlay: setCurrentOverlay, hasContent: !!props.content || !!props.customContent }, i),
-        ], []), [sections]);
+            _jsx("li", { role: "menuitem", title: s.label, className: `section-submenu no-indentation ${s.className || ''} ${s.active ? 'active' : undefined}`, children: 'children' in s ?
+                    _jsx(CollapsibleSection, { listItems: sectionItemsOverlay, isMenuCollapsed: isMenuCollapsed, ...s, setCurrentOverlay: setCurrentOverlay })
+                    :
+                        _jsx(Section, { id: sectionItemsOverlay.findIndex((sio) => sio?.label === s.label), ...s, setCurrentOverlay: setCurrentOverlay, hasContent: !!props.content || !!props.customContent }, i) }, s.label),
+        ], []), [sections, isMenuCollapsed]);
     function onPressEscape() {
         getAccessibilityButtonOfSectionWithActiveOverlay()?.focus();
         hideOverlayImmediately();
@@ -206,13 +215,13 @@ export const MenuSections = ({ sections = [], ...props }) => {
     function renderMenuOverlay() {
         if (currentOverlay === undefined)
             return null;
-        const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
+        const shouldRenderMenuContentInstead = !isMenuContentVisible() && sectionItemsOverlay[currentOverlay]?.active &&
             (!!props.content || !!props.customContent);
         return shouldRenderMenuContentInstead
             ? _jsx(OverlayRenderer, { content: props.content, customContent: props.customContent }, 'contentKey' in props ? props.contentKey : undefined)
-            : _jsx(OverlayRenderer, { content: sections[currentOverlay].content, customContent: sections[currentOverlay].customContent }, currentOverlay);
+            : _jsx(OverlayRenderer, { content: sectionItemsOverlay[currentOverlay]?.content, customContent: sectionItemsOverlay[currentOverlay]?.customContent }, currentOverlay);
     }
-    return (_jsxs(_Fragment, { children: [_jsx("ul", { role: "menu", children: sectionItems }), _jsxs(Flex, { mb: 7, alignItems: "center", children: [_jsx(RateAndContactUsItem, { ...props }), _jsxs("button", { role: "menuitem", className: "toggle sections-footer", onClick: () => toggleMenu(!!props.content || !!props.customContent), title: t.toggle, children: [_jsxs(IconBox, { children: [_jsx(Expand, { className: "expand" }), _jsx(Collapse, { className: "collapse" })] }), _jsx(Text, { appearance: "microtext1", ml: 8, className: "collapse", colorScheme: "light.contrastText", children: t.hide })] }), (props.settings?.show) &&
+    return (_jsxs(_Fragment, { children: [_jsx(MenuSectionGroup, { className: "open root no-indentation", children: sectionItems }), _jsxs(Flex, { mb: 7, alignItems: "center", children: [_jsx(RateAndContactUsItem, { ...props }), _jsxs("button", { role: "menuitem", className: "toggle sections-footer", onClick: () => toggleMenu(!!props.content || !!props.customContent), title: t.toggle, children: [_jsxs(IconBox, { children: [_jsx(Expand, { className: "expand" }), _jsx(Collapse, { className: "collapse" })] }), _jsx(Text, { appearance: "microtext1", ml: 8, className: "collapse", colorScheme: "light.contrastText", children: t.hide })] }), (props.settings?.show) &&
                         _jsxs(Link, { href: props.settings?.href, onClick: props.settings?.onClick, className: "sections-footer toggle", ...(props.settings.active ? { 'aria-current': 'page' } : undefined), children: [_jsx(IconBox, { "aria-label": t.settingsIcon, children: _jsx(Cog, {}) }), _jsx(Text, { appearance: "microtext1", ml: 8, className: "collapse", children: t.settings })] })] }), _jsx("div", { id: MENU_OVERLAY_ID, onMouseEnter: showOverlay, onMouseLeave: hideOverlay, ref: overlayRef, children: renderMenuOverlay() })] }));
 };
 const RateAndContactUsItem = ({ ...props }) => {
@@ -232,6 +241,18 @@ const RateAndContactUsItem = ({ ...props }) => {
                 _jsxs("button", { role: "menuitem", className: "toggle sections-footer", onClick: props.rateUs?.onClick, ...(props.rateUs.active ? { 'aria-current': 'page' } : undefined), children: [_jsx(IconBox, { "aria-label": t.rateUsIcon, sx: { paddingTop: '2px' }, children: _jsx(StarFillWithGradient, { id: "svg-icon", className: "gradient-svg rotate-icon" }) }), _jsx(Text, { appearance: "microtext1", ml: 8, sx: { marginTop: '3px' }, className: "collapse gradient grow-shrink", colorScheme: "light.contrastText", children: t.rateUs })] }), (props.contactUs?.show) &&
                 _jsxs(Link, { href: props.contactUs?.href, className: "toggle sections-footer", onClick: props.contactUs?.onClick, ...(props.contactUs.active ? { 'aria-current': 'page' } : undefined), target: props.contactUs?.target, children: [_jsx(IconBox, { "aria-label": t.contactIcon, children: _jsx(MobileComments, {}) }), _jsx(Text, { appearance: "microtext1", ml: 8, sx: { marginTop: '3px' }, className: "collapse", colorScheme: "light.contrastText", children: t.contactUs })] })] });
 };
+/**
+ * A menu item that is actually a subgroup and can be collapsed/expanded.
+ * @param props the props for the component {@link MenuSectionGroup} & { root: boolean }.
+ 
+ */
+const CollapsibleSection = ({ label, open: initialValue, children, icon, setCurrentOverlay, listItems, isMenuCollapsed = true }) => {
+    const [open, setOpen] = useState(initialValue || false);
+    const menuGroupId = `menuGroup${label}`;
+    const items = useMemo(() => children?.filter(i => !i.hidden).map((c) => (_jsx("li", { role: "menuitem", title: c.label, className: `section-submenu ${c.className} ${c.active ? 'active' : ''}`, children: _jsx(Section, { id: listItems?.findIndex((item) => item?.label === c.label), ...c, hasContent: false, setCurrentOverlay: setCurrentOverlay }, c.label) }, c.label))), [children]);
+    return (_jsxs(_Fragment, { children: [isMenuCollapsed ? _jsx(Divider, {}) :
+                _jsx("a", { onClick: () => setOpen(!open), onKeyDown: e => e.key === 'Enter' && setOpen(!open), className: listToClass(['item-row']), tabIndex: 0, "aria-controls": menuGroupId, "aria-expanded": open, children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", px: 6, children: [icon, _jsx(Text, { appearance: "microtext1", className: "section-label", ml: 3, colorScheme: "light.contrastText", children: label }), _jsx(IconBox, { sx: { ml: '14' }, children: _jsx(ChevronUpFill, { className: listToClass(['chevron', open ? 'open' : '']) }) })] }) }), _jsx(MenuSectionGroup, { id: menuGroupId, className: `${isMenuCollapsed || open ? 'open' : ''} root no-indentation`, "aria-hidden": !open, children: items })] }));
+};
 const dictionary = {
     en: {
         toggle: 'Show or hide the menu',

package/dist/components/menu/MenuSections.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"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"}

package/dist/components/menu/types.d.ts

@@ -134,6 +134,14 @@ export interface MenuSection extends Action {
      */
     className?: string;
     hidden?: boolean;
+    /**
+     * The items in this group. This property will create a accordion to include the items
+     */
+    children?: MenuSection[];
+    /**
+     * initial value to accordion when using children prop
+     */
+    open?: boolean;
 }
 interface BaseMenuProps {
     /**

package/dist/components/menu/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"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"}

package/dist/layout.css

@@ -180,13 +180,11 @@ body {
   background: transparent;
   border: none;
   width: var(--menu-sections-width);
-  height: var(--menu-item-height);
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: flex-start;
   justify-content: center;
-  transition: background-color 0.2s;
   cursor: pointer;
   position: relative;
   z-index: 2;
@@ -265,9 +263,8 @@ body {
 }
 
 #menuSections .toggle:hover,
-#menuSections > ul li a:hover,
-#menuSections .toggle:focus,
-#menuSections > ul li a:focus {
+#menuSections > ul li a:hover
+{
   background: var(--light-500);
   border-right: 1px solid var(--light-300);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
   },
   "peerDependencies": {
     "@citric/core": "^6.0.0",
-    "@citric/icons": "^5.7.1",
+    "@citric/icons": "^5.9.0",
     "@citric/ui": "^6.1.1",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.0.0",

package/src/components/menu/MenuSectionGroup.tsx

@@ -0,0 +1,121 @@
+import { theme } from '@stack-spot/portal-theme'
+import styled from 'styled-components'
+import { MENU_CONTENT_PADDING as PADDING } from './constants'
+
+export const MenuSectionGroup: React.FC<React.HTMLAttributes<HTMLUListElement>> = styled.ul`
+  padding: 0 0 0 16px;
+  display: flex;
+  flex-direction: column;
+  visibility: hidden;
+  transition: visibility 0s 0.3s;
+
+  &.no-indentation {
+    padding: 0;
+  }
+
+  .item-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    &.root {
+      padding: 0 16px;
+      margin-top: 16px;
+      border-radius: 0;
+    }
+
+    .label {
+      flex: 1;
+      &.hidden, &.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      &.ellipsis {
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  li a {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s, background-color 0.2s;
+
+    &:hover {
+      background-color: ${theme.color.light['500']};
+    }
+    
+    &.action {
+      &:before {
+        content: '';
+        position: absolute;
+        left: 2px;
+        width: 2px;
+        height: 0;
+        background: inherit;
+        transition: height 0.2s;
+      }
+
+      &.active {
+  
+        &:hover {
+          background-color: transparent;
+        }
+  
+        &:before {
+          background: ${theme.color.primary['500']};
+          height: 24px;
+        }
+      }
+
+      &:not(.active):hover:before {
+        background: ${theme.color.light.contrastText};
+        height: 24px;
+      }
+    }
+
+    .chevron {
+      transition: transform 0.5s;
+      &:not(.open) {
+        transform: rotate(180deg);
+      }
+    }
+
+    .item-row-title {
+      opacity: 0.7;
+    }
+  }
+
+  &.open {
+    visibility: visible;
+    transition: unset;
+    & > li > a  {
+      height: 56px;
+    }
+  }
+
+  &:not(.open) &.open > li > a {
+    height: 0;
+  }
+
+  &.root {
+    /* margin-bottom: ${PADDING}px; */
+
+    & > li {
+      .group-title {
+        margin-left: ${PADDING}px;
+        margin-bottom: 5px;
+        margin-top: 40px;
+        display: block;
+      }
+
+      &:first-child {
+        .group-title {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+`

package/src/components/menu/MenuSections.tsx

@@ -1,13 +1,15 @@
-import { Flex, IconBox, Text } from '@citric/core'
-import { ChevronRight, Cog, Collapse, Expand, MobileComments } from '@citric/icons'
+import { Divider, Flex, IconBox, Text } from '@citric/core'
+import { ChevronRight, Cog, Collapse, Expand, MobileComments, ChevronUpFill } from '@citric/icons'
 import { useKeyboardControls } from '@stack-spot/portal-components'
 import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { elementIds, getLayoutElements } from '../../elements'
 import { StarFillWithGradient } from '../../svg/StarFillWithGradient'
 import { isLessThan30Days } from '../Rate/hook'
 import { MenuContent } from './MenuContent'
+import { MenuSectionGroup } from './MenuSectionGroup'
 import { MenuProps, MenuSection } from './types'
 
 /**
@@ -108,11 +110,12 @@ const Section = ({
   content,
   customContent,
   setCurrentOverlay,
-  id,
   hasContent,
-  className,
+  id,
 }: MenuSection & {
-  id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean,
+  id: number, 
+  setCurrentOverlay: (id: number | undefined) => void, 
+  hasContent: boolean,
 }) => {
   const Link = useAnchorTag()
   const contentToRender = typeof content === 'function' ? content() : content
@@ -145,11 +148,7 @@ const Section = ({
   const labelText = typeof label === 'string' ? label : label.id
 
   return (
-    <li
-      role="menuitem"
-      key={labelText}
-      title={labelText}
-      className={`section-submenu ${className || ''} ${active ? 'active' : ''}`}>
+    <>
       <Link
         href={href}
         target={target}
@@ -181,7 +180,7 @@ const Section = ({
           <ChevronRight />
         </IconBox>
       }
-    </li>
+    </>
   )
 }
 
@@ -219,14 +218,17 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   const t = useTranslate(dictionary)
   // this is a mock state only used to force an update on the component.
   const [_, setUpdate] = useState(0)
+  const [isMenuCollapsed, setIsMenuCollapsed] = useState(false)
 
   const toggleMenu = useCallback((hasContent: boolean) => {
     const layout = document.getElementById('layout')
     if (!layout) return
     if (layout.classList.contains('menu-compact')) {
       layout.classList.remove('menu-compact')
+      setIsMenuCollapsed(false)
     } else {
       layout.classList.add('menu-compact')
+      setIsMenuCollapsed(true)
     }
 
     if (hasContent) {
@@ -241,17 +243,33 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   // the current overlay showing, when the user hovers the section icon. This is the index of the item in the sections array.
   const [currentOverlay, setCurrentOverlay] = useState<number | undefined>()
 
+  const sectionItemsOverlay = useMemo(
+    () => sections.flatMap((s) => 'children' in s ? s.children?.map((c) => c) : s),
+    [sections],
+  )
+
   const sectionItems = useMemo(
     () => sections.reduce<JSX.Element[]>(
       (result, s, i) => s.hidden
         ? result
         : [
           ...result,
-          <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay} hasContent={!!props.content || !!props.customContent} />,
+          <li
+            role="menuitem"
+            key={s.label as string}
+            title={s.label as string}
+            className={`section-submenu no-indentation ${s.className || ''} ${s.active ? 'active' : undefined}`}>
+            {'children' in s ? 
+              <CollapsibleSection listItems={sectionItemsOverlay} isMenuCollapsed={isMenuCollapsed} 
+                {...s} setCurrentOverlay={setCurrentOverlay} />
+              : 
+              <Section key={i} id={sectionItemsOverlay.findIndex((sio) => sio?.label === s.label)} 
+                {...s} setCurrentOverlay={setCurrentOverlay} hasContent={!!props.content || !!props.customContent} />}
+          </li>,
         ],
       [],
     ),
-    [sections],
+    [sections, isMenuCollapsed],
   )
 
   function onPressEscape() {
@@ -276,18 +294,18 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   hook, this would cause some serious problems. */
   function renderMenuOverlay() {
     if (currentOverlay === undefined) return null
-    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
+    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sectionItemsOverlay[currentOverlay]?.active &&
       (!!props.content || !!props.customContent)
     return shouldRenderMenuContentInstead
       ? <OverlayRenderer key={'contentKey' in props ? props.contentKey : undefined} content={props.content}
         customContent={props.customContent} />
-      : <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content}
-        customContent={sections[currentOverlay].customContent} />
+      : <OverlayRenderer key={currentOverlay} content={sectionItemsOverlay[currentOverlay]?.content}
+        customContent={sectionItemsOverlay[currentOverlay]?.customContent} />
   }
 
   return (
     <>
-      <ul role="menu">{sectionItems}</ul>
+      <MenuSectionGroup className="open root no-indentation">{sectionItems}</MenuSectionGroup>
 
       <Flex mb={7} alignItems="center">
         <RateAndContactUsItem {...props} />
@@ -357,6 +375,64 @@ const RateAndContactUsItem = ({ ...props }: Omit<MenuProps, 'sections'>) => {
   </>
 }
 
+/**
+ * A menu item that is actually a subgroup and can be collapsed/expanded.
+ * @param props the props for the component {@link MenuSectionGroup} & { root: boolean }. 
+ 
+ */
+const CollapsibleSection = ({ label, open: initialValue, children, icon, setCurrentOverlay, listItems, isMenuCollapsed = true }
+  : MenuSection 
+  & {setCurrentOverlay: (id: number | undefined) => void, listItems: (MenuSection | undefined)[], isMenuCollapsed?: boolean }) => {
+
+  const [open, setOpen] = useState(initialValue || false)
+  const menuGroupId = `menuGroup${label}`
+  const items = useMemo(() => children?.filter(i => !i.hidden).map(
+    (c) => (
+      <li
+        role="menuitem"
+        key={c.label as string}
+        title={c.label as string}
+        className={`section-submenu ${c.className} ${c.active ? 'active' : ''}`}>
+        <Section
+          id={listItems?.findIndex((item) => item?.label === c.label)} key={c.label as string} 
+          {...c} hasContent={false} setCurrentOverlay={setCurrentOverlay}  />
+      </li>
+    )), 
+  [children])
+
+  return (
+    <>
+      {
+        isMenuCollapsed ? <Divider /> : 
+          <a
+            onClick={() => setOpen(!open)}
+            onKeyDown={e => e.key === 'Enter' && setOpen(!open)}
+            className={listToClass(['item-row'])}
+            tabIndex={0}
+            aria-controls={menuGroupId}
+            aria-expanded={open}
+          >
+            <Flex alignItems="center" justifyContent="center" px={6}>
+              {icon}
+              <Text appearance="microtext1" className="section-label" ml={3} colorScheme="light.contrastText">
+                {label as string}
+              </Text>
+              <IconBox sx={{ ml: '14' }}>
+                <ChevronUpFill className={listToClass(['chevron', open ? 'open' : ''])} />
+                {/* <ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} /> */}
+              </IconBox>
+            </Flex>
+          </a>
+      }
+      <MenuSectionGroup id={menuGroupId}
+        className={`${isMenuCollapsed || open ? 'open' : ''} root no-indentation`}
+        aria-hidden={!open}>
+        {items}
+      </MenuSectionGroup>
+    </>
+  )
+}
+
 const dictionary = {
   en: {
     toggle: 'Show or hide the menu',

package/src/components/menu/types.ts

@@ -142,6 +142,14 @@ export interface MenuSection extends Action {
    */
   className?: string,
   hidden?: boolean,
+  /**
+   * The items in this group. This property will create a accordion to include the items
+   */
+  children?: MenuSection[],
+  /**
+   * initial value to accordion when using children prop
+   */
+  open?: boolean,
 }
 
 interface BaseMenuProps {

package/src/layout.css

@@ -180,13 +180,11 @@ body {
   background: transparent;
   border: none;
   width: var(--menu-sections-width);
-  height: var(--menu-item-height);
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: flex-start;
   justify-content: center;
-  transition: background-color 0.2s;
   cursor: pointer;
   position: relative;
   z-index: 2;
@@ -265,9 +263,8 @@ body {
 }
 
 #menuSections .toggle:hover,
-#menuSections > ul li a:hover,
-#menuSections .toggle:focus,
-#menuSections > ul li a:focus {
+#menuSections > ul li a:hover
+{
   background: var(--light-500);
   border-right: 1px solid var(--light-300);
 }