@xyo-network/react-appbar 2.35.6 → 2.35.8

package/src/components/Toolbar/System/SystemToolbar.tsx

@@ -7,7 +7,7 @@ import { AuthSetsStatusIconButton } from '@xyo-network/react-auth-sets'
 import { NetworkSelectEx, NetworkSelectExProps } from '@xyo-network/react-network'
 import { ReactNode } from 'react'
 
-import { SiteMenu } from '../../SiteMenu'
+import { SiteMenu, SiteMenuProps } from '../../SiteMenu'
 
 export interface SystemToolbarProps extends ToolbarProps {
   networkSelectProps?: NetworkSelectExProps
@@ -19,6 +19,7 @@ export interface SystemToolbarProps extends ToolbarProps {
   menuItems?: ReactNode
   precedingChildren?: ReactNode
   developerMode?: boolean
+  onMenuToggle?: SiteMenuProps['onMenuToggle']
 }
 
 export const SystemToolbar: React.FC<SystemToolbarProps> = ({
@@ -31,6 +32,7 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
   darkModeButton = false,
   authButton = false,
   menuItems,
+  onMenuToggle,
   ...props
 }) => {
   return (
@@ -53,7 +55,7 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
       {children}
       {authButton ? <AuthSetsStatusIconButton color="inherit" /> : null}
       {darkModeButton ? <DarkModeIconButton color="inherit" /> : null}
-      {menuItems ? <SiteMenu>{menuItems}</SiteMenu> : null}
+      {menuItems ? <SiteMenu onMenuToggle={onMenuToggle}>{menuItems}</SiteMenu> : null}
     </Toolbar>
   )
 }

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './AppBar'
+export * from './CollapsibleDrawer'
 export * from './MobileSystemControls'
 export * from './SearchBar'
 export * from './SiteMenu'

package/src/contexts/Collapsible/State.ts

@@ -0,0 +1,9 @@
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch, SetStateAction } from 'react'
+
+export interface CollapsibleState extends ContextExState {
+  collapse?: boolean
+  setCollapse?: Dispatch<SetStateAction<boolean>>
+  collapseEnd?: boolean
+  setCollapseEnd?: Dispatch<SetStateAction<boolean>>
+}

package/src/contexts/Collapsible/context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { CollapsibleState } from './State'
+
+export const CollapsibleContext = createContextEx<CollapsibleState>()

package/src/contexts/Collapsible/index.ts

@@ -0,0 +1,2 @@
+export * from './provider'
+export * from './use'

package/src/contexts/Collapsible/provider.tsx

@@ -0,0 +1,20 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { useState } from 'react'
+
+import { CollapsibleContext } from './context'
+
+export interface CollapsibleProviderProps extends WithChildren {
+  defaultCollapse?: boolean
+  defaultCollapseEnd?: boolean
+}
+
+export const CollapsibleProvider: React.FC<CollapsibleProviderProps> = ({ defaultCollapse = false, defaultCollapseEnd = false, children }) => {
+  const [collapse, setCollapse] = useState(defaultCollapse)
+  const [collapseEnd, setCollapseEnd] = useState(defaultCollapseEnd)
+
+  return (
+    <CollapsibleContext.Provider value={{ collapse, collapseEnd, provided: true, setCollapse, setCollapseEnd }}>
+      {children}
+    </CollapsibleContext.Provider>
+  )
+}

package/src/contexts/Collapsible/use.tsx

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { CollapsibleContext } from './context'
+
+export const useCollapsible = () => useContextEx(CollapsibleContext, 'Collapsible', false)

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './Collapsible'

package/src/index.ts

@@ -1 +1,2 @@
 export * from './components'
+export * from './contexts'