diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index fda4f141c9..7c2238aadd 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -15,11 +15,12 @@ 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; } @@ -27,10 +28,18 @@ .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}; diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 7ae0b686dd..321f60c351 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -8,6 +8,10 @@ toc: true ## How it works +Side navigation is based on `.offcanvas-*` class. Please refer to [its documentation]({{< docsref "/components/offcanvas#responsive" >}}) to learn more about its behavior. + +Side navigation may need the Javascript from Accordions, Collapse, Tabs or Tooltips (in addition of its own), depending on the implemented navigation, to work correctly. + ## Basic {{< example class="p-0" >}} @@ -22,8 +26,8 @@ toc: true

@@ -40,11 +44,11 @@ toc: true @@ -58,11 +62,11 @@ toc: true @@ -76,11 +80,11 @@ toc: true @@ -92,8 +96,8 @@ toc: true

@@ -101,11 +105,11 @@ toc: true @@ -113,8 +117,8 @@ toc: true

@@ -122,11 +126,11 @@ toc: true @@ -138,12 +142,230 @@ toc: true ## Collapsible with title -{{< example >}} +{{< example class="p-0 scrollspy-example-2" >}} + +
+
+ +
+
+
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
{{< /example >}} ## Collapsible with content -{{< example >}} +Strongly WIP, onclick functions are a test without extra JS. But fully working example atm. + +{{< example class="p-0 scrollspy-example-2" >}} + +
+
+ +
+
+
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+

Dashboard

+
+
+

Financial

+
+
+

Charts

+
+
+
+
+
+
+
+{{< /example >}} + +## Dark variant + +Side navigation comes with a dark variant: `.side-nav-dark`. + +{{< example class="p-0" >}} + + +
+
+ +
+
+
+
+

+ +

+
+
+
+
+

+ +

+
+
+ +
+
+
+
+

+ +

+
+
+ +
+
+
+
+

+ +

+
+
+ +
+
+
+
+
+
+
+
+

+ +

+
+
+ +
+
+
+
+

+ +

+
+
+ +
+
+
+
+
+
{{< /example >}} diff --git a/site/static/docs/5.2/assets/img/boosted-sprite.svg b/site/static/docs/5.2/assets/img/boosted-sprite.svg index 729e45f831..7e528c4abd 100644 --- a/site/static/docs/5.2/assets/img/boosted-sprite.svg +++ b/site/static/docs/5.2/assets/img/boosted-sprite.svg @@ -59,4 +59,13 @@ + + + + + + + + +