@xyo-network/react-appbar 2.37.17 → 2.37.19

package/dist/esm/components/CollapsibleDrawer/CollapseToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapseToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAK7D,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoBrD,CAAA"}
+{"version":3,"file":"CollapseToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAM7D,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuBrD,CAAA"}

package/dist/esm/components/CollapsibleDrawer/CollapseToggle.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { IconButton } from '@mui/material';
+import { Icon, useTheme } from '@mui/material';
 import { FlexRow } from '@xylabs/react-flexbox';
+import { useState } from 'react';
 import { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc';
 import { useCollapsible } from '../../contexts';
 export const CollapseToggleFlex = (props) => {
     const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
+    const [hover, setHover] = useState(false);
+    const theme = useTheme();
     const handleCollapseToggle = () => {
         setCollapse?.(!collapse);
         setCollapseEnd?.((previous) => (previous ? false : previous));
     };
-    return (_jsx(FlexRow, { mt: 2, py: 2, ...props, children: _jsx(IconButton, { onClick: handleCollapseToggle, sx: {
-                flexDirection: 'column',
-            }, children: !collapse ? _jsx(VscArrowSmallLeft, {}) : _jsx(VscArrowSmallRight, {}) }) }));
+    return (_jsx(FlexRow, { mt: 2, py: 2, ...props, children: _jsx(Icon, { onClick: handleCollapseToggle, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), fontSize: 'large', sx: { color: hover ? theme.palette.primary.main : 'initial', cursor: 'pointer' }, children: !collapse ? _jsx(VscArrowSmallLeft, {}) : _jsx(VscArrowSmallRight, {}) }) }));
 };
 //# sourceMappingURL=CollapseToggle.js.map

package/dist/esm/components/CollapsibleDrawer/CollapseToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapseToggle.js","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAA2B,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAA;IAElE,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,WAAW,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACxB,cAAc,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/D,CAAC,CAAA;IAED,OAAO,CACL,KAAC,OAAO,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,KAAM,KAAK,YAC9B,KAAC,UAAU,IACT,OAAO,EAAE,oBAAoB,EAC7B,EAAE,EAAE;gBACF,aAAa,EAAE,QAAQ;aACxB,YAEA,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC,CAAC,KAAC,kBAAkB,KAAG,GAChD,GACL,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"CollapseToggle.js","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAA2B,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAA;IAClE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,WAAW,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACxB,cAAc,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/D,CAAC,CAAA;IAED,OAAO,CACL,KAAC,OAAO,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,KAAM,KAAK,YAC9B,KAAC,IAAI,IACH,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACnC,QAAQ,EAAE,OAAO,EACjB,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,YAE/E,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC,CAAC,KAAC,kBAAkB,KAAG,GACtD,GACC,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/MenuSection.d.ts

@@ -5,6 +5,7 @@ export interface MenuSectionProps extends FlexBoxProps {
     title: string;
     listItems: MenuListItemProps[];
     showTitle?: boolean;
+    iconMenuTextSpacing?: string;
 }
 export declare const MenuSection: React.FC<MenuSectionProps>;
 //# sourceMappingURL=MenuSection.d.ts.map

package/dist/esm/components/SiteMenu/MenuSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSection.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAyB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAEzE,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,iBAAiB,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAYlD,CAAA"}
+{"version":3,"file":"MenuSection.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAyB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAEzE,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,iBAAiB,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAYlD,CAAA"}

package/dist/esm/components/SiteMenu/MenuSection.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapse, ListSubheader } from '@mui/material';
 import { FlexCol } from '@xylabs/react-flexbox';
 import { MenuListItemContainer } from './MenuListItem';
-export const MenuSection = ({ title, listItems, showTitle = true, ...props }) => {
-    return (_jsxs(FlexCol, { alignItems: "stretch", ...props, children: [_jsx(Collapse, { in: showTitle, timeout: 700, children: _jsx(ListSubheader, { children: title }) }), listItems.map((item, index) => (_jsx(MenuListItemContainer, { ...item }, index)))] }));
+export const MenuSection = ({ title, listItems, iconMenuTextSpacing, showTitle = true, ...props }) => {
+    return (_jsxs(FlexCol, { alignItems: "stretch", ...props, children: [_jsx(Collapse, { in: showTitle, timeout: 700, children: _jsx(ListSubheader, { children: title }) }), listItems.map((item, index) => (_jsx(MenuListItemContainer, { iconMenuTextSpacing: iconMenuTextSpacing, ...item }, index)))] }));
 };
 //# sourceMappingURL=MenuSection.js.map

package/dist/esm/components/SiteMenu/MenuSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSection.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,qBAAqB,EAAqB,MAAM,gBAAgB,CAAA;AAQzE,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1G,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,KAAC,QAAQ,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YACnC,KAAC,aAAa,cAAE,KAAK,GAAiB,GAC7B,EAEV,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,KAAC,qBAAqB,OAAiB,IAAI,IAAf,KAAK,CAAoC,CACtE,CAAC,IACM,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MenuSection.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,qBAAqB,EAAqB,MAAM,gBAAgB,CAAA;AASzE,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/H,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,KAAC,QAAQ,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YACnC,KAAC,aAAa,cAAE,KAAK,GAAiB,GAC7B,EAEV,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,KAAC,qBAAqB,IAAa,mBAAmB,EAAE,mBAAmB,KAAM,IAAI,IAAzD,KAAK,CAA8E,CAChH,CAAC,IACM,CACX,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -16,11 +16,11 @@
     "@xylabs/react-flexbox": "^2.15.1",
     "@xylabs/react-link": "^2.15.1",
     "@xylabs/react-shared": "^2.15.1",
-    "@xyo-network/react-app-settings": "^2.37.17",
-    "@xyo-network/react-archive": "^2.37.17",
-    "@xyo-network/react-auth-sets": "^2.37.17",
-    "@xyo-network/react-network": "^2.37.17",
-    "@xyo-network/react-shared": "^2.37.17",
+    "@xyo-network/react-app-settings": "^2.37.19",
+    "@xyo-network/react-archive": "^2.37.19",
+    "@xyo-network/react-auth-sets": "^2.37.19",
+    "@xyo-network/react-network": "^2.37.19",
+    "@xyo-network/react-shared": "^2.37.19",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -77,5 +77,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.37.17"
+  "version": "2.37.19"
 }

