Left-Side Nav-Bar Styling

Author: anmol372

assets/scss/_docs.scss

@@ -1,6 +1,6 @@
 .td-sidebar-nav .td-sidebar-link__page {
     color: #222;
-    font-weight: normal;
+    //font-weight: normal;
 }
 
 .of-docs__wrapper {
@@ -11,14 +11,14 @@
         list-style: disc;
         margin-left: 2rem;
     }
-    .td-sidebar-nav .td-sidebar-link__page {
+   .td-sidebar-nav .td-sidebar-link__page {
         font-weight: normal;
     }
     h1,h2,h3,h4,h5,h6 {
         color: var(--of--Color--brand--200);
         font-weight: 800;
         letter-spacing: 2px;
-        //margin: var(--of--spacer--md) 0 var(--of--spacer--sm);
+        margin: var(--of--spacer--md) 0 var(--of--spacer--sm);
 
         a:hover {
             text-decoration: none;

assets/scss/_sidebar-tree.scss

@@ -0,0 +1,155 @@
+//
+// Left side navigation
+//
+.td-sidebar-nav {
+    padding-right: 0.5rem;
+    margin-right: -15px;
+    margin-left: -15px;
+
+    @include media-breakpoint-up(md) {
+        @supports (position: sticky) {
+            // max-height: calc(100vh - 10rem);
+            max-height: calc(100vh - 4rem);
+            overflow-y: auto;
+        }
+    }
+
+
+    @include media-breakpoint-up(md) {
+        display: block !important;
+    }
+
+
+    &__section {
+        li {
+            list-style: none;
+        }
+
+        ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        @include media-breakpoint-up(md) {
+            & > ul {
+                padding-left: .5rem;
+            }
+        }
+
+
+        padding-left: 0;
+    }
+
+    &__section-title {
+        display: block;
+        //font-weight: $font-weight-medium;
+        font-weight: 550;
+
+        .active {
+            //font-weight: $font-weight-bold;
+            font-weight: 800;
+            color: $gray-900;
+        }
+
+        a {
+            color: $gray-700;
+        }
+    }
+
+    .td-sidebar-link {
+        display: block;
+        padding-bottom: 0.375rem;
+
+        &__page {
+            color: $gray-600;
+            font-weight: $font-weight-light;
+        }
+    }
+
+    a {
+        &:hover {
+            color: $blue;
+            text-decoration: none;
+        }
+
+        &.active {
+            //font-weight: $font-weight-bold;
+            font-weight: 800;
+            color: $gray-800;
+            
+        }
+    }
+
+    .dropdown {
+        a {
+            color: $gray-700;
+        }
+
+        .nav-link {
+             padding: 0 0 1rem;
+        }
+    }
+}
+
+.td-sidebar {
+    padding-top: 4rem;
+    margin-bottom: var(--of--spacer--md);
+    display:flex;
+    justify-content: center;
+    background: var(--of--color-white--200);
+    span {
+        margin-left: var(--of--spacer--md);
+        font-family: var(--of--font-family);
+    }
+    @include media-breakpoint-up(md) {
+        padding-top: var(--of--spacer--md);
+        padding-bottom: 4rem;
+        background-color: $td-sidebar-bg-color;
+        margin-bottom: 0;
+        padding-right: 1rem;
+        border-right: 1px solid $td-sidebar-border-color;
+    }
+
+    &__toggle {
+        line-height: 1;
+        color: $gray-900;
+        margin: 1rem;
+    }
+
+    &__search {
+        padding: 1rem 15px;
+        margin-right: -15px;
+        margin-left: -15px;
+    }
+
+    &__inner {
+        order: 0;
+
+        @include media-breakpoint-up(md) {
+            @supports (position: sticky) {
+                position: sticky;
+                top:71px;
+                z-index: 10;
+                height: calc(100vh - 6rem);
+            }
+        }
+
+
+        @include media-breakpoint-up(xl) {
+            flex: 0 1 320px;
+        }
+
+
+        .td-search-box {
+            width: 100%;
+        }
+
+        &__heading {
+            padding: var(--of--spacer--md);
+            background: var(--of--color-brand--300);
+            color: var(--of--color-white--100);
+            margin-left: -15px;
+            margin-right: -15px;
+        }
+    }
+}

assets/scss/_styles_project.scss

@@ -3,7 +3,6 @@
 @import "../../themes/docsy/assets/scss/support/mixins";
 
 @import "../../themes/docsy/assets/vendor/bootstrap/scss/bootstrap";
-//@import "../../themes/docsy/assets/vendor/bootstrap/scss/reboot";
 
 @import "../../themes/docsy/assets/vendor/Font-Awesome/scss/fontawesome.scss";
 @import "../../themes/docsy/assets/vendor/Font-Awesome/scss/solid.scss";
@@ -15,7 +14,7 @@
 @import "../../themes/docsy/assets/scss/blog";
 @import "../../themes/docsy/assets/scss/code";
 @import "../../themes/docsy/assets/scss/nav";
-@import "../../themes/docsy/assets/scss/sidebar-tree";
+//@import "../../themes/docsy/assets/scss/sidebar-tree";
 @import "../../themes/docsy/assets/scss/sidebar-toc";
 @import "../../themes/docsy/assets/scss/buttons";
 @import "../../themes/docsy/assets/scss/breadcrumb";
@@ -63,6 +62,7 @@ footer {
 @import "variables";
 @import "reset";
 @import "type";
+@import "sidebar-tree";
 
 //components
 @import "header";

content/en/docs/Glossary/Glossary.md renamed to content/en/docs/Glossary/_index.md

@@ -1,3 +1,4 @@
+
 ---
 title: "Glossary"
 linkTitle: "Glossary"