diff --git a/packages/example/src/pages/guides/navigation/sidebar.mdx b/packages/example/src/pages/guides/navigation/sidebar.mdx index 2b89fb4dd..9b9a052b0 100644 --- a/packages/example/src/pages/guides/navigation/sidebar.mdx +++ b/packages/example/src/pages/guides/navigation/sidebar.mdx @@ -34,6 +34,25 @@ Some important things to note here: - You can make a `Page/index.mdx` file if you’d prefer to have assets in a folder. The path would still just look like `/Page` +## Adding a divider + +You can add divider(s) between the items of your nav item list by adding `hasDivider: true` in `src/data/nav-items.yaml`. Note the divider is only for top-level nav items and can only be used with the left sidebar navigation style. It cannot be used in conjunction with the [header navigation style](/guides/configuration#navigation-style). + +```yaml +- title: Menu + pages: + - title: Page 1 + path: /menu/Page-1 + - title: Page 2 + path: /menu/Page-2 + hasDivider: true +- title: Single Page + pages: + - path: /single-page +``` + +In the example above, a divider will appear between **Menu** and **Single Page**. + ## Customizing The nav item list can be customized using Gatsby theme [shadowing](../shadowing). diff --git a/packages/gatsby-theme-carbon/gatsby-node.js b/packages/gatsby-theme-carbon/gatsby-node.js index 6de143faa..3dd98df54 100644 --- a/packages/gatsby-theme-carbon/gatsby-node.js +++ b/packages/gatsby-theme-carbon/gatsby-node.js @@ -64,6 +64,7 @@ exports.createSchemaCustomization = ({ actions, schema }) => { type NavItemsYaml implements Node { title: String! pages: [NavItemsYamlPage]! + hasDivider: Boolean }`, schema.buildObjectType({ name: 'MediumFeed', diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js index 1f8b07191..b1a17ee4c 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js @@ -69,7 +69,12 @@ const LeftNav = (props) => { > {navItems.map((item, i) => ( - + ))} diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.module.scss b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.module.scss index 974c57a76..c57905955 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.module.scss +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.module.scss @@ -11,6 +11,13 @@ color: $ui-05; } +.divider { + margin: $spacing-03 $spacing-05; + border-color: var(--cds-ui-03, #e0e0e0); + border-style: solid; + border-bottom: none; +} + .resource-link { &:first-of-type { margin-top: $spacing-05; diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js index b83826d8f..844c870f7 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js @@ -8,13 +8,13 @@ import { SideNavMenuItem, } from 'carbon-components-react'; -import styles, { currentItem } from './LeftNav.module.scss'; +import styles from './LeftNav.module.scss'; import NavContext from '../../util/context/NavContext'; import usePathprefix from '../../util/hooks/usePathprefix'; const LeftNavItem = (props) => { - const { items, category } = props; + const { items, category, hasDivider } = props; const { toggleNavState } = useContext(NavContext); const closeLeftNav = () => { toggleNavState('leftNavIsOpen', 'close'); @@ -34,31 +34,39 @@ const LeftNavItem = (props) => { if (items.length === 1) { return ( - dummy icon} - element={Link} - className={cx({ [currentItem]: isActive })} - isActive={isActive} - to={`${items[0].path}`} - > - {category} - + <> + dummy icon} + element={Link} + className={cx({ + [styles.currentItem]: isActive, + })} + isActive={isActive} + to={`${items[0].path}`} + > + {category} + + {hasDivider &&
} + ); } return ( - dummy icon} - isActive={isActive} // TODO similar categories - defaultExpanded={isActive} - title={category} - > - - + <> + dummy icon} + isActive={isActive} // TODO similar categories + defaultExpanded={isActive} + title={category} + > + + + {hasDivider &&
} + ); }} diff --git a/packages/gatsby-theme-carbon/src/util/NavItems.js b/packages/gatsby-theme-carbon/src/util/NavItems.js index b06497c96..6e4dcd825 100644 --- a/packages/gatsby-theme-carbon/src/util/NavItems.js +++ b/packages/gatsby-theme-carbon/src/util/NavItems.js @@ -13,6 +13,7 @@ export function useNavItems() { title path } + hasDivider } } }