package/src/components/CollapsibleDrawer/CollapseDrawer.stories.tsx

@@ -1,6 +1,6 @@
-import { useTheme } from '@mui/material'
+import { Divider, useTheme } from '@mui/material'
 import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
-import { FlexGrowCol } from '@xylabs/react-flexbox'
+import { FlexCol, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
 
 import { CollapsibleProvider, useCollapsible } from '../../contexts'
 import { MenuSection } from '../SiteMenu'
@@ -32,16 +32,17 @@ const Template: ComponentStory<typeof CollapsibleDrawer> = (args) => {
   const { collapse, setCollapseEnd } = useCollapsible()
   const theme = useTheme()
   return (
-    <>
-      <FlexGrowCol alignItems="start">
+    <FlexRow justifyContent="start">
+      <FlexCol alignItems="start">
         <CollapsibleDrawer in={!collapse} orientation="horizontal" collapsedSize={theme.spacing(5)} onExited={() => setCollapseEnd?.(true)} {...args}>
           <MenuSection title="Explore & Create" listItems={menuDataTop} showTitle={!collapse} />
           <MenuSection title="Settings & Analytics" listItems={menuDataBottom} showTitle={!collapse} />
           <FlexGrowCol height="100%" />
           <CollapseToggleFlex justifyContent="start" />
         </CollapsibleDrawer>
-      </FlexGrowCol>
-    </>
+      </FlexCol>
+      <Divider flexItem orientation={'vertical'} />
+    </FlexRow>
   )
 }
 

package/src/components/CollapsibleDrawer/CollapseToggle.tsx

@@ -1,11 +1,14 @@
-import { IconButton } from '@mui/material'
+import { Icon, useTheme } from '@mui/material'
 import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { useState } from 'react'
 import { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'
 
 import { useCollapsible } from '../../contexts'
 
 export const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {
   const { collapse, setCollapse, setCollapseEnd } = useCollapsible()
+  const [hover, setHover] = useState(false)
+  const theme = useTheme()
 
   const handleCollapseToggle = () => {
     setCollapse?.(!collapse)
@@ -14,14 +17,15 @@ export const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {
 
   return (
     <FlexRow mt={2} py={2} {...props}>
-      <IconButton
+      <Icon
         onClick={handleCollapseToggle}
-        sx={{
-          flexDirection: 'column',
-        }}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        fontSize={'large'}
+        sx={{ color: hover ? theme.palette.primary.main : 'initial', cursor: 'pointer' }}
       >
         {!collapse ? <VscArrowSmallLeft /> : <VscArrowSmallRight />}
-      </IconButton>
+      </Icon>
     </FlexRow>
   )
 }

package/src/components/SiteMenu/MenuSection.tsx

@@ -7,9 +7,10 @@ export interface MenuSectionProps extends FlexBoxProps {
   title: string
   listItems: MenuListItemProps[]
   showTitle?: boolean
+  iconMenuTextSpacing?: string
 }
 
-export const MenuSection: React.FC<MenuSectionProps> = ({ title, listItems, showTitle = true, ...props }) => {
+export const MenuSection: React.FC<MenuSectionProps> = ({ title, listItems, iconMenuTextSpacing, showTitle = true, ...props }) => {
   return (
     <FlexCol alignItems="stretch" {...props}>
       <Collapse in={showTitle} timeout={700}>
@@ -17,7 +18,7 @@ export const MenuSection: React.FC<MenuSectionProps> = ({ title, listItems, show
       </Collapse>
 
       {listItems.map((item, index) => (
-        <MenuListItemContainer key={index} {...item}></MenuListItemContainer>
+        <MenuListItemContainer key={index} iconMenuTextSpacing={iconMenuTextSpacing} {...item}></MenuListItemContainer>
       ))}
     </FlexCol>
   )