increase indentation and use classes (#32)

using classes instead of a `style` tag to indent icons. this way we can
override it when required

Author: fwermelinger

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Removed sidebar drop shadow on screens where it's closed by default (small/medium size screens) in order to avoid having a shadow visible to the left of the screen even when the menu is closed on mobile/tablet
 - 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
+- Indentation of menu items is now using classes. This lets the user overwrite the indentation with custom styles when required
 
 ### Added
 

src/lib/SideBar/SideBarMenuItem.tsx

@@ -23,11 +23,7 @@ const SideBarMenuItem = ({ item, depth = 0 }: SideBarMenuItemProps) => {
   return (
     <>
       <div className={classNames(item.className, { "menu-open": isOpen, active: item.isActive })}>
-        <div
-          onClick={() => toggleItem(item.id)}
-          className={classNames("nav-item", { "menu-open": isOpen })}
-          style={{ paddingLeft: `${0.5 * depth}rem` }}
-        >
+        <div onClick={() => toggleItem(item.id)} className={classNames({ "menu-open": isOpen }, `nesting-level-${depth}`, "nav-item")}>
           {hasChildren ? (
             <>
               <div className={classNames({ dropend: !isOpen })}>

styles/Layout/SideBarLayout.scss

@@ -264,6 +264,21 @@ $topnav-light-toggler-color: $gray-900;
         text-transform: uppercase;
       }
 
+      .nav-item {
+        &.nesting-level-1 {
+          padding-left: 1rem;
+        }
+        &.nesting-level-2 {
+          padding-left: 2rem;
+        }
+        &.nesting-level-3 {
+          padding-left: 3rem;
+        }
+        &.nesting-level-4 {
+          padding-left: 4rem;
+        }
+      }
+
       .nav-item.menu-open .nav-link {
         &::after {
           @include chevron-down();