Adjust classes for spacing
MODIFY
src/components/docs/menu-section.svelte
src/components/docs/menu-section.svelte
}
.submenu {
+ @apply ml-6 mt-4;
font-size: var(--p-medium);
line-height: var(--x-small);
}
<li class:isActiveSection class="menu-item">
<MenuLink href={menuItem.path} class="text-h6">{menuItem.title}</MenuLink>
{#if menuItem.subMenu && isActiveSection}
- <ul class="ml-6 mt-4 submenu">
+ <ul class="submenu">
{#each menuItem.subMenu as sub}
<li>
<MenuLink href={sub.path}>{sub.title}</MenuLink>

MODIFY
src/components/docs/menu.svelte
src/components/docs/menu.svelte
];
</script>
+<style>
+ .menu {
+ @apply p-6;
+ }
+</style>
+
<div class="inline-block">
- <ul class="p-6 space-y-6">
+ <ul class="menu space-y-6">
{#each MENU as menuItem}
<MenuSection {menuItem} />
{/each}

MODIFY
src/components/docs/search.svelte
src/components/docs/search.svelte
src="https://cdn.jsdelivr.net/npm/docsearch.js@{docSearchJSVersion}/dist/cdn/docsearch.min.js"></script>
</svelte:head>
-<div class="w-full mb-24">
+<div class="w-full mb-12">
<label for={docSearchInputSelector} class="sr-only">Search</label>
<div class="relative">
<input
type="search"
placeholder="Search"
id={docSearchInputSelector}
- class="block w-full pl-16 pr-3 py-4 border border-transparent rounded-3xl leading-5 bg-white text-gray-600 placeholder-gray-500 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900"
+ class="block w-full pl-11 pr-3 py-2 border border-transparent rounded-3xl leading-5 bg-white text-gray-600 placeholder-gray-500 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900"
/>
</div>
</div>

MODIFY
src/routes/docs/_layout.svelte
src/routes/docs/_layout.svelte
import Search from "../../components/docs/search.svelte";
</script>
-<div class="flex mx-auto max-w-row">
+<div class="flex mx-auto max-w-row px-8 w-full">
<div class="w-2/5">
<Menu />
</div>

Adjust classes for spacing