From 1904aa5a0a94ad4fa66412511b47515b77ba269b Mon Sep 17 00:00:00 2001
From: stephane brossier <stephane@kill-bill.org>
Date: Fri, 3 Apr 2026 16:33:21 -0700
Subject: [PATCH] Improve sidebar look and feel to match main doc style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Set sidebar background to white with blue pill highlight on hover/active items
- Use darker nav text color (--nav-color) and medium font weight (500) for top-level items
- Replace Aviate purple dot with a PREMIUM badge matching the main doc design
  (purple gradient, border, uppercase, exact same .badge-premium styles from killbill-docs)
- Add a horizontal separator between the core API items and the Aviate section
- Bump nokogiri (1.15.4 → 1.19.2) and related gems to fix build on macOS 15

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 Gemfile.lock                       |  6 ++---
 source/layouts/layout.erb          | 10 ++++++--
 source/stylesheets/screen.css.scss | 40 +++++++++++++++++++++++++++---
 3 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 0ad3c756..1b39c53d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -79,9 +79,9 @@ GEM
     middleman-syntax (3.3.0)
       middleman-core (>= 3.2)
       rouge (~> 3.2)
-    mini_portile2 (2.8.4)
+    mini_portile2 (2.8.9)
     minitest (5.19.0)
-    nokogiri (1.15.4)
+    nokogiri (1.19.2)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     padrino-helpers (0.15.3)
@@ -92,7 +92,7 @@ GEM
     parallel (1.23.0)
     parslet (2.0.0)
     public_suffix (5.0.3)
-    racc (1.7.1)
+    racc (1.8.1)
     rack (2.2.8)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index 1220e31c..1a2147e7 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -111,12 +111,18 @@ under the License.
         </div>
         <nav class="site-navigator">
           <ul class="site-navigator__menu">
+            <% aviate_separator_added = false %>
             <% toc_data(current_page.data.menu_items, current_page.data.current_page, page_content).each do |menu_item| %>
+              <% is_aviate = menu_item[:title].downcase.match("aviate") %>
+              <% if is_aviate && !aviate_separator_added %>
+                <% aviate_separator_added = true %>
+                <li class="site-navigator__separator"></li>
+              <% end %>
               <li>
                 <a href="<%= menu_item[:href]%>" class="site-navigator__item site-navigator__menu-item" data-title="<%= menu_item[:title] %>">
                   <span><%= menu_item[:content] %></span>
-                  <% if menu_item[:title].downcase.match("aviate") %>
-                    <span class="dot" style="background-color: #7C3AE3;"></span>
+                  <% if is_aviate %>
+                    <span class="badge-premium">Premium</span>
                   <% end %>
                 </a>
                 
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index 9343e1ba..0fce178d 100644
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -569,7 +569,7 @@ body.dark {
 
   * {
     text-decoration: none;
-    color: inherit;
+    color: var(--nav-color);
   }
 
   &__menu {
@@ -595,7 +595,7 @@ body.dark {
     gap: 10px;
     overflow: hidden;
     border-radius: 6px;
-    font-weight: 400;
+    font-weight: 500;
     font-size: 14px;
     line-height: 150%;
     text-decoration: none;
@@ -647,7 +647,9 @@ body.dark {
   }
 
   &__submenu-item {
-    font-size: 14px;
+    font-size: 13px;
+    font-weight: 400;
+    color: var(--nav-color);
   }
 
   &__footer {
@@ -685,6 +687,7 @@ body.dark {
     border-right: 1px solid var(--main-border-color);
     margin-left: calc(-#{$sidebar-width} + 15px);
     position: relative;
+    background-color: var(--main-bg);
   }
 
   &.sidebar-show {
@@ -1054,3 +1057,34 @@ body.dark {
   overflow: hidden; /* Prevent parent influence on size */
 }
 
+.badge-premium {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 18px;
+  color: #6D28D9;
+  background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
+  border: 1px solid #C4B5FD;
+  border-radius: 4px;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-transform: uppercase;
+}
+
+body.dark .badge-premium {
+  color: #C4B5FD;
+  background: linear-gradient(135deg, #2E1065, #3B1A8E);
+  border-color: #5B21B6;
+}
+
+.site-navigator__separator {
+  height: 1px;
+  background-color: var(--main-border-color);
+  margin: 8px 12px;
+  list-style: none;
+}
+