(#1165) Upgrade to choco-theme v1

package.json

@@ -27,6 +27,6 @@
   },
   "dependencies": {
     "choco-astro": "0.2.3",
-    "choco-theme": "0.8.6"
+    "choco-theme": "1.0.0"
   }
 }

src/components/sidebar/SidebarListItem.astro

@@ -12,6 +12,6 @@ const { content, paddingClass } = Astro.props;
 const activeSlug = Astro.url.pathname;
 ---
 
-<li class={`nav-item nav-item-blue`}>
-    <a class={`nav-link ${paddingClass} ${isActivePage(content.slug, activeSlug) ? 'active active-page' : ''}`} href={content.slug}>{content.data.title}</a>
+<li class={`nav-item nav-item-tertiary-bg`}>
+    <a class={`nav-link py-c75 ${paddingClass} ${isActivePage(content.slug, activeSlug) ? 'active active-page' : ''}`} href={content.slug}>{content.data.title}</a>
 </li>

src/components/sidebar/SidebarSelf.astro

@@ -95,10 +95,10 @@ const isActiveChild = (doc: ContentTree) => {
 
 {content.filter(doc => doc.data.showInSidebar === true).map(doc => (
     doc.children && doc.children.length > 0 ? (
-        <li class={`nav-item nav-item-blue ${isActiveChild(doc) ? 'active' : ''}`}>
-            <div class={`nav-link nav-link-collapse d-flex ${isActiveChild(doc) ? 'active' : ''} ${isActivePage(doc.slug, activeSlug) ? 'active-page' : ''}`}>
-                <button class={`btn btn-collapse rounded-0 border-0 ${listPaddingClass(doc.data.depth)} ${isActiveChild(doc) ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" aria-expanded={`${isActiveChild(doc) ? 'true' : 'false'}`} aria-controls={slugId(`id-${doc.slug}`)} aria-label="collapse or expand navigation" data-bs-target={slugId(`#id-${doc.slug}`)}></button>
-                <a href={doc.slug}>{doc.data.title}</a>
+        <li class={`nav-item nav-item-tertiary-bg ${isActiveChild(doc) ? 'active' : ''}`}>
+            <div class={`nav-link nav-link-collapse d-flex align-items-center ${isActiveChild(doc) ? 'active' : ''} ${isActivePage(doc.slug, activeSlug) ? 'active-page' : ''}`}>
+                <button class={`btn btn-collapse rounded-0 border-0 fw-normal ps-3 py-c75 min-w-auto ${listPaddingClass(doc.data.depth)} ${isActiveChild(doc) ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" aria-expanded={`${isActiveChild(doc) ? 'true' : 'false'}`} aria-controls={slugId(`id-${doc.slug}`)} aria-label="collapse or expand navigation" data-bs-target={slugId(`#id-${doc.slug}`)}></button>
+                <a class="fw-normal py-c75" href={doc.slug}>{doc.data.title}</a>
             </div>
             <div class={`collapse ${isActiveChild(doc) ? 'show' : ''}`} id={slugId(`id-${doc.slug}`)}>
                 <ul class="navbar-nav">

src/layouts/Layout.astro

@@ -110,7 +110,7 @@ const hash = childProcess
                             <ThemeToggle />
                         </div>
                         <div id="docsearchResults" class="me-2 ms-md-0 top-50 start-50"></div>
-                        <button type="button" class="navbar-toggler btn btn-top-nav" data-bs-toggle="collapse" data-bs-target="#leftSidebar" aria-expanded="false" aria-controls="leftSidebar" aria-label="Toggle navigation">
+                        <button type="button" class="btn btn-outline-hover-secondary d-md-none" data-bs-toggle="collapse" data-bs-target="#leftSidebar" aria-expanded="false" aria-controls="leftSidebar" aria-label="Toggle navigation">
                             <i class="fa-solid fa-bars"></i>
                         </button>
                     </div>