feat: Update sidebar and navigation

- Changed the class name of `aside` to `nav` in `NavLink.astro.scss`
- Updated the structure and class names in `Sidebar.astro`
- Added ARIA attributes for accessibility in `Sidebar.astro`
- Adjusted font size and added font weight to `.navbar-brand` in `Sidebar.astro.scss`
- Removed unnecessary styles from `.navbar-brand` in `Sidebar.astro.scss`
- Added ARIA attributes for accessibility in footer section of `Sidebar.astro`
- Updated styles for unordered list in footer section of `Sidebar.astro.scss`
- Added role, aria-label, and aria-expanded attributes to the root div element in `VaultNavTree.astro`
- Passed level prop to child components recursively in `VaultNavTree.astro`

nodsoft_moltenobsidian_web/src/components/NavLink.astro.scss

@@ -1,6 +1,6 @@
 @use "../styles/variables" as *;
 
-aside > nav {
+nav > .vault-nav {
   font-size: 0.9rem;
   padding-bottom: 0.2rem;
 

nodsoft_moltenobsidian_web/src/components/Sidebar.astro

@@ -12,25 +12,24 @@ import { VaultManifest } from "moltenobsidian-ssg-client/vault-manifest";
 
 export const manifestClient = VaultManifestClient.fromManifest(manifest as VaultManifest);
 
-
 ---
 
-<aside class="collapsed">
-	<h2 class="navbar-brand">
+<nav class="collapsed" aria-label="sidebar">
+	<div class="navbar-brand">
 		<Image src={logo} alt="MoltenObsidian Logo" />
-		<a style="flex-grow: 1;" href="/">{SITE_TITLE}</a>
-		<button class="sidebar-toggler" onclick="toggleSidebar">
-			<span class="sidebar-toggler-icon"></span>
+		<a style="flex-grow: 1;" href="">{SITE_TITLE}</a>
+
+		<button type="button" class="sidebar-toggler" onclick="toggleSidebar">
+			<span aria-hidden="true" class="sidebar-toggler-icon"></span>
 		</button>
-
-	</h2>
+	</div>
 
-	<nav>
+	<div role="presentation" class="vault-nav" aria-label="Vault navigation">
 		<VaultNavTree tree={buildVaultTree(manifestClient.routingTable)} />
-	</nav>
+	</div>
 
-	<footer>
-		<hr style="opacity: 0.2; margin-bottom: 2rem;" />
+	<footer role="contentinfo" aria-label="footer">
+		<hr aria-hidden="true" style="opacity: 0.2; margin-bottom: 2rem;" />
 
 		<div class="lead" style="display: flex; align-items: center; gap: 0.5rem">
 			<b>MoltenObsidian</b>
@@ -41,24 +40,20 @@ export const manifestClient = VaultManifestClient.fromManifest(manifest as Vault
 			That's right. Everything you read here is powered by MoltenObsidian SSG,
 			using <a rel="external" target="_blank" href="https://astro.build">Astro</a>.
 		</small>
-
-
-		<nav>
-			<ul>
+
+			<ul aria-label="links">
 				<li><a target="_blank" rel="external" href="https://github.com/Nodsoft/MoltenObsidian">GitHub</a></li>
+        <li><a target="_blank" rel="external" href="https://www.nuget.org/packages/Nodsoft.MoltenObsidian">NuGet</a></li>
 			</ul>
-		</nav>
 
-		<small>
-			© 2022-2023 Nodsoft Systems, MIT License
-		</small>
+		<small aria-description="copyright">© 2022-2023 Nodsoft Systems, MIT License</small>
 	</footer>
-</aside>
+</nav>
 
 <script>
 	// Sidebar toggler
 	function toggleSidebar() {
-		document.querySelector('aside').classList.toggle('collapsed');
+		document.querySelector('.sidebar').classList.toggle('collapsed');
 	}
 
 	// register button click handler

nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss

@@ -6,8 +6,9 @@ header {
   padding: 0 1em;
 }
 
-aside {
+nav {
   display: flex;
+  gap: 2rem;
   flex-direction: column;
   margin: 0;
   padding: 1rem;
@@ -31,10 +32,11 @@ aside {
       height: initial;
 
       .navbar-brand {
+        font-weight: bolder;
         margin-bottom: 0;
       }
 
-      nav, footer {
+      .vault-nav, footer {
         display: none;
         visibility: hidden;
       }
@@ -50,6 +52,7 @@ aside {
     flex-direction: row;
     gap: 1rem;
     align-items: center;
+    font-size: 1.5rem;
 
     img {
       // Fit to parent
@@ -63,7 +66,7 @@ aside {
     }
   }
 
-  nav {
+  .vault-nav {
     display: flex;
     flex-direction: column;
     overflow-y: auto;
@@ -89,7 +92,7 @@ aside {
 
 
 .navbar-brand {
-  font-size: 1.5rem;
+
 }
 
 
@@ -120,17 +123,14 @@ footer {
 
   color: white;
   opacity: 0.8;
-
-  nav {
-    margin-top: 1rem;
-
-    ul {
-      display: flex;
-      flex-direction: row;
-      gap: 1rem;
-      padding: 0;
-    }
-
+
+  ul {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    padding: 0;
+
     a {
       color: white;
       opacity: 0.8;

nodsoft_moltenobsidian_web/src/components/vault/VaultNavTree.astro

@@ -28,15 +28,22 @@ function sortFoldersFirst(a: LeafNode, b: LeafNode) {
   }
 }
 
-const { isRoot= true, tree, } = Astro.props;
+const { isRoot= true, tree, level = 1 } = Astro.props;
 ---
 
-<div id={tree.name} class="nav-category">
-    { isRoot === true ? undefined : <NavLink href={tree.children.some(child => child.isIndex) ? tree.path : false} class="vault-folder-title">{tree.name}</NavLink> }
+<div id={tree.name ?? '_root'} 
+     class="nav-category" 
+     role="group" 
+     aria-label={tree.name && tree.name !== '' ? tree.name : 'root'}
+     aria-expanded="true"
+>
+    { isRoot === true 
+      ? undefined 
+      : <NavLink href={tree.children.some(child => child.isIndex) ? tree.path : false} class="vault-folder-title">{tree.name}</NavLink> }
 
     {tree.children.sort(sortFoldersFirst).map((child) => (
       child.type === "folder" 
-        ? <Astro.self tree={child} isRoot="false" />
+        ? <Astro.self tree={child} isRoot="false" level={level+1} />
         : <NavLink href={child.path.replace(/\.md$/i, '')} class="vault-item-title" data-index-note={child.isIndex}>
             {child.name.replace(/\.md$/i, '')} 
         </NavLink>

nodsoft_moltenobsidian_web/src/layouts/Layout.astro

@@ -19,11 +19,6 @@ const baseHeadTitle = title ? `${title} - ${SITE_TITLE}` : SITE_TITLE;
 	<!--suppress HtmlRequiredTitleElement, included in BaseHead -->
 	<head>
 		<BaseHead title={baseHeadTitle} description={description} />
-
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
 	</head>
 
 	<body class="flex-row-lg">