UI: Improve animations & layout

.changeset/nice-lions-march.md

@@ -0,0 +1,5 @@
+---
+'next-docs-ui': patch
+---
+
+Improve animations & layout

.eslintrc.cjs

@@ -64,7 +64,7 @@ module.exports = {
       settings: {
         tailwindcss: {
           config: 'packages/next-docs-ui/tailwind.config.js',
-          callees: ['cn', 'clsx']
+          callees: ['cn', 'clsx', 'cva']
         }
       }
     },

apps/docs/app/docs/[mode]/layout.tsx

@@ -44,7 +44,7 @@ export default function Layout({
         tree={tree}
         nav={false}
         sidebarBanner={
-          <div className="flex flex-row gap-2 items-center p-2 rounded-lg border bg-secondary/70 text-secondary-foreground transition-colors shadow-lg shadow-background hover:bg-accent">
+          <div className="flex flex-row gap-2 items-center p-2 rounded-lg border bg-card text-card-foreground transition-colors shadow-lg shadow-background hover:bg-muted">
             <Icon className="w-9 h-9 p-1 shrink-0 border rounded-md text-primary bg-background" />
             <div>
               <p className="font-medium text-sm">{title}</p>

packages/next-docs-ui/package.json

@@ -54,6 +54,7 @@
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "lucide-react": "^0.268.0",

packages/next-docs-ui/src/components/nav.tsx

@@ -1,5 +1,6 @@
 import { SidebarContext } from '@/contexts/sidebar'
-import clsx from 'clsx'
+import { cn } from '@/utils/cn'
+import { cva } from 'class-variance-authority'
 import { MenuIcon, SidebarCloseIcon, SidebarOpenIcon } from 'lucide-react'
 import { SidebarTrigger } from 'next-docs-zeta/sidebar'
 import Link from 'next/link'
@@ -28,6 +29,10 @@ type NavProps = {
   children: ReactNode
 }
 
+const itemVariants = cva(
+  'nd-p-2 nd-rounded-md hover:nd-bg-accent hover:nd-text-accent-foreground'
+)
+
 export function Nav({
   links,
   items,
@@ -43,30 +48,34 @@ export function Nav({
         <div className="nd-flex nd-flex-row nd-justify-end nd-items-center nd-flex-1">
           <SearchToggle className="md:nd-mr-2" />
           {enableSidebar && collapsibleSidebar && <DesktopSidebarToggle />}
+          <ThemeToggle className={cn(enableSidebar && 'max-lg:nd-hidden')} />
           {links?.map((item, key) => <NavLink key={key} {...item} />)}
-          <ThemeToggle className={clsx(enableSidebar && 'max-lg:nd-hidden')} />
-          {enableSidebar && (
-            <SidebarTrigger
-              aria-label="Toggle Sidebar"
-              className="nd-p-2 nd-rounded-md hover:nd-bg-accent lg:nd-hidden"
-            >
-              <MenuIcon className="nd-w-5 nd-h-5" />
-            </SidebarTrigger>
-          )}
+          {enableSidebar && <SidebarToggle />}
         </div>
       </div>
     </nav>
   )
 }
 
+function SidebarToggle() {
+  return (
+    <SidebarTrigger
+      aria-label="Toggle Sidebar"
+      className={cn(itemVariants({ className: 'lg:nd-hidden' }))}
+    >
+      <MenuIcon className="nd-w-5 nd-h-5" />
+    </SidebarTrigger>
+  )
+}
+
 function DesktopSidebarToggle() {
   const [open, setOpen] = useContext(SidebarContext)
 
   return (
     <button
       aria-label="Toggle Sidebar"
       onClick={() => setOpen(!open)}
-      className="nd-mr-2 nd-p-2 nd-transition-colors nd-rounded-md nd-border nd-bg-secondary/70 nd-text-muted-foreground hover:nd-bg-accent max-lg:nd-hidden"
+      className={cn(itemVariants({ className: 'max-lg:nd-hidden' }))}
     >
       {open ? (
         <SidebarCloseIcon className="nd-w-5 nd-h-5" />
@@ -87,7 +96,7 @@ function NavItem(props: NavItemProps) {
       href={props.href}
       target={props.external ? '_blank' : '_self'}
       rel={props.external ? 'noreferrer noopener' : undefined}
-      className={clsx(
+      className={cn(
         'nd-text-sm max-lg:nd-hidden',
         isActive
           ? 'nd-text-accent-foreground nd-font-medium'
@@ -105,7 +114,7 @@ function NavLink(props: NavLinkProps) {
       href={props.href}
       target={props.external ? '_blank' : '_self'}
       rel={props.external ? 'noreferrer noopener' : undefined}
-      className="nd-p-2 nd-rounded-md hover:nd-bg-accent max-md:nd-hidden"
+      className={cn(itemVariants({ className: 'max-md:nd-hidden' }))}
     >
       {props.icon}
     </Link>

packages/next-docs-ui/src/components/sidebar.tsx

@@ -1,7 +1,9 @@
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { SidebarContext } from '@/contexts/sidebar'
 import { LayoutContext } from '@/contexts/tree'
+import { cn } from '@/utils/cn'
 import * as Collapsible from '@radix-ui/react-collapsible'
+import { cva } from 'class-variance-authority'
 import clsx from 'clsx'
 import { ChevronDown } from 'lucide-react'
 import type { FileNode, FolderNode, TreeNode } from 'next-docs-zeta/server'
@@ -17,6 +19,19 @@ type SidebarProps = {
   footer?: ReactNode
 }
 
+const itemVariants = cva(
+  'nd-flex nd-flex-row nd-items-center nd-text-sm nd-px-2 nd-py-1.5 nd-rounded-md',
+  {
+    variants: {
+      active: {
+        true: 'nd-text-primary nd-bg-primary/10 nd-font-medium',
+        false:
+          'nd-text-muted-foreground nd-transition-colors hover:nd-text-accent-foreground'
+      }
+    }
+  }
+)
+
 export function Sidebar({ banner, footer }: SidebarProps) {
   const [open] = useContext(SidebarContext)
   const { tree } = useContext(LayoutContext)
@@ -25,9 +40,9 @@ export function Sidebar({ banner, footer }: SidebarProps) {
     <Base.SidebarList
       minWidth={1024} // lg
       className={clsx(
-        'nd-flex nd-flex-col nd-transition-all',
+        'nd-flex nd-flex-col',
         open ? 'lg:nd-w-[260px]' : 'lg:nd-w-0 nd-overflow-hidden nd-opacity-0',
-        'lg:nd-sticky lg:nd-top-16 lg:nd-h-[calc(100vh-4rem)]',
+        'lg:nd-sticky lg:nd-top-16 lg:nd-h-[calc(100vh-4rem)] lg:nd-transition-[width,opacity]',
         'max-lg:nd-w-full max-lg:nd-px-8 max-lg:nd-fixed max-lg:nd-inset-y-0 max-lg:nd-right-0 max-lg:nd-bg-background/70 max-lg:nd-backdrop-blur-lg max-lg:nd-z-40 max-lg:nd-pt-16 max-lg:data-[open=false]:nd-hidden sm:max-lg:nd-max-w-sm sm:max-lg:nd-border-l'
       )}
     >
@@ -69,15 +84,7 @@ function Item({ item }: { item: FileNode }) {
   const active = pathname === item.url
 
   return (
-    <Link
-      href={item.url}
-      className={clsx(
-        'nd-inline-flex nd-flex-row nd-items-center nd-text-sm nd-px-2 nd-py-1.5 nd-rounded-md nd-transition-colors',
-        active
-          ? 'nd-text-primary nd-bg-primary/10 nd-font-medium'
-          : 'nd-text-muted-foreground hover:nd-text-accent-foreground'
-      )}
-    >
+    <Link href={item.url} className={cn(itemVariants({ active }))}>
       {item.icon &&
         cloneElement(item.icon, {
           className: 'nd-w-4 nd-h-4 nd-mr-2'
@@ -108,7 +115,7 @@ function Folder({
   const { sidebarDefaultOpenLevel = 1 } = useContext(LayoutContext)
 
   const pathname = usePathname()
-  const active = index && pathname === index.url
+  const active = index != null && pathname === index.url
   const childActive = useMemo(() => hasActive(children, pathname), [pathname])
   const [extend, setExtend] = useState(
     sidebarDefaultOpenLevel >= level || active || childActive
@@ -137,12 +144,7 @@ function Folder({
   return (
     <Collapsible.Root open={extend} onOpenChange={setExtend}>
       <Collapsible.Trigger
-        className={clsx(
-          'nd-flex nd-flex-row nd-w-full nd-text-sm nd-px-2 nd-py-1.5 nd-transition-colors nd-text-left nd-rounded-md',
-          active
-            ? 'nd-font-medium nd-text-primary nd-bg-primary/10'
-            : 'nd-text-muted-foreground hover:nd-text-accent-foreground'
-        )}
+        className={cn(itemVariants({ active, className: 'nd-w-full' }))}
       >
         {index ? (
           <Link