Add collapse back to nav subsections and increase ToC height (#69)

* make ToC height larger, add collapse to sub sections in main nav

* fix the collapse animation

* implementing nav feedback, chevrons to right

* remove gap between top level nav items

* use an optional partial for the logo url

Author: colegoldsmith

src/css/components/collapse.css

@@ -1,19 +1,22 @@
 @layer components {
-  .collapse:not(td):not(tr):not(colgroup) {
-    @apply visible;
+  .collapse {
+    @apply !visible grid;
   }
 
-  .collapse {
-    @apply relative grid overflow-hidden;
+  .collapse > .collapse-content {
+    @apply relative col-start-1 row-start-2 grid min-h-0;
 
-    grid-template-rows: auto 0fr;
+    grid-template-rows: 0fr;
     transition: grid-template-rows 0.2s;
   }
 
+  .collapse > .collapse-content > * {
+    @apply overflow-hidden;
+  }
+
   .collapse-title,
   .collapse > input[type="checkbox"],
-  .collapse > input[type="radio"],
-  .collapse-content {
+  .collapse > input[type="radio"] {
     @apply col-start-1 row-start-1;
   }
 
@@ -22,28 +25,8 @@
     @apply cursor-pointer appearance-none opacity-0;
   }
 
-  .collapse-content {
-    @apply invisible col-start-1 row-start-2 min-h-0;
-
-    transition: visibility 0.2s;
-  }
-
-  .collapse[open],
-  .collapse-open,
-  .collapse:focus:not(.collapse-close) {
-    grid-template-rows: auto 1fr;
-  }
-
-  .collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
-  .collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
-    grid-template-rows: auto 1fr;
-  }
-
-  .collapse[open] > .collapse-content,
-  .collapse-open > .collapse-content,
-  .collapse:focus:not(.collapse-close) > .collapse-content,
-  .collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content,
-  .collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content {
-    @apply visible min-h-fit;
+  .collapse > input[type="checkbox"]:checked ~ .collapse-content,
+  .collapse > input[type="radio"]:checked ~ .collapse-content {
+    grid-template-rows: 1fr;
   }
 }

src/partials/nav-tree.hbs

@@ -1,28 +1,29 @@
 {{#if navigation.length}}
-<ul{{#if (greater (or ./level 0) 1)}} class="ml-3 pl-2 border-l"{{/if}}>
+<ul>
   {{#each navigation}}
   {{#if ./content}}
-  {{#if (and (eq (or ../level 0) 0) ./items.length)}}
+  {{#if ./items.length}}
   <li class="collapse" data-depth="{{or ../level 0}}">
     <input type="checkbox" class="peer z-10" {{#if (navTreeContainsUrl ./items @root.page.url)}} checked{{/if}} /> 
-    <div class="collapse-title inline-block text-overline py-2 peer-checked:[&_i]:rotate-90">
-      <i class="block float-left mr-1 material-icons transition-transform">chevron_right</i>
+    <div class="collapse-title rounded flex items-start py-1 px-2 peer-checked:[&_i]:rotate-180 peer-hover:bg-level2{{#if (greater (or ../level 0) 0)}} text-caption{{else}} text-overline py-2{{/if}}">
       {{{./content}}}
+      <i class="material-icons text-lg text-tertiary transition-transform ml-[0.15em]">expand_more</i>
     </div>
-    <div class="collapse-content ml-2 pl-2 border-l"> 
+    <div class="collapse-content ml-3 pl-2 border-l"> 
       {{> nav-tree navigation=./items level=(increment ../level)}}
     </div>
   </li>
   {{else}}
   <li data-depth="{{or ../level 0}}">
     {{#if ./url}}
      <a class="flex rounded !no-underline text-body-small text-primary py-1 px-2 hover:bg-level2
+      {{~#if (greater (or ../level 0) 1)}} text-tertiary{{~/if}}
       {{~#if (eq ./url @root.page.url)}} text-link font-semibold{{~/if}}" 
       href="{{~#if (eq ./urlType 'internal')}}{{{relativize ./url}}}{{~else}}{{{./url}}}{{~/if}}">
       {{{./content}}}
     </a>
     {{else}}
-    <span class="flex rounded text-overline text-tertiary py-1 px-2">
+    <span class="flex rounded text-body-small text-tertiary py-1 px-2">
       {{{./content}}}
     </span>
     {{/if}}

src/partials/nav.hbs

@@ -1,5 +1,5 @@
 {{#with page.navigation}}
-<nav id="side-nav" class="h-full bg-level1 overflow-y-auto flex flex-col w-[17rem] p-2" 
+<nav id="side-nav" class="h-full bg-level1 overflow-y-scroll flex flex-col w-[18.5rem] py-4 px-2" 
   {{#if page.component}} data-component="{{page.component.name}}"
     data-version="{{page.version}}" {{/if}}>
       {{> nav-tree navigation=this}}

src/partials/navbar.hbs

@@ -1,13 +1,13 @@
 <nav
-  class="bg-body fixed top-0 z-40 flex h-20 w-[100vw] flex-auto items-center gap-2 lg:gap-4 border-b px-3 lg:px-6"
+  class="bg-body fixed top-0 z-40 flex h-20 w-[100vw] flex-auto items-center gap-2 lg:gap-4 border-b px-4"
 >
   <label
     for="nav-drawer-input"
     class="btn btn-neutral btn-plain btn-icon drawer-button lg:hidden"
   >
     <i class="icon material-icons">menu_open</i>
   </label>
-  <a href="{{{or site.url siteRootPath}}}">
+  <a href="{{#> logo-url}}{{{or site.url siteRootPath}}}{{/logo-url}}">
     {{> logo}}
   </a>
   <div class="DocSearch" id="docsearch"></div>

src/partials/toc.hbs

@@ -1,10 +1,10 @@
 {{#unless (or (eq page.layout 'full') (eq page.layout 'landing'))}}
 <aside
-  class="toc sidebar peer overflow-y-auto sticky top-[10rem] hidden h-[calc(100vh-24rem)] w-[20rem] xl:flex xl:flex-col xl:col-start-2"
+  class="toc sidebar peer sticky top-[6rem] hidden h-[calc(100vh-10rem)] mb-[14rem] w-[20rem] xl:flex xl:flex-col xl:col-start-2"
   data-title="{{{or page.attributes.toctitle 'Contents'}}}"
   data-levels="{{{or page.attributes.toclevels 2}}}"
 >
-  <div class="toc-menu-container">
+  <div class="toc-menu-container overflow-y-auto">
     <div class="toc-menu"></div>
     {{#if page.attributes.tags}}
     <h3 class="!my-2 text-h3">Tags</h3>