Working sample without js

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

Hide file tree

Showing 2 changed files with 58 additions and 21 deletions.
diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss
@@ -15,6 +15,7 @@
 
   width: var(--#{$prefix}side-nav-width);
   height: 100%;
+  overflow: auto;
   border: 0 !important; // stylelint-disable-line declaration-no-important
 
   svg,
@@ -72,6 +73,7 @@
     overflow: hidden;
     color: var(--#{$prefix}side-nav-color);
     text-decoration: none;
+    white-space: nowrap;
     background-color: var(--#{$prefix}side-nav-bg-color);
     border: 0;
 
@@ -85,29 +87,55 @@
   }
 }
 
+[class*="side-nav-collapsible"] [data-bs-toggle="collapse"] {
+  align-self: flex-end;
+  width: 54px;
+  height: 40px;
+  margin-left: auto;
+  @include transition(transform .3s ease);
+  @include caret(start);
+
+  &::before {
+    border-right-color: #000;
+  }
+
+  &.collapsed {
+    transform: rotateZ(180deg);
+  }
+}
+
 .side-nav-collapsible {
-  --#{$prefix}side-nav-width: 3.5rem;
-  --#{$prefix}offcanvas-width: 326px;
+  display: inline-flex;
+  --#{$prefix}side-nav-width: 54px;
+  --#{$prefix}offcanvas-width: 300px;
+
+  .offcanvas-body {
+    display: inline-flex;
+    width: auto;
+    min-width: 54px;
+    border-right: #ccc solid 1px;
 
-  [data-bs-toggle="collapse"] {
-    align-self: flex-end;
-    width: 55px;
-    height: 40px;
-    @include transition(transform .3s ease);
-    @include caret(start);
+    @include media-breakpoint-up(lg) {
+      position: absolute;
+    }
 
-    &::before {
-      border-right-color: #000;
+    > * {
+      border: 0;
     }
+  }
 
-    &.collapsed {
-      transform: rotateZ(180deg);
+  .collapse-horizontal {
+    margin-left: 54px;
 
-      &::before {
-        border-right-color: #fff;
-      }
+    .fake {
+      width: 245px;
     }
   }
+}
+
+.side-nav-collapsible-content {
+  --#{$prefix}side-nav-width: 3.5rem;
+  --#{$prefix}offcanvas-width: 326px;
 
   .offcanvas-header,
   .offcanvas-body > * {
@@ -117,6 +145,10 @@
   .side-nav-collapse {
     width: 270px;
   }
+
+  [data-bs-toggle="collapse"].collapsed::before {
+    border-right-color: #fff;
+  }
 }
 
 .side-nav-dark {

diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md
@@ -142,17 +142,20 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
 
 ## Collapsible with title
 
-{{< example class="p-0 scrollspy-example-2" >}}
+{{< example class="p-0 scrollspy-example-2 d-flex" >}}
 <button class="btn btn-primary d-lg-none" data-bs-target="#sidebarMenu2" data-bs-toggle="offcanvas">Collapsing side navigation</button>
 
 <div class="offcanvas-lg offcanvas-start side-nav side-nav-collapsible" id="sidebarMenu2">
   <div class="offcanvas-header">
     <button type="button" class="btn-close" data-bs-target="#sidebarMenu2" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
-  <div class="offcanvas-body d-inline-flex flex-column">
-    <div class="position-absolute">
+  <div class="offcanvas-body">
+    <div id="collapsible-list" class="collapse collapse-horizontal">
+      <div class="fake">&nbsp;</div>
+    </div>
+    <div class="position-absolute w-100 h-100 bg-body">
       <button class="btn btn-link d-none d-lg-flex collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsible-list" aria-expanded="false" aria-controls="collapsible-list"></button>
-      <ul id="collapsible-list" class="list-unstyled m-0 collapse collapse-horizontal">
+      <ul class="list-unstyled m-0">
         <li>
           <button class="side-nav-item fw-bold" data-bs-toggle="tooltip" title="Dashboard" data-bs-placement="right">
             <svg width="1.5rem" height="1.5rem">
@@ -181,16 +184,17 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
     </div>
   </div>
 </div>
+<div class="d-none d-lg-flex">test</div>
 {{< /example >}}
 
 ## Collapsible with content
 
 Strongly WIP, onclick functions are a test without extra JS. But fully working example atm.
 
-{{< example class="p-0 scrollspy-example-2" >}}
+{{< example class="p-0 scrollspy-example-2 d-flex" >}}
 <button class="btn btn-primary d-lg-none" data-bs-target="#sidebarMenu3" data-bs-toggle="offcanvas" onclick="boosted.Collapse.getOrCreateInstance('#collapsingTab').show()">Collapsing side navigation with content</button>
 
-<div class="offcanvas-lg offcanvas-start side-nav side-nav-collapsible" id="sidebarMenu3">
+<div class="offcanvas-lg offcanvas-start side-nav side-nav-collapsible-content" id="sidebarMenu3">
   <div class="offcanvas-header justify-content-end">
     <button type="button" class="btn-close ms-auto" data-bs-target="#sidebarMenu3" data-bs-dismiss="offcanvas" aria-label="Close" onclick="boosted.Collapse.getOrCreateInstance('#collapsingTab').hide()"></button>
   </div>
@@ -238,6 +242,7 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
     </div>
   </div>
 </div>
+<div class="d-none d-lg-flex">test</div>
 {{< /example >}}
 
 ## Dark variant