Add new sidebar

Author: dgarcia360

poetry.lock

@@ -13,9 +13,7 @@
 
 @functools.lru_cache(maxsize=None)
 def _get_navigation_expand_image(soup: BeautifulSoup) -> Tag:
-    retval = soup.new_tag(
-        "i", attrs={"class": "scylla-icon scylla-icon--chevron-right"}
-    )
+    retval = soup.new_tag("i", attrs={"class": "scylla-icon scylla-icon--expand"})
     return retval
 
 

sphinx_scylladb_theme/extensions/navigation.py

@@ -43,6 +43,7 @@ $color-border-admonition-warning: $color-cinnabar;
 $color-border-button: $color-martinique;
 $color-border-dropdown-contribute: $color-waikawa-gray;
 $color-border-footer-top: transparentize($color-black, 0.9);
+$color-border-sidebar-item: $color-royal-blue;
 $color-border-table: $color-alto;
 $color-border-table-header: $color-san-marino;
 $color-border-tabs-active: $color-dodger-blue;

sphinx_scylladb_theme/static/css/main.css

@@ -29,7 +29,7 @@
   }
 
   &__img {
-    opacity: 0.2;
+    opacity: 0.3;
     position: absolute;
     right: -18px;
     top: 20px;

sphinx_scylladb_theme/static/img/icons/icon-less.svg

@@ -113,6 +113,11 @@
     background-image: url("../img/icons/icon-knowledge-base.svg");
   }
 
+  &--less {
+    background-image: url("../img/icons/icon-less.svg");
+    filter: none;
+  }
+
   &--live-test {
     background-image: url("../img/icons/icon-live-test.svg");
   }
@@ -169,6 +174,11 @@
     background-image: url("../img/icons/icon-partners.svg");
   }
 
+  &--plus {
+    background-image: url("../img/icons/icon-plus.svg");
+    filter: none;
+  }
+
   &--pricing {
     background-image: url("../img/icons/icon-pricing.svg");
   }

sphinx_scylladb_theme/static/img/icons/icon-plus.svg

@@ -2,6 +2,7 @@
   display: none;
   background: $color-white;
   height: 100vh;
+  max-height: calc(100vh - #{$header-height});
   line-height: 24px;
   overflow-y: auto;
   position: fixed;
@@ -16,31 +17,21 @@
     overflow-wrap: break-word;
     max-width: 90%;
 
-    a {
-      color: $color-typography-base;
-      &:hover {
-        color: $color-typography-base-link;
-        font-weight: 400;
-      }
-    }
-
-    ul {
-      margin: 0;
-    }
-
     /* Override icons extension */
     label,
     label i {
       padding: 0;
       margin: 0;
     }
 
-    label .scylla-icon {
-      display: none;
-      height: 14px;
-      width: 8px;
-      filter: invert(81%) sepia(20%) saturate(128%) hue-rotate(177deg)
-        brightness(90%) contrast(89%);
+    label {
+      margin-left: 8px;
+    }
+
+    .scylla-icon--expand {
+      height: 17px;
+      width: 17px;
+      @extend .scylla-icon--plus;
     }
 
     .toctree-checkbox {
@@ -56,49 +47,53 @@
         ~ ul {
           display: block;
         }
-        ~ label i {
-          transform: rotate(90deg);
+        ~ label .scylla-icon--expand {
+          @extend .scylla-icon--less;
         }
       }
     }
 
     /* Override autogenerated toctree by Sphinx */
+    ul {
+      margin: 0;
+    }
+
+    a {
+      color: $color-typography-base;
+      &:hover {
+        color: $color-typography-base-link;
+        font-weight: 400;
+      }
+    }
+
     li {
-      align-items: center;
-      display: flex;
-      flex-wrap: wrap;
       list-style: none;
       padding: 0;
-      padding-bottom: 18px;
+      padding-bottom: 24px;
 
-      &.has-children.current-page {
-        padding-bottom: 0;
-      }
+      &.has-children {
+        a {
+          max-width: 80%;
+        }
 
-      > a {
-        flex: 1;
+        &.current {
+          padding-bottom: 20px;
+        }
       }
 
       &.current-page {
         & > a {
           color: $color-typography-base-link;
-          font-weight: 700;
-        }
-
-        & > .toctree-checkbox:checked ~ label i {
-          margin-right: 2px;
-          filter: invert(38%) sepia(71%) saturate(6789%) hue-rotate(231deg)
-            brightness(90%) contrast(95%);
         }
       }
 
       ul {
         width: 100%;
-        margin-top: 20px;
-        margin-bottom: 20px;
+        margin-top: 18px;
 
         li {
-          padding: 4px 0 4px 10px;
+          border-left: 1px solid $color-border-sidebar-item;
+          padding: 4px 0 4px 13px;
         }
 
         ul {
@@ -121,6 +116,10 @@
   }
 }
 
+.layout--has-banner .side-nav {
+  max-height: calc(100vh - #{$promo-banner-header-height});
+}
+
 @media screen and (min-width: $large) {
   .side-nav {
     display: block;
@@ -137,10 +136,6 @@
     &__content {
       padding-bottom: $footer-height;
       max-width: 100%;
-
-      label .scylla-icon {
-        display: block;
-      }
     }
 
     &__search {

src/css/base/variables/_colors.scss

@@ -70,7 +70,7 @@
       bottom: 0;
       top: 0;
       bottom: 0px;
-      opacity: 0.2;
+      opacity: 0.3;
     }
   }
 
@@ -117,7 +117,7 @@
       bottom: -12px;
       height: 140px;
       margin: 0;
-      opacity: 0.2;
+      opacity: 0.3;
       position: absolute;
       right: -5px;
     }