docs: docs improvements

core/scss/_variables.scss

@@ -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-medium) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
 $headings-color: inherit !default;
 

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));
   }
 }
 

docs/content/emails/index.md

@@ -1,6 +1,7 @@
 ---
 title: Tabler 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,7 @@
 ---
 title: Tabler 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
 ---

docs/content/illustrations/index.md

@@ -1,6 +1,7 @@
 ---
 title: Tabler 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,7 @@
 ---
 title: Tabler UI
 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/scss/docs.scss

@@ -2,11 +2,13 @@
 
 :root {
   --docsearch-primary-color: var(--tblr-primary);
-  --docsearch-searchbox-background: var(--tblr-bg-surface);
+  --docsearch-searchbox-background: var(--tblr-bg-surface-secondary);
-  --docsearch-searchbox-focus-background: var(--tblr-bg-surface);
+  --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;
 }
@@ -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 {

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">
@@ -47,3 +47,41 @@
 		</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.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>