wip: add sidenav component

src/components/index.ts

@@ -1,4 +1,4 @@
-export * from './layout-drawer'
+export * from './sidenav'
 export * from './icons'
 export * from './spinner'
 export * from './section-spinner'

src/components/shell.tsx

@@ -1,7 +1,7 @@
 import { MouseEvent, ReactElement } from 'react'
 import cx from 'classnames'
 import { StorageOptions } from '../types'
-import { LayoutDrawer, LayoutDrawerItem } from './layout-drawer'
+import { Sidenav, SidenavItem } from './sidenav'
 
 export type ShellProps = {
   storage?: StorageOptions
@@ -32,10 +32,10 @@ export const Shell = ({
   navigateFn,
 }: ShellProps) => (
   <div className={cx('flex', 'flex-row', 'items-center', 'gap-0', 'h-full')}>
-    <LayoutDrawer storage={storage} logo={logo} navigateFn={navigateFn}>
+    <Sidenav storage={storage} logo={logo} navigateFn={navigateFn}>
       {items
         ? items.map((item, index) => (
-            <LayoutDrawerItem
+            <SidenavItem
               key={index}
               href={item.href}
               icon={item.icon}
@@ -46,7 +46,7 @@ export const Shell = ({
             />
           ))
         : null}
-    </LayoutDrawer>
+    </Sidenav>
     <div
       className={cx('flex', 'flex-col', 'items-center', 'h-full', 'w-full')}
       onClick={onContentClick}

src/components/sidenav/index.ts

@@ -0,0 +1,3 @@
+export * from './sidenav'
+export * from './sidenav-item'
+export * from './sidenav-context'

src/components/layout-drawer/layout-drawer-context.ts → src/components/sidenav/sidenav-context.ts

@@ -1,11 +1,11 @@
 import { createContext } from 'react'
 
-export type LayoutDrawerContextType = {
+export type SidenavContextType = {
   isCollapsed: boolean | undefined
   isTouched: boolean
 }
 
-export const LayoutDrawerContext = createContext<LayoutDrawerContextType>({
+export const SidenavContext = createContext<SidenavContextType>({
   isCollapsed: undefined,
   isTouched: false,
 })

src/components/layout-drawer/layout-drawer-item.tsx → src/components/sidenav/sidenav-item.tsx

@@ -1,9 +1,9 @@
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { Tooltip, Link } from '@chakra-ui/react'
 import cx from 'classnames'
-import { LayoutDrawerContext } from './layout-drawer-context'
+import { SidenavContext } from './sidenav-context'
 
-export type DrawerItemProps = {
+export type SidenavItemProps = {
   icon: ReactElement
   href: string
   primaryText: string
@@ -12,17 +12,17 @@ export type DrawerItemProps = {
   navigateFn: (href: string) => void
 }
 
-export const LayoutDrawerItem = ({
+export const SidenavItem = ({
   icon,
   href,
   primaryText,
   secondaryText,
   pathnameFn,
   navigateFn,
-}: DrawerItemProps) => {
+}: SidenavItemProps) => {
   const pathname = pathnameFn()
   const [isActive, setIsActive] = useState<boolean>()
-  const { isCollapsed } = useContext(LayoutDrawerContext)
+  const { isCollapsed } = useContext(SidenavContext)
 
   useEffect(() => {
     if (

src/components/layout-drawer/layout-drawer.tsx → src/components/sidenav/sidenav.tsx

@@ -3,23 +3,23 @@ import { Link } from '@chakra-ui/react'
 import cx from 'classnames'
 import { StorageOptions } from '../../types'
 import { IconChevronLeft, IconChevronRight } from '../icons'
-import { LayoutDrawerContext } from './layout-drawer-context'
+import { SidenavContext } from './sidenav-context'
 
-export type LayoutDrawerProps = {
+export type SidenavProps = {
   children?: ReactNode
   logo?: ReactNode
   storage?: StorageOptions
   homeHref?: string
   navigateFn: (href: string) => void
 }
 
-export const LayoutDrawer = ({
+export const Sidenav = ({
   children,
   storage,
   logo,
   homeHref,
   navigateFn,
-}: LayoutDrawerProps) => {
+}: SidenavProps) => {
   const [isCollapsed, setIsCollapsed] = useState<boolean | undefined>(undefined)
   const [isTouched, setIsTouched] = useState(false)
   const localStorageCollapsedKey = useMemo(
@@ -48,7 +48,7 @@ export const LayoutDrawer = ({
   }
 
   return (
-    <LayoutDrawerContext.Provider
+    <SidenavContext.Provider
       value={{
         isCollapsed,
         isTouched,
@@ -128,6 +128,6 @@ export const LayoutDrawer = ({
           {isCollapsed ? <IconChevronRight /> : <IconChevronLeft />}
         </div>
       </div>
-    </LayoutDrawerContext.Provider>
+    </SidenavContext.Provider>
   )
 }

src/stories/components/shell.stories.tsx

@@ -37,12 +37,13 @@ export const Default: Story = {
         secondaryText: 'Allows assigning permissions to a group of users.',
       },
       {
-        href: '/organizations',
+        href: '/organization',
         icon: <IconFlag />,
         primaryText: 'Organizations',
         secondaryText: 'Umbrellas for workspaces and users.',
       },
     ],
+    children: <></>,
   },
   render: (args) => {
     const location = useLocation()
@@ -52,7 +53,43 @@ export const Default: Story = {
         {...args}
         pathnameFn={() => location.pathname}
         navigateFn={(href: string) => navigate(href)}
-      />
+      >
+        <>
+          {location.pathname == '/' ? (
+            <p>
+              Lorem ipsum odor amet, consectetuer adipiscing elit. Duis nascetur
+              magnis morbi laoreet; montes porta. Pulvinar nunc per accumsan sed
+              suspendisse sit sapien. Venenatis maximus inceptos taciti
+              vestibulum porta sagittis quisque ipsum erat. Risus sodales
+              conubia leo facilisi dignissim potenti senectus. Lectus feugiat
+              ornare amet iaculis metus inceptos adipiscing placerat. Vestibulum
+              faucibus facilisis viverra magna litora. Molestie lorem leo
+              malesuada dictumst porta erat sagittis ullamcorper sollicitudin.
+              Hendrerit ante maximus tincidunt, venenatis mauris molestie.
+            </p>
+          ) : null}
+          {location.pathname == '/group' ? (
+            <>
+              Commodo volutpat facilisis habitant; mattis ultrices mauris ex
+              nisi. Consequat nascetur lacus sed fames convallis pretium sit
+              justo. Gravida curabitur condimentum hac mi, ridiculus montes.
+              Eros commodo porttitor erat amet primis imperdiet. Morbi at
+              potenti volutpat litora viverra dapibus sapien. Fermentum sodales
+              nullam aliquam fusce aliquam.
+            </>
+          ) : null}
+          {location.pathname == '/organization' ? (
+            <>
+              Dis eros primis condimentum a porttitor orci curabitur. Aluctus
+              arcu blandit dui facilisi interdum pretium tristique. Cras nam
+              congue parturient posuere tempor lectus? Felis hendrerit penatibus
+              semper maximus convallis tortor. Et potenti quisque ex phasellus
+              magnis leo netus. Hac enim ante curae odio libero feugiat metus
+              conubia tincidunt.
+            </>
+          ) : null}
+        </>
+      </Shell>
     )
   },
 }

src/stories/components/sidenav.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from '@storybook/react'
+import cx from 'classnames'
+import { useLocation, useNavigate } from 'react-router-dom'
+import {
+  IconFlag,
+  IconGroup,
+  IconWorkspaces,
+  Sidenav,
+  SidenavItem,
+  Logo,
+} from '../../components'
+
+const meta: Meta<typeof Sidenav> = {
+  title: 'Components/Sidenav',
+  component: Sidenav,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Sidenav>
+
+export const Default: Story = {
+  args: {
+    storage: { prefix: 'shell', namespace: 'main' },
+    logo: <Logo type="koupr" size="sm" />,
+  },
+  render: (args) => {
+    const location = useLocation()
+    const navigateFn = useNavigate()
+
+    return (
+      <div
+        className={cx('flex', 'flex-row', 'items-center', 'gap-0', 'h-full')}
+      >
+        <Sidenav {...args} navigateFn={navigateFn}>
+          <SidenavItem
+            href="/"
+            icon={<IconWorkspaces />}
+            primaryText="Workspaces"
+            secondaryText="Isolated containers for files and folders."
+            pathnameFn={() => location.pathname}
+            navigateFn={navigateFn}
+          />
+          <SidenavItem
+            href="/group"
+            icon={<IconGroup />}
+            primaryText="Groups"
+            secondaryText="Allows assigning permissions to a group of users."
+            pathnameFn={() => location.pathname}
+            navigateFn={navigateFn}
+          />
+          <SidenavItem
+            href="/organization"
+            icon={<IconFlag />}
+            primaryText="Organizations"
+            secondaryText="Umbrellas for workspaces and users."
+            pathnameFn={() => location.pathname}
+            navigateFn={navigateFn}
+          />
+        </Sidenav>
+      </div>
+    )
+  },
+}