Fix rotaion of right and update small-box

index.html

@@ -63,15 +63,63 @@
         <nav class="mt-2">
           <!-- Sidebar Menu -->
           <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
-            <li class="nav-item">
+            <li class="nav-item menu-open">
               <a href="#" class="nav-link active">
-                <i class="nav-icon fas fa-th"></i>
+                <i class="nav-icon fas fa-circle"></i>
                 <p>
-                  Simple Link
+                  Dashboard
+                  <i class="right fas fa-angle-left"></i>
                 </p>
               </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href="#" class="nav-link active">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      Dashboard v1
+                    </p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      Dashboard v2
+                    </p>
+                  </a>
+                </li>
+              </ul>
             </li>
+            <li class="nav-item menu-open">
+              <a href="#" class="nav-link">
+                <i class="nav-icon fas fa-circle"></i>
+                <p>
+                  Forms
+                  <i class="right fas fa-angle-left"></i>
+                </p>
+              </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href="./pages/forms/general.html" class="nav-link">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      General Elements
+                    </p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      Level 2
+                    </p>
+                  </a>
+                </li>
+              </ul>
+            </li>
+
             <li class="nav-header">MULTI LEVEL EXAMPLE</li>
+
             <li class="nav-item">
               <a href="#" class="nav-link">
                 <i class="nav-icon fas fa-circle"></i>
@@ -108,14 +156,6 @@
                 </li>
               </ul>
             </li>
-            <li class="nav-item">
-              <a href="#" class="nav-link">
-                <i class="nav-icon fas fa-th"></i>
-                <p>
-                  Simple Link
-                </p>
-              </a>
-            </li>
           </ul>
         </nav>
       </div>
@@ -145,7 +185,7 @@
           <div class="row">
             <div class="col-lg-3 col-6">
               <!-- small box -->
-              <div class="small-box bg-primary rounded-3 shadow-sm text-light">
+              <div class="small-box bg-primary text-light">
                 <div class="inner">
                   <h3>150</h3>
 
@@ -160,7 +200,7 @@
             <!-- ./col -->
             <div class="col-lg-3 col-6">
               <!-- small box -->
-              <div class="small-box bg-success rounded-3 shadow-sm text-light">
+              <div class="small-box bg-success text-light">
                 <div class="inner">
                   <h3>53<sup class="fs-5">%</sup></h3>
 
@@ -175,7 +215,7 @@
             <!-- ./col -->
             <div class="col-lg-3 col-6">
               <!-- small box -->
-              <div class="small-box bg-warning rounded-3 shadow-sm text-light">
+              <div class="small-box bg-warning text-light">
                 <div class="inner">
                   <h3>44</h3>
 
@@ -190,7 +230,7 @@
             <!-- ./col -->
             <div class="col-lg-3 col-6">
               <!-- small box -->
-              <div class="small-box bg-danger rounded-3 shadow-sm text-light">
+              <div class="small-box bg-danger text-light">
                 <div class="inner">
                   <h3>65</h3>
 

scss/_nav-sidebar.scss

@@ -1,5 +1,22 @@
 // Sidebar navigation menu
 .nav-sidebar {
+  // All levels
+  .nav-item {
+    width: 100%;
+
+    > .nav-link {
+      margin-bottom: .2rem;
+
+      .right {
+        @include transition(transform $transition-fn $transition-speed);
+      }
+    }
+
+    &:not(.menu-open) .nav-treeview {
+      display: none;
+    }
+  }
+
   // All levels
   .nav-link > .right,
   .nav-link > p > .right {
@@ -35,11 +52,13 @@
     padding: 0;
   }
 
-  .nav-item {
+  .menu-open,
-    width: 100%;
+  .menu-is-opening {
-
+    > .nav-link {
-    &:not(.menu-open) .nav-treeview {
+      svg.right,
-      display: none;
+      i.right {
+        @include rotate(-90deg);
+      }
     }
   }
 }

scss/_sidebar.scss

@@ -1,5 +1,5 @@
 .sidebar {
-  min-height: 100%;
+  // min-height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   padding-bottom: $sidebar-padding-y;

scss/_small-box.scss

@@ -3,6 +3,9 @@
 //
 
 .small-box {
+  @include border-radius($border-radius);
+  @include box-shadow($card-shadow);
+
   display: block;
   margin-bottom: 1.25rem;
   position: relative;

scss/mixins/_miscellaneous.scss

@@ -16,9 +16,9 @@
 //   #{$property}: calc(#{$expression});
 // }
 
-// @mixin rotate($value) {
+@mixin rotate($value) {
-//   transform: rotate($value);
+  transform: rotate($value);
-// }
+}
 
 // @mixin animation($animation) {
 //   animation: $animation;

ts/treeview.ts

@@ -16,6 +16,7 @@ import {
  */
 
 const CLASS_NAME_MENU_OPEN = 'menu-open'
+const CLASS_NAME_MENU_IS_OPEN = 'menu-is-open'
 
 const SELECTOR_NAV_ITEM = '.nav-item'
 const SELECTOR_DATA_TOGGLE = '[data-widget="treeview"]'
@@ -33,6 +34,7 @@ const Defaults = {
 class Treeview {
   open(navItem: Element | null, childNavItem: HTMLElement | null | undefined): void {
     navItem?.classList.add(CLASS_NAME_MENU_OPEN)
+    navItem?.classList.add(CLASS_NAME_MENU_IS_OPEN)
 
     const height: number = childNavItem?.scrollHeight ?? 0
 
@@ -51,6 +53,7 @@ class Treeview {
   }
 
   close(navItem: Element, childNavItem: HTMLElement | null | undefined): void {
+    navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
     const height: number = childNavItem?.scrollHeight ?? 0
 
     childNavItem?.style.setProperty('overflow', 'hidden')