Is it possible to change the contents of the sidebar based on directory of the current file?
#Change sidebar based on folder
glossy ermine
safe canyonBOT
Hi @glossy ermine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the extracts, it is possible to generate a sidebar with nested sections based on the structure of your directories. This can be achieved by creating a recursive function that generates the required nesting and layout.
Here is an example of how you might structure your sidebar items:
export type SidebarItem =
| {
name: string;
children?: SidebarItem[];
link?: never;
}
| {
name: string;
link?: Link;
children?: never;
};
const sidebar = [
{
name: "Backend",
children: [
{
name: "Database",
children: [
{
name: "Introduction",
link: "/backend/database",
},
{
name: "Dumps",
link: "/backend/database/dumps",
},
{
name: "Fixtures",
link: "/backend/database/fixtures",
},
],
},
],
},
];
And here is an example of a recursive function that generates the sidebar:
const generateSidebar = (sidebarItem: SidebarItem) => {
const { name } = sidebarItem;
if (typeof sidebarItem?.link === "string") {
const url = Astro.site?.pathname + sidebarItem.link;
return (
<li class="nav-link">
<a
href={url}
aria-current={currentPageMatch === sidebarItem.link ? "page" : false}
>
{name}
</a>
</li>
);
}
if (Array.isArray(sidebarItem?.children)) {
return (
<li class="nav-link">
<details>
<summary>
<h2>
{name}
<svg
xmlns="<http://www.w3.org/2000/svg">
viewBox="0 1 16 16"
width="16"
height="16"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
/>
</svg>
</h2>
</summary>
<ul>{sidebarItem.children.map((item) => generateSidebar(item))}</ul>
</details>
</li>
);
}
};
const sidebarLayout = sidebar.map(generateSidebar);
Please note that this is a general approach and you might need to adjust it based on your specific project structure and requirements.