diff --git a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx new file mode 100644 index 00000000000..36cf03f3037 --- /dev/null +++ b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx @@ -0,0 +1,234 @@ +import { FC, useState } from "react"; +import { + BorderLayout, + BorderItem, + NavigationItem, + StackLayout, +} from "@salt-ds/core"; +import { Meta } from "@storybook/react"; +import { + LineChartIcon, + NotificationIcon, + PinIcon, + SearchIcon, + ReceiptIcon, + UserIcon, +} from "@salt-ds/icons"; + +export default { + title: "Patterns/Vertical Navigation", +} as Meta; + +interface NavigationItemData { + name: string; + href?: string; + children?: NavigationItemData[]; + level?: number; +} + +const Item = () => { + return ( +
+ ); +}; + +const Header = () => { + return ( +
+ ); +}; + +export const SingleLevel = () => { + const navigationData = [ + { name: "Overview", href: "#", icon: }, + { name: "Data analysis", href: "#", icon: }, + { name: "Market monitor", href: "#", icon: }, + { name: "Checks", href: "#", icon: }, + { name: "Operations", href: "#", icon: }, + { name: "Trades", href: "#", icon: }, + ]; + + const [active, setActive] = useState(navigationData[0].name); + + return ( + + +
+ + + + + + + + + + + + ); +}; + +SingleLevel.parameters = { + layout: "fullscreen", +}; + +export const Nested = () => { + const navigationData = [ + { name: "Overview", href: "#" }, + { + name: "Data", + children: [ + { name: "Group overview", href: "#" }, + { + name: "Data analysis", + children: [{ name: "Monitoring", href: "#" }], + }, + ], + }, + { name: "Trades", href: "#" }, + { name: "Reports", href: "#" }, + ]; + + const [active, setActive] = useState(navigationData[0].name); + const [expanded, setExpanded] = useState([]); + + const handleExpand = (item: NavigationItemData) => () => { + const isExpanded = expanded.includes(item.name); + setExpanded( + isExpanded + ? expanded.filter((name) => name !== item.name) + : [...expanded, item.name] + ); + }; + + const isParentOfActiveItem = ( + children: NavigationItemData[], + activeName: string + ): boolean => { + return children.some((child: NavigationItemData) => { + if (child.name === activeName) return true; + return child.children + ? isParentOfActiveItem(child.children, activeName) + : false; + }); + }; + + const RecursiveNavItem: FC<{ item: NavigationItemData }> = ({ item }) => { + return ( +
  • + { + // prevent default to avoid navigation in storybook example + event.preventDefault(); + setActive(item.name); + }} + level={item.level || 0} + onExpand={handleExpand(item)} + parent={!!item.children} + > + {item.name} + + {item.children && + expanded.includes(item.name) && + item.children.map((child) => ( + + ))} +
    • + ); + }; + + return ( + + +
    + + + + + + + + + + + + ); +}; + +Nested.parameters = { + layout: "fullscreen", +}; diff --git a/site/docs/patterns/vertical-navigation.mdx b/site/docs/patterns/vertical-navigation.mdx index 2e31d6cedfc..82e92d1ed60 100644 --- a/site/docs/patterns/vertical-navigation.mdx +++ b/site/docs/patterns/vertical-navigation.mdx @@ -4,6 +4,10 @@ layout: DetailPattern aliases: - /salt/patterns/vertical-navigation data: + resources: + [ + { href: "https://storybook.saltdesignsystem.com/?path=/story/patterns-vertical-navigation--vertical-navigation", label: "Examples"}, + ] components: ["Navigation item"] relatedPatterns: ["Navigation"] ---