Sidebar: Add image and fix scroll behaviour

Author: nginx-jack

assets/css/v2/style.css

@@ -247,6 +247,7 @@ textarea:not([rows]) {
   --grid-columns: 12;
 
   --sidebar-width: 22rem;
+  --sidebar-item-padding: 0.25rem 0.75rem;
   --content-max-width: 88rem;
 
   --main-col: minmax(34rem, 50rem);
@@ -418,12 +419,12 @@ ol li:last-child {
   left: 0;
   width: var(--sidebar-width);
   height: 100vh;
-  /* TODO replace with correct color var */
   border-right: 1px solid oklch(var(--color-divider));
   overflow: hidden;
   background: oklch(var(--color-background));
   box-sizing: border-box;
   transform: translateX(0);
+  padding: var(--space-s) 0 var(--space-s) var(--space-s);
 
   .sidebar__container {
     display: grid;
@@ -435,16 +436,18 @@ ol li:last-child {
       top: 0;
       background: oklch(var(--color-background));
       z-index: 1;
+      padding: var(--sidebar-item-padding);
 
       .sidebar__img {
-        height: 1.75rem;
+        height: 2rem;
       }
     }
 
     .sidebar__content {
       overflow-y: auto;
       min-height: 0;
-      width: 100%;
+      /* allows space for scrollbar */
+      width: calc(var(--sidebar-width) - 1rem);
       scrollbar-gutter: stable;
     }
   }
@@ -1043,7 +1046,7 @@ nav.sidebar.sidebar__mobile-open {
   }
 
   .sidebar__container button {
-    padding: 0.25rem 0.75rem;
+    padding: var(--sidebar-item-padding);
     justify-content: space-between;
   }
 
@@ -1105,7 +1108,7 @@ nav.sidebar.sidebar__mobile-open {
 
   .sidebar__link {
     display: block;
-    padding: 0.25rem 0.75rem;
+    padding: var(--sidebar-item-padding);
     margin: 2px 0 2px 0;
     border-radius: 5px 0 0 5px;
     color: oklch(0 0 0 / 0.75);

layouts/partials/sidebar-v2.html

@@ -22,7 +22,9 @@
 {{ $productName := index $productMap $productIdentifier }}
 
 <div class="sidebar__container">
-    <div class="sidebar__header">NGINX LOGO</div>
+    <div class="sidebar__header">
+         <img class="sidebar__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
+    </div>
     <div class="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>
         {{ partial "sidebar-list.html" (dict