Enhance build scripts, update SCSS variables for typography, and improve documentation navigation

core/.build/copy-fonts.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+'use strict'
+
+import { existsSync, mkdirSync } from 'fs'
+import { copySync } from 'fs-extra/esm'
+import { fileURLToPath } from 'url'
+import { join, dirname } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const fromDir = join(__dirname, '..', 'node_modules/geist/dist/fonts')
+const toDir = join(__dirname, '..', 'fonts')
+
+// Create fonts directory if it doesn't exist
+if (!existsSync(toDir)) {
+	mkdirSync(toDir, { recursive: true })
+}
+
+// Copy geist-mono fonts
+const monoFrom = join(fromDir, 'geist-mono')
+const monoTo = join(toDir, 'geist-mono')
+
+if (existsSync(monoFrom)) {
+	if (!existsSync(monoTo)) {
+		mkdirSync(monoTo, { recursive: true })
+	}
+	
+	copySync(monoFrom, monoTo, {
+		dereference: true,
+	})
+	
+	console.log(`Successfully copied geist-mono fonts`)
+} else {
+	console.warn(`Warning: geist-mono fonts not found at ${monoFrom}`)
+}
+
+// Copy geist-sans fonts
+const sansFrom = join(fromDir, 'geist-sans')
+const sansTo = join(toDir, 'geist-sans')
+
+if (existsSync(sansFrom)) {
+	if (!existsSync(sansTo)) {
+		mkdirSync(sansTo, { recursive: true })
+	}
+	
+	copySync(sansFrom, sansTo, {
+		dereference: true,
+	})
+	
+	console.log(`Successfully copied geist-sans fonts`)
+} else {
+	console.warn(`Warning: geist-sans fonts not found at ${sansFrom}`)
+}
+

core/package.json

@@ -28,9 +28,11 @@
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
     "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
     "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
-    "copy": "pnpm run copy-img && pnpm run copy-libs",
+    "copy": "pnpm run copy-img && pnpm run copy-libs && pnpm run copy-fonts",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
     "copy-libs": "node .build/copy-libs.mjs",
