Add sb-sidenav-primary style

dist/css/styles.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
 * Start Bootstrap - SB Admin v7.0.7 (https://startbootstrap.com/template/sb-admin)
-* Copyright 2013-2023 Start Bootstrap
+* Copyright 2013-2024 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE)
 */
 /*!
@@ -11076,6 +11076,35 @@ body {
   background-color: #e9ecef;
 }
 
+.sb-sidenav-primary {
+  background-color: #0d6efd;
+  color: rgba(255, 255, 255, 0.9);
+}
+.sb-sidenav-primary .sb-sidenav-menu .sb-sidenav-menu-heading {
+  color: rgba(255, 255, 255, 0.8);
+}
+.sb-sidenav-primary .sb-sidenav-menu .nav-link {
+  color: rgba(255, 255, 255, 0.9);
+}
+.sb-sidenav-primary .sb-sidenav-menu .nav-link .sb-nav-link-icon {
+  color: rgba(255, 255, 255, 0.8);
+}
+.sb-sidenav-primary .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
+  color: rgba(255, 255, 255, 0.8);
+}
+.sb-sidenav-primary .sb-sidenav-menu .nav-link:hover {
+  color: #fff;
+}
+.sb-sidenav-primary .sb-sidenav-menu .nav-link.active {
+  color: #fff;
+}
+.sb-sidenav-primary .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
+  color: #fff;
+}
+.sb-sidenav-primary .sb-sidenav-footer {
+  background-color: #052c65;
+}
+
 .datatable-wrapper .datatable-container {
   font-size: 0.875rem;
 }

dist/index.html

@@ -39,7 +39,7 @@
         </nav>
         <div id="layoutSidenav">
             <div id="layoutSidenav_nav">
-                <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
+                <nav class="sb-sidenav accordion sb-sidenav-primary" id="sidenavAccordion">
                     <div class="sb-sidenav-menu">
                         <div class="nav">
                             <div class="sb-sidenav-menu-heading">Core</div>

dist/js/scripts.js

@@ -1,6 +1,6 @@
 /*!
     * Start Bootstrap - SB Admin v7.0.7 (https://startbootstrap.com/template/sb-admin)
-    * Copyright 2013-2023 Start Bootstrap
+    * Copyright 2013-2024 Start Bootstrap
     * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE)
     */
     // 

src/pug/pages/index.pug

@@ -4,7 +4,7 @@ block config
     - var bodyClass = 'sb-nav-fixed'
     - var pageTitle = 'Dashboard';
     - var index = true;
-    - var sidenavStyle = 'sb-sidenav-dark'
+    - var sidenavStyle = 'sb-sidenav-primary'
 
 prepend css
     //- Load Simple DataTables Stylesheet

src/scss/_variables.scss

@@ -2,8 +2,16 @@
 // Variables
 // 
 
+// See https://getbootstrap.com/docs/5.0/customize/sass/#importing
+
 // Import Bootstrap variables for use within theme
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
 @import "bootstrap/scss/functions.scss";
+
+// 2. Include any default variable overrides here
+
+
+// 3. Include remainder of required Bootstrap stylesheets
 @import "bootstrap/scss/variables.scss";
 
 // Import spacing variables

src/scss/navigation/sidenav/_sidenav-primary.scss

@@ -0,0 +1,45 @@
+// 
+// Sidenav Primary
+// 
+
+// Primary color theme for sidenav
+// Append .sb-sidenav-primary to .sb-sidenav to use
+
+.sb-sidenav-primary {
+    background-color: $sidenav-primary-bg;
+    color: $sidenav-primary-color;
+
+    .sb-sidenav-menu {
+        .sb-sidenav-menu-heading {
+            color: $sidenav-primary-heading-color;
+        }
+
+        .nav-link {
+            color: $sidenav-primary-link-color;
+
+            .sb-nav-link-icon {
+                color: $sidenav-primary-icon-color;
+            }
+
+            .sb-sidenav-collapse-arrow {
+                color: $sidenav-primary-icon-color;
+            }
+
+            &:hover {
+                color: $sidenav-primary-link-active-color;
+            }
+
+            &.active {
+                color: $sidenav-primary-link-active-color;
+
+                .sb-nav-link-icon {
+                    color: $sidenav-primary-link-active-color;
+                }
+            }
+        }
+    }
+
+    .sb-sidenav-footer {
+        background-color: $sidenav-primary-footer-bg;
+    }
+}

src/scss/styles.scss

@@ -2,7 +2,9 @@
 // Styles
 // 
 
-// Import Custom Variables
+// See https://getbootstrap.com/docs/5.0/customize/sass/#importing
+
+// Import Custom Variables (note that this imports some bootstrap variables too)
 @import "variables.scss";
 
 // Import Bootstrap
@@ -23,6 +25,7 @@
 @import "navigation/sidenav/sidenav.scss";
 @import "navigation/sidenav/sidenav-dark.scss";
 @import "navigation/sidenav/sidenav-light.scss";
+@import "navigation/sidenav/sidenav-primary.scss";
 
 // Plugins
 @import "plugins/simple-datatables.scss";

src/scss/variables/_navigation.scss

@@ -27,6 +27,15 @@ $sidenav-light-link-active-color: $primary;
 $sidenav-light-icon-color: $gray-500;
 $sidenav-light-footer-bg: $gray-200;
 
+// -- Sidenav Dark
+$sidenav-primary-bg: $primary;
+$sidenav-primary-color: fade-out($white, 0.1);
+$sidenav-primary-heading-color: fade-out($white, 0.2);
+$sidenav-primary-link-color: fade-out($white, 0.1);
+$sidenav-primary-link-active-color: $white;
+$sidenav-primary-icon-color: fade-out($white, 0.2);
+$sidenav-primary-footer-bg: $blue-800;
+
 // Color variables for the topnav
 $topnav-dark-toggler-color: fade-out($white, 0.5);
 $topnav-light-toggler-color: $gray-900;