add option to enable a light theme (#29)

* Added two ways so set the theme. Either through the context globally
or by explicitly providing it
* Improved some styles that were not looking good in the light theme

Author: fwermelinger

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Added an option to enable the light theme. It can be provided explicitly every time when using the `SideBarMenu` component, or as a default in a SideBarLayoutProvider
+
 ## [2.5.0] - 2023-08-08
 
 ### Added

src/lib/Layout/SideBarLayout/SideBarLayout.tsx

@@ -11,19 +11,21 @@ import { useSideBarLayoutContext } from "./SideBarLayoutContext";
 interface SideBarLayoutProps extends PropsWithChildren {
   brand?: ReactNode;
   footer?: ReactNode;
+  theme?: "dark" | "light";
 }
 
 const SideBarLayout = (props: SideBarLayoutProps) => {
-  const { brand, children, footer } = props;
+  const { brand, children, footer, theme } = props;
 
   const [isOpen, setIsOpen] = useState(true);
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
-  const { brand: contextBrand, userDropDownMenu, userDropDownMenuToggle } = useSideBarLayoutContext();
+  const { brand: contextBrand, theme: contextTheme, userDropDownMenu, userDropDownMenuToggle } = useSideBarLayoutContext();
+  const chosenTheme = theme ?? contextTheme;
 
   return (
     <>
-      <nav id="nav-top" className="navbar navbar-expand navbar-dark">
+      <nav id="nav-top" className={`navbar navbar-expand navbar-${chosenTheme}`}>
         {/* Navbar Brand*/}
         <div className="navbar-brand">{brand ?? contextBrand}</div>
 
@@ -47,7 +49,7 @@ const SideBarLayout = (props: SideBarLayoutProps) => {
         </Nav>
       </nav>
       <section id="layout-sidenav" className={classNames({ toggled: !isOpen })}>
-        <SideBarMenu />
+        <SideBarMenu theme={chosenTheme} />
         <SideBarLayoutContent footer={footer}>{children}</SideBarLayoutContent>
       </section>
     </>

src/lib/Layout/SideBarLayout/SideBarLayoutContext.tsx

@@ -1,19 +1,23 @@
 import { createContext, PropsWithChildren, ReactNode, useContext } from "react";
 
 interface SideBarLayoutProviderProps {
+  theme?: "dark" | "light";
   footer?: ReactNode;
   brand?: ReactNode;
   userDropDownMenuToggle?: ReactNode;
   userDropDownMenu?: ReactNode;
 }
 
-const SideBarLayoutContext = createContext<SideBarLayoutProviderProps | null>(null);
+interface SideBarLayoutContextProps extends SideBarLayoutProviderProps {
+  theme: "dark" | "light";
+}
 
-const SideBarLayoutProvider = (props: PropsWithChildren<SideBarLayoutProviderProps>) => {
-  const { brand = null, children, footer = null, userDropDownMenu, userDropDownMenuToggle } = props;
+const SideBarLayoutContext = createContext<SideBarLayoutContextProps | null>(null);
 
+const SideBarLayoutProvider = (props: PropsWithChildren<SideBarLayoutProviderProps>) => {
+  const { brand = null, children, footer = null, theme = "dark", userDropDownMenu, userDropDownMenuToggle } = props;
   return (
-    <SideBarLayoutContext.Provider value={{ brand, footer, userDropDownMenu, userDropDownMenuToggle }}>
+    <SideBarLayoutContext.Provider value={{ brand, footer, theme, userDropDownMenu, userDropDownMenuToggle }}>
       {children}
     </SideBarLayoutContext.Provider>
   );

src/lib/SideBar/SideBar.tsx

@@ -5,9 +5,10 @@ import SideBarMenu from "./SideBarMenu";
 interface SideBarProps {
   isOpen: boolean;
   toggle: () => void;
+  theme: "dark" | "light";
 }
 
-const SideBar: FC<SideBarProps> = ({ isOpen, toggle }) => (
+const SideBar: FC<SideBarProps> = ({ isOpen, toggle, theme }) => (
   <div className={classNames("sidebar", { "is-open": isOpen })}>
     <div className="sidebar-header">
       <span color="info" onClick={toggle} style={{ color: "#fff" }}>
@@ -18,7 +19,7 @@ const SideBar: FC<SideBarProps> = ({ isOpen, toggle }) => (
       </div>
     </div>
     <div className="side-menu">
-      <SideBarMenu></SideBarMenu>
+      <SideBarMenu theme={theme}></SideBarMenu>
     </div>
   </div>
 );

src/lib/SideBar/SideBarMenu.tsx

@@ -1,12 +1,16 @@
 import { useSideBarMenuContext } from "./SideBarMenuContext";
 import { SideBarMenuItem } from "./SideBarMenuItem";
 
-const SideBarMenu = () => {
+interface SideBarMenuProps {
+  theme: "dark" | "light";
+}
+
+const SideBarMenu = ({ theme }: SideBarMenuProps) => {
   const { items } = useSideBarMenuContext();
 
   return (
     <div id="layout-sidenav__nav">
-      <nav className="sb-sidenav accordion sb-sidenav-dark">
+      <nav className={`sb-sidenav accordion sb-sidenav-${theme}`}>
         <div className="sb-sidenav-menu">
           <div className="nav">
             {items?.map((x, i) => (

styles/Layout/SideBarLayout.scss

@@ -66,7 +66,7 @@ $topnav-light-toggler-color: $gray-900;
     z-index: $zindex-sidenav;
     // Mobile first transform - by default the sidenav will be moved off-canvas
     transform: translateX(-$sidenav-base-width);
-    box-shadow: 0 0 0.5rem 0.125rem rgba($color: $black, $alpha: 0.75);
+    box-shadow: 0 0 0.5rem 0.125rem rgba($color: $gray-500, $alpha: 0.75);
   }
 
   &__content {
@@ -208,7 +208,7 @@ $topnav-light-toggler-color: $gray-900;
   }
 
   &.navbar-light {
-    background-color: $sidenav-light-bg;
+    background-color: $gray-200;
     color: $topnav-light-toggler-color;
 
     #sidebar-toggle {
@@ -244,6 +244,7 @@ $topnav-light-toggler-color: $gray-900;
   flex-direction: column;
   height: 100%;
   flex-wrap: nowrap;
+  background-color: $white;
 
   .sb-sidenav-menu {
     flex-grow: 1;
@@ -261,11 +262,6 @@ $topnav-light-toggler-color: $gray-900;
       }
 
       .nav-item.menu-open .nav-link {
-        &::after,
-        div {
-          color: $sidenav-dark-link-active-color;
-        }
-
         &::after {
           @include chevron-down();
         }
@@ -332,6 +328,14 @@ $topnav-light-toggler-color: $gray-900;
   background-color: $sidenav-dark-bg;
   color: $sidenav-dark-color;
 
+  .nav {
+    .nav-item.menu-open .nav-link {
+      &::after,
+      div {
+        color: $sidenav-dark-link-active-color;
+      }
+    }
+  }
   .sb-sidenav-menu {
     &::-webkit-scrollbar {
       width: 0.25rem;