+    "copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
+    "import-fonts": "node .build/import-fonts.mjs",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
@@ -148,7 +150,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.8"
+    "bootstrap": "5.3.8",
+    "geist": "^1.5.1"
   },
   "devDependencies": {
     "@hotwired/turbo": "^8.0.18",

core/scss/_core.scss

@@ -4,6 +4,7 @@
 @import 'props';
 
 @import 'fonts/webfonts';
+@import 'fonts/geist';
 
 @import 'layout/root';
 @import 'layout/animations';

core/scss/_variables.scss

@@ -389,8 +389,8 @@ $font-google-monospaced: null !default;
 $font-local: null !default;
 $font-icons: () !default;
 
-$font-family-sans-serif: ('Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
-$font-family-monospace: (Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
+$font-family-sans-serif: ('Geist', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
+$font-family-monospace: ('Geist Mono', Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
 $font-family-serif: 'Georgia', 'Times New Roman', times, serif !default;
 $font-family-comic: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
 
@@ -442,7 +442,7 @@ $font-weight-base: $font-weight-normal !default;
 $headings-font-family: null !default;
 $headings-font-style: null !default;
 $headings-line-height: 1.2 !default;
-$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$headings-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
 $headings-color: inherit !default;
 
@@ -805,8 +805,8 @@ $icon-color: var(--#{$prefix}gray-400) !default;
 // Code
 $code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default;
 $code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default;
-$code-font-size: $font-size-reative-sm !default;
-$code-line-height: 1.25rem !default;
+$code-font-size: $font-size-reative-md !default;
+$code-line-height: 1.7142857em !default;
 
 $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;

core/scss/fonts/_geist.scss

@@ -0,0 +1,184 @@
+// Geist Sans Font Family
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
+	font-weight: 100;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
+	font-weight: 200;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
+	font-weight: 800;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Geist Sans Variable Font
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Geist Mono Font Family
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
+	font-weight: 100;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
+	font-weight: 200;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
+	font-weight: 800;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Geist Mono Variable Font
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
+}
+

core/scss/ui/_markdown.scss

@@ -27,7 +27,7 @@ Markdown
     h4,
     h5,
     h6 {
-      font-weight: var(--#{$prefix}font-weight-bold);
+      font-weight: $headings-font-weight;
     }
 
     h2,

core/scss/ui/_nav.scss

@@ -17,12 +17,12 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    font-weight: var(--#{$prefix}font-weight-bold);
+    font-weight: var(--#{$prefix}nav-link-font-weight);
     color: var(--#{$prefix}nav-link-active-color);
   }
 
   &.nav-pills {
-    margin: 0 calc(-1 * $nav-link-padding-x);
+    margin: 0 calc(-1 * var(--#{$prefix}nav-link-padding-x));
   }
 }
 

core/scss/ui/_type.scss

@@ -122,7 +122,7 @@ pre {
   background: $pre-bg;
   color: $pre-color;
   border-radius: var(--#{$prefix}border-radius);
-  line-height: $line-height-base;
+  line-height: $code-line-height;
 
   @include scrollbar;
 

docs/content/emails/index.md

@@ -1,6 +1,8 @@
 ---
 title: Tabler Emails
+menu-title: Emails
 seoTitle: Tabler Emails - premium email templates
+icon: mail
 order: 4
 description: Customizable email templates for over 90 clients and devices.
 summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.

docs/content/icons/index.md

@@ -1,6 +1,8 @@
 ---
 title: Tabler Icons
+menu-title: Icons
 summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
+icon: ghost
 order: 2
 description: Over 5000 pixel-perfect icons for web design and development
 ---
@@ -9,5 +11,5 @@ description: Over 5000 pixel-perfect icons for web design and development
 
 Tabler Icons is a comprehensive icon library that features {{ iconsCount }}  high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
 
-To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
+To use Tabler Icons, you can visit their website at [Tabler Icons Official Website]({{ site.icons.link }}). From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
 

docs/content/illustrations/index.md

@@ -1,6 +1,8 @@
 ---
 title: Tabler Illustrations
+menu-title: Illustrations
 order: 3
+icon: paint
 description: Customizable illustrations for modern web and mobile designs.
 summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
 ---

docs/content/ui/index.md

@@ -1,6 +1,8 @@
 ---
 title: Tabler UI
+menu-title: Admin Template
 order: 1
+icon: layout
 description: Free and open source web application UI kit based on Bootstrap
 summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
 ---

docs/eleventy.config.mjs

@@ -274,9 +274,9 @@ export default function (eleventyConfig) {
 	eleventyConfig.addGlobalData("posthogHost", process.env.POSTHOG_HOST || "https://us.i.posthog.com");
 
 	const data = {
-		iconsCount: () => 123,
-		emailsCount: () => 123,
-		illustrationsCount: () => 123
+		iconsCount: () => 5963,
+		emailsCount: () => 80,
+		illustrationsCount: () => 105
 	};
 
 	for (const [key, value] of Object.entries(data)) {

docs/scss/docs.scss

@@ -2,11 +2,13 @@
 
 :root {
   --docsearch-primary-color: var(--tblr-primary);
-  --docsearch-searchbox-background: var(--tblr-bg-surface);
-  --docsearch-searchbox-focus-background: var(--tblr-bg-surface);
+  --docsearch-searchbox-background: var(--tblr-bg-surface-secondary);
+  --docsearch-searchbox-focus-background: var(--tblr-bg-surface-secondary);
   --docsearch-text-color: var(--tblr-body-text);
-  --docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
+  --docsearch-key-shadow: none;
   --docsearch-key-gradient: var(--tblr-bg-surface-secondary);
+  --docsearch-searchbox-shadow: 0 0 0 1px var(--tblr-border-color);
+  --docsearch-searchbox-focus-background: var(--tblr-bg-surface-tertiary);
 }
 
 .col-docs {
@@ -24,6 +26,11 @@
   box-shadow: 0 0 0 1px var(--tblr-border-color);
   font-weight: var(--tblr-font-weight-normal);
   transition: all 0.2s ease-in-out;
+  border-radius: var(--tblr-border-radius);
+}
+
+.DocSearch-Button-Placeholder {
+  font-size: var(--tblr-font-size);
 }
 
 .DocSearch-SearchBar {
@@ -32,6 +39,11 @@
   background-color: var(--tblr-bg-surface) !important;
 }
 
+.DocSearch-Search-Icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .DocSearch-Hit-source {
   background: none !important;
 }
@@ -45,7 +57,7 @@
   border: 1px solid var(--tblr-border-color) !important;
   color: var(--tblr-body-color) !important;
   box-shadow: none !important;
-  
+
   &:hover {
     background-color: var(--tblr-bg-surface-tertiary) !important;
     border-color: var(--tblr-border-color-active) !important;
@@ -88,7 +100,7 @@
 
 .DocSearch-Input {
   color: var(--tblr-body-color) !important;
-  
+
   &::placeholder {
     color: var(--tblr-muted) !important;
   }
@@ -100,8 +112,20 @@
   box-shadow: none !important;
 }
 
+.DocSearch-Button-Keys {
+  min-width: 0;
+  gap: .25rem;
+  margin-right: .25rem;
+}
+
 .DocSearch-Button-Key {
   top: 0;
+  box-shadow: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  font-size: var(--tblr-font-size);
 }
 
 .DocSearch-Container {
@@ -114,13 +138,13 @@
   }
 }
 
-.example > .modal,
-.example > .offcanvas {
+.example>.modal,
+.example>.offcanvas {
   display: block !important;
   position: relative !important;
 }
 
-.example > .offcanvas-backdrop {
+.example>.offcanvas-backdrop {
   position: absolute !important;
 }
 
@@ -133,4 +157,4 @@ code {
   ::selection {
     background: var(--tblr-primary);
   }
-}
+}

docs/vercel.json

@@ -1,5 +1,12 @@
 {
   "trailingSlash": false,
+  "redirects": [
+    {
+      "source": "/",
+      "destination": "/ui",
+      "permanent": false
+    }
+  ],
   "rewrites": [
     {
       "source": "/stats/js/script.js",
@@ -17,6 +24,7 @@
       "source": "/eat/:path(.*)",
       "destination": "https://eu.i.posthog.com/:path*"
     },
+    
     {
       "source": "/(.*)",
       "destination": "/error-404.html"

shared/e11ty/filters.mjs

@@ -29,6 +29,14 @@ export function appFilters(eleventyConfig) {
 			.replace(/[\r\n]/g, '
');
 	});
 
+	eleventyConfig.addFilter("strip_trailing_slash", (text) => {
+		return text?.replace(/\/$/, '');
+	});
+
+	eleventyConfig.addFilter("strip_leading_slash", (text) => {
+		return text?.replace(/^\//, '');
+	});
+
 	eleventyConfig.addFilter("contains", (items, item) => {
 		return items && Array.isArray(items) && items.includes(item);
 	});
@@ -138,6 +146,11 @@ export function appFilters(eleventyConfig) {
 		return 0;
 	})
 
+	eleventyConfig.addFilter("debug", function (elem) {
+		console.log(elem);
+		return elem;
+	})
+
 	eleventyConfig.addFilter("first", function (elem) {
 		if (elem instanceof Object) {
 			return elem[Object.keys(elem)[0]];

shared/includes/docs/menu.html

@@ -1,22 +1,33 @@
 {% assign menu = collections.docs | collection-tree %}
+{% assign current-section = page.url | split: '/' | slice: 1, 1 | prepend: '/' | append: '/' %}
+{% for level1 in menu %}
+{% if current-section == level1.url %}
+{% assign current-menu = level1.children %}
+{% endif %}
+{% endfor %}
 
+{% if current-menu %}
 <nav class="space-y space-y-5" id="menu">
-	{% for level1 in menu %}
+	{% for level1 in current-menu %}
 	<div>
 		<div class="subheader mb-2">
 			{{ level1.data.title }}
 		</div>
-		{% if level1.children %}
 		<nav class="nav nav-vertical">
 			{% for level2 in level1.children %}
 			<div>
-				<a class="nav-link{% if page.url contains level2.url %} active{% endif %}"{% if level2.children %} href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}" aria-expanded="{% if page.url contains level2.url %}true{% else %}false{% endif %}"{% endif %}>{{ level2.data.title }}{% if level2.children %} <span class="nav-link-toggle"></span>{% endif %}</a>
-
+				<a class="nav-link{% if page.url contains level2.url %} active{% endif %}" {% if level2.children %}
+					href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}"
+					aria-expanded="{% if page.url contains level2.url %}true{% else %}false{% endif %}" {% endif
+					%}>{{ level2.data.title }}{% if level2.children %} <span class="nav-link-toggle"></span>{% endif %}</a>
+		
 				{% if level2.children %}
-				<nav class="nav nav-vertical collapse{% if page.url contains level2.url %} show{% endif %}" id="collapse-{{ level2.url | slug }}">
+				<nav class="nav nav-vertical collapse{% if page.url contains level2.url %} show{% endif %}"
+					id="collapse-{{ level2.url | slug }}">
 					{% for level3 in level2.children %}
 					<div>
-						<a class="nav-link{% if page.url == level3.url %} active{% endif %}" href="{{ level3.url }}">{{ level3.data.title }}</a>
+						<a class="nav-link{% if page.url == level3.url %} active{% endif %}"
+							href="{{ level3.url }}">{{ level3.data.title }}</a>
 					</div>
 					{% endfor %}
 				</nav>
@@ -24,7 +35,7 @@
 			</div>
 			{% endfor %}
 		</nav>
-		{% endif %}
 	</div>
 	{% endfor %}
-</nav>
+</nav>
+{% endif %}

shared/includes/docs/navbar.html

@@ -1,7 +1,7 @@
 <div class="navbar navbar-expand sticky-top">
 	<div class="container">
 		<div class="row flex-fill align-items-md-center">
-			<div class="col">
+			<div class="col-auto">
 				<div class="d-flex align-items-center gap-4">
 					<a href="{{ page.url | relative }}" class="navbar-brand navbar-brand-autodark gap-4">
 						{% include "docs/logo.html" %}
@@ -11,7 +11,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="d-none d-md-block col">
+			<div class="d-none d-md-block col-3">
 				<div id="docsearch"></div>
 			</div>
 			<div class="col d-flex">
@@ -46,4 +46,42 @@
 			</div>
 		</div>
 	</div>
+</div>
+
+{% assign menu = collections.docs | collection-tree %}
+<div class="navbar-expand-md">
+	<div class="container">
+		<div class="navbar">
+			<div class="row flex-column flex-md-row flex-fill align-items-center">
+				<div class="col">
+					<nav>
+						<ul class="navbar-nav">
+							{% for level1 in menu %}
+							<li class="nav-item{% if page.url contains level1.url %} active{% endif %}">
+								<a href="{{ level1.url }}" class="nav-link">
+									{% if level1.data.icon %}<span class="nav-link-icon">{% include "ui/icon.html" icon=level1.data.icon %}</span>{% endif %}
+									<span class="nav-link-title">{{ level1.data.menu-title }}</span>
+								</a>
+							</li>
+							{% endfor %}
+						</ul>
+					</nav>
+				</div>
+				<div class="col-auto">
+					<nav>
+						<ul class="navbar-nav">
+							{% for link in docs-links %}
+							<li class="nav-item">
+								<a href="{{ link.url }}" class="nav-link" target="_blank">
+									<span class="nav-link-icon">{% include "ui/icon.html" icon=link.icon %}</span>
+									<span class="nav-link-title">{{ link.title }}</span>
+								</a>
+							</li>
+							{% endfor %}
+						</ul>
+					</nav>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>

shared/layouts/docs/default.html

@@ -81,7 +81,7 @@
 	<link rel="stylesheet" href="/css/docs{% if environment != 'development' %}.min{% endif %}.css" />
 </head>
 
-<body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
+<body class="d-flex flex-column bg-surface">
 	<script src="/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js"></script>
 	<!-- BEGIN NAVBAR  -->
 	<header role="banner">
@@ -93,16 +93,8 @@
 		<div class="container">
 			<div class="row g-0">
 				<div class="col-docs d-none d-lg-block border-end">
-					<div class="py-4">
+					<div class="py-4 pe-2">
 						<div class="space-y space-y-5">
-							<div class="nav nav-vertical">
-								{% for link in docs-links %}
-								<a href="{{ link.url }}" class="nav-link" target="_blank">
-									<span class="border me-2 rounded p-1">{% include "ui/icon.html" icon=link.icon %}</span>
-									{{ link.title }}
-								</a>
-								{% endfor %}
-							</div>
 							<div class="flex-fill">
 								{% include "docs/menu.html" %}
 							</div>