Strongly WIP but collapsing content seems to work

Orange-OpenSource · Aug 2, 2022 · 640b0bb · 640b0bb
1 parent e744fca
commit 640b0bb
Show file tree

Hide file tree

Showing 3 changed files with 313 additions and 37 deletions.
diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss
@@ -15,22 +15,31 @@
 
   width: var(--#{$prefix}side-nav-width);
   height: 100%;
-  border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+  border: 0 !important; // stylelint-disable-line declaration-no-important
 
   svg,
   img {
     width: var(--#{$prefix}side-nav-icon-size);
+    min-width: var(--#{$prefix}side-nav-icon-size);
     height: var(--#{$prefix}side-nav-icon-size);
     margin-right: 15px;
   }
 
   .offcanvas-header {
     justify-content: flex-end;
     background-color: var(--#{$prefix}side-nav-bg-color);
+    border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
   }
 
   .offcanvas-body {
+    position: relative;
+    width: 100%;
+    height: 100%;
     background-color: var(--#{$prefix}side-nav-bg-color);
+
+    > * {
+      border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+    }
   }
 
   .accordion {
@@ -48,13 +57,19 @@
     }
   }
 
+  .tab-content {
+    padding: 0;
+    border: 0;
+  }
+
   .side-nav-item {
     position: relative;
     display: flex;
     align-items: center;
     width: 100%;
     height: var(--#{$prefix}side-nav-item-height);
-    padding-left: var(--#{$prefix}side-nav-item-padding-left);
+    padding: 0 0 0 var(--#{$prefix}side-nav-item-padding-left);
+    overflow: hidden;
     color: var(--#{$prefix}side-nav-color);
     text-decoration: none;
     background-color: var(--#{$prefix}side-nav-bg-color);
@@ -70,9 +85,39 @@
   }
 }
 
-// .side-nav-collapsible {
+.side-nav-collapsible {
+  --#{$prefix}side-nav-width: 3.5rem;
+  --#{$prefix}offcanvas-width: 326px;
+
+  [data-bs-toggle="collapse"] {
+    align-self: flex-end;
+    width: 55px;
+    height: 40px;
+    @include transition(transform .3s ease);
+    @include caret(start);
+
+    &::before {
+      border-right-color: #000;
+    }
 
-// }
+    &.collapsed {
+      transform: rotateZ(180deg);
+
+      &::before {
+        border-right-color: #fff;
+      }
+    }
+  }
+
+  .offcanvas-header,
+  .offcanvas-body > * {
+    background: linear-gradient(to right, #333, #333 55px, #fff 55px);
+  }
+
+  .side-nav-collapse {
+    width: 270px;
+  }
+}
 
 .side-nav-dark {
   --#{$prefix}side-nav-color: #{$white};