feat: ability to add divider to side nav (#885)

Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com> Co-authored-by: Vince Picone <vpicone@gmail.com> Co-authored-by: Filip Frincu <Filip.Frincu@ibm.com> Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
carbon-design-system · Jun 26, 2020 · a9bb04e · a9bb04e
1 parent 1aadb73
commit a9bb04e
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 25 deletions.
diff --git 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
@@ -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
@@ -69,7 +69,12 @@ const LeftNav = (props) => {
       >
         <SideNavItems className="sidenav-list">
           {navItems.map((item, i) => (
-            <LeftNavItem items={item.pages} category={item.title} key={i} />
+            <LeftNavItem
+              items={item.pages}
+              category={item.title}
+              key={i}
+              hasDivider={item.hasDivider}
+            />
           ))}
           <LeftNavResourceLinks />
         </SideNavItems>

diff --git 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
@@ -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 (
-            <SideNavLink
-              onClick={closeLeftNav}
-              icon={<span>dummy icon</span>}
-              element={Link}
-              className={cx({ [currentItem]: isActive })}
-              isActive={isActive}
-              to={`${items[0].path}`}
-            >
-              {category}
-            </SideNavLink>
+            <>
+              <SideNavLink
+                onClick={closeLeftNav}
+                icon={<span>dummy icon</span>}
+                element={Link}
+                className={cx({
+                  [styles.currentItem]: isActive,
+                })}
+                isActive={isActive}
+                to={`${items[0].path}`}
+              >
+                {category}
+              </SideNavLink>
+              {hasDivider && <hr className={styles.divider} />}
+            </>
           );
         }
         return (
-          <SideNavMenu
-            icon={<span>dummy icon</span>}
-            isActive={isActive} // TODO similar categories
-            defaultExpanded={isActive}
-            title={category}
-          >
-            <SubNavItems
-              onClick={closeLeftNav}
-              items={items}
-              pathname={pathname}
-            />
-          </SideNavMenu>
+          <>
+            <SideNavMenu
+              icon={<span>dummy icon</span>}
+              isActive={isActive} // TODO similar categories
+              defaultExpanded={isActive}
+              title={category}
+            >
+              <SubNavItems
+                onClick={closeLeftNav}
+                items={items}
+                pathname={pathname}
+              />
+            </SideNavMenu>
+            {hasDivider && <hr className={styles.divider} />}
+          </>
         );
       }}
     </Location>

diff --git 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
           }
         }
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ export function useNavItems() { @@
                   title
                   path
                 }
+                hasDivider
               }
             }
           }
@@ Expand Down @@