♻️ Make Nav 1 level of depth (#1135)

Changes
- Remove top level grouping
- Remove disclosures

Test plan: Expect site to have new nav with no disclosures.

src/components/AppShell.astro

@@ -9,7 +9,7 @@ const navPath = path.endsWith('/') ? path.slice(0, -1) : path;
 <div class="flex h-screen w-screen">
   <Header path={navPath} navigation={navigation} />
   <DesktopNavigation path={navPath} navigation={navigation} />
-  <main class="flex min-h-full w-full flex-col pt-16 md:pl-64 xl:pl-80">
+  <main class="flex min-h-full w-full flex-col pt-16 md:pl-64">
     <slot />
   </main>
 </div>

src/components/DesktopNavigation.astro

@@ -4,7 +4,7 @@ const { path, navigation } = Astro.props;
 ---
 <div
   id="sidebar"
-  class="hidden md:fixed md:flex md:h-full md:w-64 md:flex-col xl:w-80"
+  class="hidden md:fixed md:flex md:h-full md:w-64 md:flex-col"
 >
   <div id="sidebar-content" class="mt-16 flex grow flex-col overflow-y-auto border-r border-gray-200 bg-white py-5">
     <Navigation

src/components/Header.astro

@@ -8,7 +8,7 @@ const { path, navigation } = Astro.props;
 <centrapay-header>
   <header class="fixed inset-x-0 z-10 flex h-16 shrink-0 bg-white shadow">
     <div class="flex w-full items-center justify-between">
-      <div class="flex w-full items-center justify-between pr-2 md:pr-4">
+      <div class="flex w-full items-center pr-2 md:pr-4">
         <a
           href="/"
           class="flex size-16 items-center justify-center bg-content-primary ring-focus-ring focus:outline-none focus:ring-2 focus:ring-inset"

src/components/Navigation.vue

@@ -1,33 +1,62 @@
 <template>
   <nav
-    class="w-full space-y-1 px-4"
+    class="w-full px-2"
     aria-label="Sidebar"
   >
     <ul role="menubar">
       <div
         v-for="item in navigation.items"
         :key="item.title"
       >
-        <PrimarySidebarDisclosure
+        <li class="type-overline px-4 font-bold">
+          {{ item.title }}
+        </li>
+        <div
           v-if="item.children?.length"
-          :navigation-item="item"
-          :path="path"
-        />
-        <PageLinks
-          v-else
-          :navigation-item="item"
-          :path="path"
-          :level="1"
-        />
+          class="pb-4 pt-2"
+        >
+          <div
+            v-for="navigationChild in item.children"
+            :key="navigationChild.title"
+            role="menuitem"
+          >
+            <li
+              role="presentation"
+              class="group rounded-md hover:bg-gray-100"
+              :class="{ 'bg-gray-100': path === navigationChild.path}"
+            >
+              <a
+                role="menuitem"
+                class="block py-2 pl-4 text-xs text-gray-600"
+                :href="navigationChild.path"
+              >
+                {{ navigationChild.title }}
+              </a>
+            </li>
+            <div v-if="navigationChild.headings?.length && path === navigationChild.path">
+              <li
+                v-for="navigationGrandchild in navigationChild.headings"
+                :key="navigationGrandchild.title"
+                role="presentation"
+                class="group rounded-md hover:bg-gray-50"
+              >
+                <a
+                  role="menuitem"
+                  class="block py-2 pl-6 text-xs text-gray-600"
+                  :href="`${navigationChild.path}#${navigationGrandchild.slug}`"
+                >
+                  {{ navigationGrandchild.text }}
+                </a>
+              </li>
+            </div>
+          </div>
+        </div>
       </div>
     </ul>
   </nav>
 </template>
 
 <script setup>
-import PageLinks from './PageLinks.vue';
-import PrimarySidebarDisclosure from './PrimarySidebarDisclosure.vue';
-
 const props = defineProps({
   path: { type: [String, undefined], required: false, default: undefined },
   navigation: { type: Object, required: true },

src/components/SiteSearch.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="flex h-10 items-center space-x-3 overflow-hidden rounded-none border-gray-300 bg-white p-0 text-left ring-0 focus:outline-none focus:ring-0 md:mr-4 md:w-80 md:rounded-lg md:border md:px-4 md:pr-0 md:shadow-sm"
+    class="flex h-10 items-center space-x-3 overflow-hidden rounded-none border-gray-300 bg-white p-0 text-left ring-0 focus:outline-none focus:ring-0 md:mr-4 md:w-64 md:rounded-lg md:border md:px-4 md:pr-0 md:shadow-sm"
     @click="openCommandPalette"
   >
     <SearchLogo class="size-6 md:size-4" />

src/content/api/account-memberships.mdx

@@ -2,7 +2,7 @@
 title: Account Memberships
 description: Account Memberships model and related endpoints
 nav:
-  path: API/Accounts
+  path: Accounts
   order: 2
 ---
 import Properties from '../../components/Properties.astro';

src/content/api/accounts.mdx

@@ -2,7 +2,7 @@
 title: Accounts
 description: Account model and related endpoints
 nav:
-  path: API/Accounts
+  path: Accounts
   order: 1
 ---
 import Properties from '../../components/Properties.astro';

src/content/api/asset-activities.mdx

@@ -2,7 +2,7 @@
 title: Asset Activities
 description: Asset Activity models and related endpoints
 nav:
-  path: API/Assets
+  path: Assets
   order: 7
 ---
 
@@ -217,12 +217,12 @@ This records the sending of an asset. Used when activityType is `sent`. This ext
   ## List Asset Activities
 
   Returns a [paginated](/api/pagination) list of [Asset Activities](#asset-activity-model).
-  
+
   ### Query Parameters
 
   <Properties>
     <Property name="bankAccountId" type="string">
       The bankAccountId of the assets that activities should be returned for.
     </Property>
   </Properties>
-</Endpoint>
+</Endpoint>