update

kb-markdown-importer/assets/css/frontend.css

@@ -15,6 +15,114 @@
     padding: 24px 20px 48px;
 }
 
+.kb-docs-app {
+    display: grid;
+    grid-template-columns: 320px minmax(0, 1fr);
+    gap: 32px;
+    align-items: start;
+}
+
+.kb-app-sidebar {
+    position: sticky;
+    top: 24px;
+    max-height: calc(100vh - 48px);
+    overflow: auto;
+    border: 1px solid var(--kb-border);
+    border-radius: 8px;
+    padding: 16px;
+    background: var(--kb-surface);
+}
+
+.kb-app-sidebar__brand {
+    margin-bottom: 14px;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.kb-app-sidebar__brand a {
+    color: var(--kb-text);
+    text-decoration: none;
+}
+
+.kb-app-sidebar__search {
+    margin-bottom: 16px;
+}
+
+.kb-app-sidebar__search .kb-search {
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+}
+
+.kb-app-sidebar__search .kb-search h2,
+.kb-app-sidebar__search .kb-search-results {
+    display: none;
+}
+
+.kb-app-nav,
+.kb-app-nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.kb-app-product {
+    padding: 10px 0;
+    border-top: 1px solid var(--kb-border);
+}
+
+.kb-app-product:first-child {
+    border-top: 0;
+}
+
+.kb-app-product__link,
+.kb-app-version-list a,
+.kb-app-page-list a {
+    display: block;
+    border-radius: 6px;
+    color: var(--kb-text);
+    text-decoration: none;
+}
+
+.kb-app-product__link {
+    padding: 8px 10px;
+    font-weight: 700;
+}
+
+.kb-app-version-list a {
+    padding: 6px 10px 6px 22px;
+    color: var(--kb-muted);
+    font-size: 14px;
+}
+
+.kb-app-page-list a {
+    padding: 5px 10px 5px 36px;
+    color: var(--kb-muted);
+    font-size: 13px;
+    line-height: 1.35;
+}
+
+.kb-app-product__link:hover,
+.kb-app-version-list a:hover,
+.kb-app-page-list a:hover,
+.kb-app-product.is-active > .kb-app-product__link,
+.kb-app-version-list li.is-active > a,
+.kb-app-page-list li.is-active > a {
+    background: var(--kb-accent-soft);
+    color: var(--kb-accent);
+}
+
+.kb-app-main {
+    min-width: 0;
+}
+
+.kb-docs-home > h1,
+.kb-docs-product > h1,
+.kb-docs-version > h1 {
+    margin-top: 0;
+}
+
 .kb-product-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -195,6 +303,15 @@
 }
 
 @media (max-width: 780px) {
+    .kb-docs-app {
+        grid-template-columns: 1fr;
+    }
+
+    .kb-app-sidebar {
+        position: static;
+        max-height: none;
+    }
+
     .kb-doc-layout {
         grid-template-columns: 1fr;
     }

kb-markdown-importer/assets/css/themes/obyte.css

@@ -68,12 +68,38 @@
 }
 
 .kb-product-card,
-.kb-search {
+.kb-search,
+.kb-app-sidebar {
     border-radius: var(--kb-radius);
     border-color: var(--kb-border);
     box-shadow: var(--kb-shadow);
 }
 
+.kb-app-sidebar {
+    background: rgba(255, 255, 255, 0.96);
+}
+
+.kb-app-sidebar__brand a {
+    font-family: var(--kb-font-strong);
+    color: var(--kb-text);
+}
+
+.kb-app-product__link,
+.kb-app-version-list a,
+.kb-app-page-list a {
+    border-radius: 11px;
+}
+
+.kb-app-product__link:hover,
+.kb-app-version-list a:hover,
+.kb-app-page-list a:hover,
+.kb-app-product.is-active > .kb-app-product__link,
+.kb-app-version-list li.is-active > a,
+.kb-app-page-list li.is-active > a {
+    background: rgba(0, 167, 230, 0.12);
+    color: var(--kb-primary-shade);
+}
+
 .kb-product-card h2 a {
     color: var(--kb-text);
     text-decoration: none;