Skip to content

Commit

Permalink
feat: BREAKING: new navmenu features and cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
Sasha committed May 6, 2024
1 parent 3ff61bd commit 21d37f4
Show file tree
Hide file tree
Showing 9 changed files with 242 additions and 336 deletions.
Empty file added .zed/settings.json
View file
Empty file.
153 changes: 28 additions & 125 deletions src/lib/components/organisms/navmenu/NavMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,53 +59,6 @@ const Gap: FC<{ type: 'always' | 'mobile' | 'never' }> = ({ type }) => {
return null
}

export const NavMenu: FC<NavMenuProps> = ({
links,
headerLeft,
headerRight,
fillScreen = 'mobile',
positionItems = 'left',
}) => {
return (
<nav className={styles.nav_menu}>
<div className={styles.nav_menu_header}>
{headerLeft} {headerRight}
</div>
<ul className={[styles.nav_menu_list, styles[`nav_menu_list_${positionItems}`]].join(' ')}>
{links.map((link, index) => {
if ('category' in link) {
return (
<li key={index} className={styles.category}>
{link.category}
</li>
)
}
if ('elements' in link) {
return (
<>
<li key={index} className={styles.category_nested}>
{link.title}
</li>
{link.elements.map((innerLink) => (
<li key={index} className={styles.link_nested}>
{innerLink.link}
</li>
))}
</>
)
}
return (
<li key={index} className={styles.link}>
{link.link}
</li>
)
})}
{<Gap type={fillScreen} />}
</ul>
</nav>
)
}

export interface ToggleNavMenuProps {
links: NavMenuEntry[]
headerItem?: ReactNode
Expand All @@ -114,30 +67,49 @@ export interface ToggleNavMenuProps {
positionItems?: 'center' | 'left' | 'right'
}

export interface NeoNavMenuProps extends ToggleNavMenuProps {
scrollCollapse?: 'never' | 'standard' | 'card'
scrollCollapsed?: boolean
className?: string
}

const getRectY = (index: number) => index * (18 / 2) + 2

export const ToggleNavMenu: FC<ToggleNavMenuProps> = ({
export const ResponsiveNavMenu: FC<NeoNavMenuProps> = ({
links,
headerItem,
headerItemPosition,
fillScreen = 'mobile',
positionItems = 'left',
scrollCollapse = 'standard',
scrollCollapsed = true,
className = '',
}) => {
const getRectY = (index: number) => index * (18 / 2) + 2

const scrollCollapseStyle =
scrollCollapse === 'never'
? styles.scroll_collapse_never
: scrollCollapse === 'card'
? styles.nav_menu_cardify_collapsible
: styles.nav_menu_collapsible

const classNameCollapsed = scrollCollapsed ? '' : styles.expanded
return (
<nav className={styles.nav_menu_toggleable}>
<nav className={[styles.nav_menu_toggleable_responsive, classNameCollapsed, className].join(' ')}>
<input className={styles.nav_check_input} type="checkbox" id={styles.tbsui_ssr_navmenu_toggle} />
<div className={styles.nav_menu}>
<div className={[styles['nav_menu'], scrollCollapseStyle].join(' ')}>
<div
className={styles.nav_menu_header}
style={{
flexDirection: headerItemPosition === 'left' ? 'row' : 'row-reverse',
}}
>
{headerItem}
<span className={styles.nav_check_container}>
<span className={styles.tbsui_ssr_header_item}>{headerItem}</span>
<span className={[styles.nav_check_container, responsive.lg_or_smaller].join(' ')}>
<label className={styles.nav_check_label} htmlFor={styles.tbsui_ssr_navmenu_toggle}>
<svg className={styles.nav_check_icon} viewBox="0 0 24 24">
<rect className={styles.nav_check_rect} x="0" y="0" width="24" height="24"></rect>
<rect className={styles.nav_check_rect} x="0" y="0" width="24" height="24" rx={12}></rect>
<g className={styles.nav_check_x_1}>
<rect className={styles.nav_check_line} y={getRectY(0)} rx={1}></rect>
</g>
Expand All @@ -148,78 +120,6 @@ export const ToggleNavMenu: FC<ToggleNavMenuProps> = ({
</svg>
</label>
</span>
</div>
<ul className={[styles.nav_menu_list, styles[`nav_menu_list_${positionItems}`]].join(' ')}>
{links.map((link, index) => {
if ('category' in link) {
return (
<li key={index} className={styles.category}>
{link.category}
</li>
)
}
if ('elements' in link) {
return (
<>
<li key={index} className={styles.category_nested}>
{link.title}
</li>
{link.elements.map((innerLink) => (
<li key={index} className={styles.link_nested}>
{innerLink.link}
</li>
))}
</>
)
}
return (
<li key={index} className={styles.link}>
{link.link}
</li>
)
})}
{<Gap type={fillScreen} />}
</ul>
</div>
</nav>
)
}

export const ResponsiveNavMenu: FC<ToggleNavMenuProps> = ({
links,
headerItem,
headerItemPosition,
fillScreen = 'mobile',
positionItems = 'left',
}) => {
const getRectY = (index: number) => index * (18 / 2) + 2
return (
<nav className={styles.nav_menu_toggleable_responsive}>
<input className={styles.nav_check_input} type="checkbox" id={styles.tbsui_ssr_navmenu_toggle} />
<div className={styles.nav_menu}>
<div
className={styles.nav_menu_header}
style={{
flexDirection: headerItemPosition === 'left' ? 'row' : 'row-reverse',
}}
>
{headerItem}
<span className={responsive.lg_or_smaller}>
<span className={styles.nav_check_container}>
<label className={styles.nav_check_label} htmlFor={styles.tbsui_ssr_navmenu_toggle}>
<svg className={styles.nav_check_icon} viewBox="0 0 24 24">
<rect className={styles.nav_check_rect} x="0" y="0" width="24" height="24" rx={12}></rect>
<g className={styles.nav_check_x_1}>
<rect className={styles.nav_check_line} y={getRectY(0)} rx={1}></rect>
</g>
<g className={styles.nav_check_x_2}>
<rect className={styles.nav_check_line} y={getRectY(1)} rx={1}></rect>
<rect className={styles.nav_check_line} y={getRectY(2)} rx={1}></rect>
</g>
</svg>
</label>
</span>
</span>
<span className={responsive.lg_or_larger}>
<span className={styles.nav_links_hor}>
{links.map((link, index) => {
Expand Down Expand Up @@ -274,3 +174,6 @@ export const ResponsiveNavMenu: FC<ToggleNavMenuProps> = ({
}

export const NAV_MENU_TOGGLE_ID = styles.tbsui_ssr_navmenu_toggle
export const NAVMENU_HEADER_ITEM_CLASS_COLLAPSED = styles.tbsui_ssr_header_item_collapsed
export const NAVMENU_HEADER_ITEM_CLASS_EXPANDED = styles.tbsui_ssr_header_item_expanded
export const NAVMENU_EXPANDED_CLASS = styles.expanded //Enables toggling expanded state without React
13 changes: 13 additions & 0 deletions src/lib/components/organisms/navmenu/ResponsiveNavMenu.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Canvas, Meta } from '@storybook/blocks';

import * as NavMenuStories from './responsivenavmenu.stories.tsx';

<Meta of={NavMenuStories} />

# Nav Menu

A checkbox is a square box that can be activated or deactivated when ticked.

Use checkboxes to select one or more options from a list of choices.

<Canvas of={NavMenuStories.CollapsibleCategories} />
Loading

0 comments on commit 21d37f4

Please sign in to comment.