Add 'hasSubmenu' so we can skip chevron for parents that don't have s…

…ubmenu
xola · Dec 23, 2024 · 6688de5 · 6688de5
1 parent e738a5d
commit 6688de5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/Sidebar/Sidebar.Link.jsx b/src/components/Sidebar/Sidebar.Link.jsx
@@ -4,7 +4,7 @@ import cn from "../../helpers/classnames";
 import { ChevronRightIcon } from "../../icons";
 import { Dot } from "../Dot/Dot";
 
-export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuItem, align, classNames, ...rest }) => {
+export const SidebarLink = ({ isActive = false, hasSubmenu = false, icon: Icon, children, isSubMenuItem, align, classNames, ...rest }) => {
     return (
         <button
             type="button"
@@ -38,7 +38,7 @@ export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuI
                 {children}
             </span>
 
-            {isSubMenuItem ? null : <ChevronRightIcon className="ml-auto hidden h-3 w-3 xl:inline" />}
+            {isSubMenuItem || !hasSubmenu ? null : <ChevronRightIcon className="ml-auto hidden h-3 w-3 xl:inline" />}
         </button>
     );
 };
@@ -48,6 +48,7 @@ SidebarLink.displayName = "Sidebar.Link";
 SidebarLink.propTypes = {
     align: PropTypes.oneOf(["center", "left", "right"]),
     isActive: PropTypes.bool,
+    hasSubmenu: PropTypes.bool,
     icon: PropTypes.func,
     children: PropTypes.node.isRequired,
     isSubMenuItem: PropTypes.bool,

diff --git a/src/stories/Navigation/Sidebar.stories.js b/src/stories/Navigation/Sidebar.stories.js
@@ -109,7 +109,7 @@ export const Default = () => {
                         </div>
                     }
                 >
-                    <Sidebar.Link icon={AnnounceIcon}>Marketing</Sidebar.Link>
+                    <Sidebar.Link hasSubmenu icon={AnnounceIcon}>Marketing</Sidebar.Link>
                 </Sidebar.Menu>
             </Sidebar>
         </div>