feat(docs): some sidebar polishing

sek-consulting · Apr 22, 2024 · a32ca85 · a32ca85
1 parent 52ed04a
commit a32ca85
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/apps/docs/src/components/sidebar.tsx b/apps/docs/src/components/sidebar.tsx
@@ -1,33 +1,44 @@
-import { For } from "solid-js"
+import { For, Match, Switch } from "solid-js"
 
 import { useLocation } from "@solidjs/router"
 
 import { docsConfig } from "~/config/docs"
 import { cn } from "~/lib/utils"
+import { Badge } from "~/registry/ui/badge"
 
 export default function Sidebar() {
   const location = useLocation()
 
   return (
-    <aside class="hidden w-full md:block">
-      <div class="relative h-full overflow-hidden py-6 pr-6 lg:py-8">
+    <aside class="fixed top-16 z-30 hidden h-screen w-full shrink-0 md:sticky md:block">
+      <div class="relative h-full overflow-y-auto py-6 pr-6 lg:py-8">
         <For each={docsConfig.sidebarNav}>
           {(category) => (
             <div class="pb-4">
               <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">{category.title}</h4>
               <div class="grid grid-flow-row auto-rows-max text-sm">
                 <For each={category.items}>
-                  {(item) => (
+                  {(link) => (
                     <a
-                      href={item.href}
+                      href={link.href}
                       class={cn(
                         "group flex w-full items-center rounded-md border border-transparent px-2 py-1 no-underline hover:underline",
-                        item.href === location.pathname
+                        link.href === location.pathname
                           ? "font-medium text-foreground"
                           : "text-muted-foreground"
                       )}
                     >
-                      {item.title}
+                      <span>{link.title}</span>
+                      <Switch>
+                        <Match when={link.status === "new"}>
+                          <Badge class="ml-2">new</Badge>
+                        </Match>
+                        <Match when={link.status === "updated"}>
+                          <Badge variant="secondary" class="ml-2">
+                            updated
+                          </Badge>
+                        </Match>
+                      </Switch>
                     </a>
                   )}
                 </For>

diff --git a/apps/docs/src/config/docs.ts b/apps/docs/src/config/docs.ts
@@ -2,6 +2,7 @@ type NavElement = {
   title: string
   href: string
   external?: boolean
+  status?: string
 }
 
 type NavCategory = {
@@ -178,7 +179,8 @@ export const docsConfig: Config = {
         },
         {
           title: "Pagination",
-          href: "/docs/components/pagination"
+          href: "/docs/components/pagination",
+          status: "updated"
         },
         {
           title: "Popover",

diff --git a/apps/docs/src/registry/example/delta-bar-demo.tsx b/apps/docs/src/registry/example/delta-bar-demo.tsx
@@ -2,7 +2,7 @@ import { DeltaBar } from "~/registry/ui/delta-bar"
 
 export default function DeltaBarDemo() {
   return (
-    <div class="flex flex-col gap-4 overflow-x-scroll">
+    <div class="flex flex-col gap-4">
       <p>DeltaBar with default increase behavior</p>
       <DeltaBar value={60} class="w-[400px]" />
       <p>DeltaBar with increase seen as negative</p>