@xyo-network/react-appbar 2.35.11 → 2.35.13

package/src/components/SiteMenu/MenuItems.tsx

@@ -1,8 +1,11 @@
-import { ListItemProps, ListItemTextProps } from '@mui/material'
+import { Collapse, IconButton, List, ListItemProps, ListItemTextProps, Tooltip, useTheme } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { ListItemButtonExProps } from '@xyo-network/react-shared'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
+import { VscChevronDown, VscInfo } from 'react-icons/vsc'
 import { To } from 'react-router-dom'
 
+import { useCollapsible } from '../../contexts'
 import { SiteMenuListItemBase } from './lib'
 import { MenuIcon } from './MenuIcon'
 import { MenuListItem } from './MenuListItem'
@@ -12,14 +15,28 @@ import { MenuListItemText } from './MenuListItemText'
 export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemProps {
   primary: ListItemTextProps['primary']
   to?: To
+  href?: string
   icon?: ReactNode
   onButtonClick?: ListItemButtonExProps['onClick']
+  subNavListItems?: SubNavListItemProps[]
+  tooltip?: string
+  subNavOpen?: boolean
+}
+
+export interface SubNavListItemProps {
+  primary: ListItemTextProps['primary']
+  to?: To
+  href?: string
+  icon?: ReactNode
+  onButtonClick?: ListItemButtonExProps['onClick']
+  tooltip?: string
 }
 
 export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
   style,
-  children,
+  subNavListItems,
   iconOnly,
+  tooltip,
   collapseEnd,
   icon,
   primary,
@@ -28,13 +45,53 @@ export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
   ...props
 }) => {
   const { dense } = props
+  const theme = useTheme()
+  const { collapse } = useCollapsible()
+  const [openSubNav, setOpenSubNav] = useState(false)
+  const [hovered, setHovered] = useState(false)
   return (
-    <MenuListItem style={{ whiteSpace: 'nowrap', ...style }} iconOnly={iconOnly} {...props}>
-      <MenuListItemButtonEx iconOnly={iconOnly} onClick={onButtonClick} collapseEnd={collapseEnd} dense={dense} to={to}>
-        <MenuIcon icon={icon} />
-        <MenuListItemText primary={primary} iconOnly={iconOnly} />
+    <MenuListItem disableGutters style={{ whiteSpace: 'nowrap', ...style }} iconOnly={iconOnly} {...props}>
+      <MenuListItemButtonEx
+        iconOnly={iconOnly}
+        onClick={onButtonClick}
+        collapseEnd={collapseEnd}
+        dense={dense}
+        to={to}
+        sx={{ justifyContent: 'space-between' }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        <FlexRow>
+          <MenuIcon icon={icon} paddingRight={theme.spacing(1)} color={hovered ? 'primary' : 'inherit'} />
+          <MenuListItemText primary={primary} iconOnly={iconOnly} />
+        </FlexRow>
+        <FlexRow>
+          {subNavListItems ? (
+            <IconButton onClick={() => setOpenSubNav(!openSubNav)} sx={{ marginRight: theme.spacing(1) }}>
+              <VscChevronDown fontSize="16px" />
+            </IconButton>
+          ) : null}
+          {tooltip ? (
+            <Tooltip title={tooltip} placement="right">
+              {/* Needs div so it can work, the hovering doesn't work with a FlexCol */}
+              <div>
+                <FlexCol justifyContent="center">
+                  <VscInfo color="grey" />
+                </FlexCol>
+              </div>
+            </Tooltip>
+          ) : null}
+        </FlexRow>
       </MenuListItemButtonEx>
-      {children}
+      {subNavListItems ? (
+        <Collapse in={collapse == true ? false : openSubNav}>
+          <List>
+            {subNavListItems.map((item, index) => {
+              return <SiteMenuListItem sx={{ pl: theme.spacing(1) }} key={index} {...item} />
+            })}
+          </List>
+        </Collapse>
+      ) : null}
     </MenuListItem>
   )
 }

package/src/components/SiteMenu/MenuListItemButtonEx.tsx

@@ -5,7 +5,7 @@ import { SiteMenuListItemBase } from './lib'
 export interface MenuListItemButtonExProps extends SiteMenuListItemBase, ListItemButtonExProps {}
 
 export const MenuListItemButtonEx: React.FC<MenuListItemButtonExProps> = ({ iconOnly, collapseEnd, sx, children, ...props }) => {
-  const { dense } = props
+  const dense = props
   const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0 } : {}
   // wait till collapseEnds to remove the spacing between items
   const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }

package/src/components/SiteMenu/MenuSection.tsx

@@ -0,0 +1,22 @@
+import { List, ListProps, ListSubheader } from '@mui/material'
+
+import { SiteMenuListItem, SiteMenuListItemProps } from './MenuItems'
+
+export interface MenuSectionProps extends ListProps {
+  title: string
+  listItems: SiteMenuListItemProps[]
+  showTitle?: boolean
+}
+
+export const MenuSection: React.FC<MenuSectionProps> = ({ title, listItems, showTitle = true, ...props }) => {
+  return (
+    <List {...props}>
+      {showTitle ? <ListSubheader>{title}</ListSubheader> : null}
+      {listItems.map((item, index) => (
+        <>
+          <SiteMenuListItem key={index} {...item}></SiteMenuListItem>
+        </>
+      ))}
+    </List>
+  )
+}

package/src/components/SiteMenu/index.ts

@@ -1,3 +1,4 @@
 export * from './hooks'
 export * from './Menu'
 export * from './MenuItems'
+export * from './MenuSection'