SNI and SNL first attempt

Orange-OpenSource · Aug 2, 2022 · e744fca · e744fca
1 parent 5a4f368
commit e744fca
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 2 deletions.
diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss
@@ -0,0 +1,83 @@
+.side-nav {
+  --#{$prefix}side-nav-width: 18.75rem;
+  --#{$prefix}side-nav-color: #{$black};
+  --#{$prefix}side-nav-bg-color: #{$white};
+  --#{$prefix}side-nav-hover-bg-color: #{$gray-300};
+  --#{$prefix}side-nav-active-bg-color: #{$gray-500};
+  --#{$prefix}side-nav-active-border-color: var(--#{$prefix}link-hover-color);
+  --#{$prefix}side-nav-icon-size: 1.5625rem;
+  --#{$prefix}side-nav-item-height: 2.5rem;
+  --#{$prefix}side-nav-item-padding-left: 15px;
+  --#{$prefix}offcanvas-padding-x: 0;
+  --#{$prefix}offcanvas-padding-y: 0;
+  --#{$prefix}offcanvas-border-width: 1px;
+  --#{$prefix}offcanvas-border-color: #{$gray-500};
+
+  width: var(--#{$prefix}side-nav-width);
+  height: 100%;
+  border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+
+  svg,
+  img {
+    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);
+  }
+
+  .offcanvas-body {
+    background-color: var(--#{$prefix}side-nav-bg-color);
+  }
+
+  .accordion {
+    --#{$prefix}accordion-border-width: 0;
+    --#{$prefix}accordion-body-padding-x: 0;
+    --#{$prefix}accordion-body-padding-y: 0;
+    --#{$prefix}accordion-btn-font-size: 1rem;
+
+    .accordion-body {
+      --#{$prefix}side-nav-item-padding-left: 55px;
+
+      .accordion-body {
+        --#{$prefix}side-nav-item-padding-left: 95px;
+      }
+    }
+  }
+
+  .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);
+    color: var(--#{$prefix}side-nav-color);
+    text-decoration: none;
+    background-color: var(--#{$prefix}side-nav-bg-color);
+    border: 0;
+
+    &:hover {
+      background-color: var(--#{$prefix}side-nav-hover-bg-color);
+    }
+
+    &.active {
+      background: linear-gradient(to right, var(--#{$prefix}side-nav-active-border-color), var(--#{$prefix}side-nav-active-border-color) 4px, var(--#{$prefix}side-nav-active-bg-color) 4px, var(--#{$prefix}side-nav-active-bg-color));
+    }
+  }
+}
+
+// .side-nav-collapsible {
+
+// }
+
+.side-nav-dark {
+  --#{$prefix}side-nav-color: #{$white};
+  --#{$prefix}side-nav-bg-color: #{$gray-900};
+  --#{$prefix}side-nav-hover-bg-color: #{$black};
+  --#{$prefix}side-nav-active-bg-color: #{$gray-700};
+  --#{$prefix}offcanvas-border-color: #{$gray-700};
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1907,11 +1907,11 @@ $btn-close-padding-sm:       subtract($btn-icon-padding-x, $spacer * .25) !defau
 // scss-docs-start offcanvas-variables
 $offcanvas-padding-y:               $modal-inner-padding !default;
 $offcanvas-padding-x:               $modal-inner-padding !default;
-$offcanvas-horizontal-width:        400px !default;
+$offcanvas-horizontal-width:        300px !default;
 $offcanvas-vertical-height:         30vh !default;
 $offcanvas-transition-duration:     .3s !default;
 $offcanvas-border-color:            $modal-content-border-color !default;
-$offcanvas-border-width:            $modal-content-border-width !default;
+$offcanvas-border-width:            1px !default;
 $offcanvas-title-line-height:       $modal-title-line-height !default;
 $offcanvas-bg-color:                $modal-content-bg !default;
 $offcanvas-color:                   $modal-content-color !default;

diff --git a/scss/boosted.scss b/scss/boosted.scss
@@ -47,6 +47,7 @@
 @import "back-to-top";
 @import "footer";
 @import "orange-navbar";
+@import "side-navigation";
 @import "stepped-process";
 @import "sticker";
 @import "title-bars";

diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md
@@ -0,0 +1,149 @@
+---
+layout: docs
+title: Side Navigation
+description: Documentation and examples for Boosted's exclusive Brand responsive side navigation.
+group: components
+toc: true
+---
+
+## How it works
+
+## Basic
+
+{{< example class="p-0" >}}
+<button class="btn btn-primary d-lg-none" data-bs-target="#sidebarMenu1" data-bs-toggle="offcanvas">With icon and accordions</button>
+
+<div class="offcanvas-lg offcanvas-start side-nav" id="sidebarMenu1">
+  <div class="offcanvas-header">
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu1" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <div class="accordion w-100" id="sideNavAccordion">
+      <div class="accordion-item">
+        <h3 class="accordion-header" id="dashboardHeader">
+          <button class="accordion-button side-nav-item" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardCollapse" aria-expanded="true" aria-controls="dashboardCollapse">
+            <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000">
+              <path fill="currentColor" d="M175,125H425a50,50,0,0,1,50,50V425a50,50,0,0,1-50,50H175a50,50,0,0,1-50-50V175A50,50,0,0,1,175,125Zm0,400H425a50,50,0,0,1,50,50V825a50,50,0,0,1-50,50H175a50,50,0,0,1-50-50V575A50,50,0,0,1,175,525ZM575,125H825a50,50,0,0,1,50,50V425a50,50,0,0,1-50,50H575a50,50,0,0,1-50-50V175A50,50,0,0,1,575,125Zm0,400H825a50,50,0,0,1,50,50V825a50,50,0,0,1-50,50H575a50,50,0,0,1-50-50V575A50,50,0,0,1,575,525Z"/>
+            </svg>
+            Dashboard
+          </button>
+        </h3>
+        <div id="dashboardCollapse" class="accordion-collapse collapse show" aria-labelledby="dashboardHeader" data-bs-parent="#sideNavAccordion">
+          <div class="accordion-body">
+            <div class="accordion" id="labels">
+              <div class="accordion-item">
+                <h4 class="accordion-header" id="labelOneHeader">
+                  <button class="accordion-button side-nav-item" type="button" data-bs-toggle="collapse" data-bs-target="#labelOneCollapse" aria-expanded="true" aria-controls="labelOneCollapse">
+                    Label
+                  </button>
+                </h4>
+                <div id="labelOneCollapse" class="accordion-collapse collapse show" aria-labelledby="labelOneHeader" data-bs-parent="#labels">
+                  <div class="accordion-body">
+                    <ul class="list-unstyled m-0">
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item active" aria-current="true">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h4 class="accordion-header" id="labelTwoHeader">
+                  <button class="accordion-button collapsed side-nav-item" type="button" data-bs-toggle="collapse" data-bs-target="#labelTwoCollapse" aria-expanded="false" aria-controls="labelTwoCollapse">
+                    Label
+                  </button>
+                </h4>
+                <div id="labelTwoCollapse" class="accordion-collapse collapse" aria-labelledby="labelTwoHeader" data-bs-parent="#labels">
+                  <div class="accordion-body">
+                    <ul class="list-unstyled m-0">
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h4 class="accordion-header" id="labelThreeHeader">
+                  <button class="accordion-button collapsed side-nav-item" type="button" data-bs-toggle="collapse" data-bs-target="#labelThreeCollapse" aria-expanded="false" aria-controls="labelThreeCollapse">
+                    Label
+                  </button>
+                </h4>
+                <div id="labelThreeCollapse" class="accordion-collapse collapse" aria-labelledby="labelThreeHeader" data-bs-parent="#labels">
+                  <div class="accordion-body">
+                    <ul class="list-unstyled m-0">
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                      <a href="#" class="side-nav-item">Label</a>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <h3 class="accordion-header" id="financialHeader">
+          <button class="accordion-button collapsed side-nav-item" type="button" data-bs-toggle="collapse" data-bs-target="#financialCollapse" aria-expanded="false" aria-controls="financialCollapse">
+            <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000">
+              <path fill="currentColor" d="M415.417,386.092L557.28,528.036,880.094,229.885a60.246,60.246,0,0,0,1.735-86.834l-0.445-.445a60.162,60.162,0,0,0-82.822-2.179L557.28,357.7l-99.3-99.361a60.163,60.163,0,0,0-85.118,0L117.5,513.841a60.246,60.246,0,0,0,0,85.166h0a60.165,60.165,0,0,0,85.118,0ZM124.863,780v-41L414.711,446.981,555.637,588.988,874.47,297.975V780H124.863ZM874.47,825H124.863a24.994,24.994,0,0,0-24.987,25h0a24.994,24.994,0,0,0,24.987,25H874.47a24.994,24.994,0,0,0,24.987-25h0A24.994,24.994,0,0,0,874.47,825Z"/>
+            </svg>
+            Financial
+          </button>
+        </h3>
+        <div id="financialCollapse" class="accordion-collapse collapse" aria-labelledby="financialHeader" data-bs-parent="#sideNavAccordion">
+          <div class="accordion-body">
+            <ul class="list-unstyled m-0">
+              <a href="#" class="side-nav-item">Label</a>
+              <a href="#" class="side-nav-item">Label</a>
+              <a href="#" class="side-nav-item">Label</a>
+              <a href="#" class="side-nav-item">Label</a>
+              <a href="#" class="side-nav-item">Label</a>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <h3 class="accordion-header" id="chartsHeader">
+          <button class="accordion-button collapsed side-nav-item" type="button" data-bs-toggle="collapse" data-bs-target="#chartsCollapse" aria-expanded="false" aria-controls="chartsCollapse">
+            <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000">
+              <path fill="currentColor" d="M525,76V475H924C911.542,260.257,739.743,88.458,525,76Zm49.842,56.774A375.23,375.23,0,0,1,867.226,425.158H574.842V132.774ZM475,76C251.987,88.937,75,273.878,75,500.135c0,0.052,0,.1,0,0.156C75.086,734.866,265.271,925,499.866,925a423.194,423.194,0,0,0,182.226-40.961L475,525V76ZM725.9,859.943C838.738,788.907,915.812,666.134,924,525H533Z"/>
+            </svg>
+            Charts
+          </button>
+        </h3>
+        <div id="chartsCollapse" class="accordion-collapse collapse" aria-labelledby="chartsHeader" data-bs-parent="#sideNavAccordion">
+          <div class="accordion-body">
+            <ul class="list-unstyled m-0">
+              <a href="#" class="side-nav-item">Label</a>
+              <a href="#" class="side-nav-item">Label</a>
+              <a href="#" class="side-nav-item">Label</a>
+              <a href="#" class="side-nav-item">Label</a>
+              <a href="#" class="side-nav-item">Label</a>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+## Collapsible with title
+
+{{< example >}}
+
+{{< /example >}}
+
+## Collapsible with content
+
+{{< example >}}
+
+{{< /example >}}
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
@@ -95,6 +95,7 @@
     - title: Popovers
     - title: Progress
     - title: Scrollspy
+    - title: Side navigation
     - title: Spinners
     - title: Stepped process
     - title: Sticker