fixed menu-open class and added styling options (#31)

* fix: class menu-open will only be added to items with children
* added option to provide additional classes to menu items
* added styles to highlight hovering and open menus,

Author: fwermelinger

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Fixed a problem where menu-open would be added to menu items without children
+- Menu styling is now using different colors for hovering and normal state
+
+### Added
+
+- Added an option to provide additional classes to a menu item
+- Added an option to set the "active" class on menu items from the outside
+
 ## [2.6.0] - 2023-08-16
 
 ### Added

src/lib/SideBar/ISideBarMenuItem.ts

@@ -5,12 +5,24 @@ export interface ISideBarMenuItem {
   title: string;
   icon?: IconProp;
   children?: ISideBarMenuItem[];
+
   /**
    * Whether the item is expanded.
    */
   expanded?: boolean;
+
   /**
    * Whether the item should be displayed.
    */
   display?: boolean;
+
+  /**
+   * classes that can be added by the user
+   */
+  className?: string;
+
+  /**
+   * adds the active class to the element
+   */
+  isActive?: boolean;
 }

src/lib/SideBar/SideBarMenuContext.tsx

@@ -24,7 +24,7 @@ const SideBarMenuProvider = (props: SideBarMenuProviderProps) => {
   const [itemState, setItemState] = useState(items);
 
   const toggleItemInternal = (item: ISideBarMenuItem, id: string) => {
-    if (item.id === id) {
+    if (item.id === id && (item.children?.length ?? 0) > 0) {
       item.expanded = !item.expanded;
     }
 

src/lib/SideBar/SideBarMenuItem.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ISideBarMenuItem } from "./ISideBarMenuItem";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { NavItem, Collapse } from "reactstrap";
+import { Collapse } from "reactstrap";
 import { useSideBarMenuContext } from "./SideBarMenuContext";
 
 interface SideBarMenuItemProps {
@@ -22,10 +22,10 @@ const SideBarMenuItem = ({ item, depth = 0 }: SideBarMenuItemProps) => {
 
   return (
     <>
-      <div>
-        <NavItem
+      <div className={classNames(item.className, { "menu-open": isOpen, active: item.isActive })}>
+        <div
           onClick={() => toggleItem(item.id)}
-          className={classNames({ "menu-open": isOpen })}
+          className={classNames("nav-item", { "menu-open": isOpen })}
           style={{ paddingLeft: `${0.5 * depth}rem` }}
         >
           {hasChildren ? (
@@ -49,7 +49,7 @@ const SideBarMenuItem = ({ item, depth = 0 }: SideBarMenuItemProps) => {
               </LinkRenderer>
             </>
           )}
-        </NavItem>
+        </div>
         {hasChildren && (
           <Collapse isOpen={isOpen} navbar className={classNames("items-menu", { "mb-1": isOpen })}>
             {item.children?.map((item, index) => (

styles/Layout/SideBarLayout.scss

@@ -34,8 +34,8 @@ $sidenav-dark-footer-bg: $gray-800;
 $sidenav-light-bg: $gray-100;
 $sidenav-light-color: $gray-900;
 $sidenav-light-heading-color: $gray-500;
-$sidenav-light-link-color: $sidenav-light-color;
-$sidenav-light-link-active-color: $primary;
+$sidenav-light-link-color: $gray-600;
+$sidenav-light-link-active-color: $black;
 $sidenav-light-icon-color: $gray-500;
 $sidenav-light-footer-bg: $gray-200;
 
@@ -335,6 +335,25 @@ $topnav-light-toggler-color: $gray-900;
         color: $sidenav-dark-link-active-color;
       }
     }
+
+    div.active {
+      position: relative;
+
+      .nav-item::before {
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 100%;
+        background-color: $primary;
+      }
+
+      .nav-item .nav-link {
+        color: $sidenav-dark-link-active-color;
+        font-weight: 600;
+      }
+    }
   }
   .sb-sidenav-menu {
     &::-webkit-scrollbar {
@@ -382,3 +401,42 @@ $topnav-light-toggler-color: $gray-900;
     background-color: $sidenav-dark-footer-bg;
   }
 }
+
+.sb-sidenav-light {
+  .sb-sidenav-menu {
+    .nav {
+      .nav-item .nav-link {
+        color: $sidenav-light-link-color;
+
+        &:hover {
+          color: $sidenav-light-link-active-color;
+        }
+      }
+
+      .nav-item.menu-open .nav-link {
+        &::after,
+        div {
+          color: $sidenav-light-link-active-color;
+        }
+      }
+      div.active {
+        position: relative;
+
+        .nav-item::before {
+          content: " ";
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 3px;
+          height: 100%;
+          background-color: $primary;
+        }
+
+        .nav-item .nav-link {
+          color: $sidenav-light-link-active-color;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}