Updates: ui

src/components/command-search.tsx

@@ -50,10 +50,10 @@ export function CommandSearch({ className }: { className?: string }) {
         variant="ghost"
         size="sm"
         onClick={() => setOpen(true)}
-        aria-label="Search documentation"
+        aria-label="Jump to pages, components, and docs"
         className={cn(
-          "hidden md:flex h-8 w-48 items-center gap-2 rounded-md border border-border/50 bg-muted/40 px-2.5 text-muted-foreground hover:bg-muted/70 hover:text-foreground",
-          className
+          "border-border/50 bg-muted/40 text-muted-foreground hover:bg-muted/70 hover:text-foreground hidden h-8 w-48 items-center gap-2 rounded-md border px-2.5 md:flex",
+          className,
         )}
       >
         <SearchIcon className="size-3.5" />
@@ -72,10 +72,10 @@ export function CommandSearch({ className }: { className?: string }) {
       >
         <CommandInput
           placeholder="Search..."
-          className="border-none text-sm h-10"
+          className="h-10 border-none text-sm"
         />
         <CommandList>
-          <CommandEmpty className="py-8 text-muted-foreground text-sm">
+          <CommandEmpty className="text-muted-foreground py-8 text-sm">
             <div className="flex flex-col items-center gap-1.5">
               <FileText className="size-5 opacity-40" />
               <span>No results found.</span>
@@ -97,7 +97,7 @@ export function CommandSearch({ className }: { className?: string }) {
             </CommandGroup>
           ))}
         </CommandList>
-        <div className="border-t p-3 text-xs text-muted-foreground/80 flex items-center justify-between">
+        <div className="text-muted-foreground/80 flex items-center justify-between border-t p-3 text-xs">
           <div className="flex items-center gap-2.5">
             <span className="flex items-center gap-1.5">
               <Kbd>

src/components/logo.tsx

@@ -5,10 +5,11 @@ import { cn } from "@/lib/utils";
 interface LogoProps {
   className?: string;
   onClick?: () => void;
+  isLink?: boolean;
 }
 
-export function Logo({ className, onClick }: LogoProps) {
-  return (
+export function Logo({ className, onClick, isLink = true }: LogoProps) {
+  return isLink ? (
     <Link
       href="/"
       onClick={onClick}
@@ -20,5 +21,15 @@ export function Logo({ className, onClick }: LogoProps) {
       <MapPin className="size-4" />
       mapcn
     </Link>
+  ) : (
+    <div
+      className={cn(
+        "flex items-center gap-1.5 text-lg font-semibold",
+        className,
+      )}
+    >
+      <MapPin className="size-4" />
+      mapcn
+    </div>
   );
 }

src/components/mobile-nav.tsx

@@ -13,6 +13,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { siteNavigation } from "@/lib/site-navigation";
+import { Logo } from "./logo";
 
 export function MobileNav() {
   const [open, setOpen] = useState(false);
@@ -31,7 +32,9 @@ export function MobileNav() {
       </SheetTrigger>
       <SheetContent side="left" className="rounded-r-xl">
         <SheetHeader>
-          <SheetTitle className="sr-only">Sidebar</SheetTitle>
+          <SheetTitle>
+            <Logo isLink={false} />
+          </SheetTitle>
         </SheetHeader>
         <div className="overflow-y-auto px-2">
           <nav className="space-y-6">
@@ -46,7 +49,7 @@ export function MobileNav() {
                       <Link
                         href={item.href}
                         onClick={() => setOpen(false)}
-                        className="flex items-center px-3 py-2.5"
+                        className="active:text-muted-foreground flex items-center px-3 py-2 text-lg"
                       >
                         {item.title}
                       </Link>

src/components/ui/command.tsx

@@ -1,17 +1,17 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
+} from "@/components/ui/dialog";
 
 function Command({
   className,
@@ -22,11 +22,11 @@ function Command({
       data-slot="command"
       className={cn(
         "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandDialog({
@@ -37,10 +37,10 @@ function CommandDialog({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
 }) {
   return (
     <Dialog {...props}>
@@ -49,7 +49,10 @@ function CommandDialog({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn("overflow-hidden p-0", className)}
+        className={cn(
+          "top-[min(18vh,6.5rem)] translate-y-0 overflow-hidden p-0 sm:max-w-lg",
+          className,
+        )}
         showCloseButton={showCloseButton}
       >
         <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
@@ -57,7 +60,7 @@ function CommandDialog({
         </Command>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
 
 function CommandInput({
@@ -74,12 +77,12 @@ function CommandInput({
         data-slot="command-input"
         className={cn(
           "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
 function CommandList({
@@ -91,11 +94,11 @@ function CommandList({
       data-slot="command-list"
       className={cn(
         "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandEmpty({
@@ -107,7 +110,7 @@ function CommandEmpty({
       className="py-6 text-center text-sm"
       {...props}
     />
-  )
+  );
 }
 
 function CommandGroup({
@@ -119,11 +122,11 @@ function CommandGroup({
       data-slot="command-group"
       className={cn(
         "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandSeparator({
@@ -136,7 +139,7 @@ function CommandSeparator({
       className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CommandItem({
@@ -148,11 +151,11 @@ function CommandItem({
       data-slot="command-item"
       className={cn(
         "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandShortcut({
@@ -164,11 +167,11 @@ function CommandShortcut({
       data-slot="command-shortcut"
       className={cn(
         "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -181,4 +184,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};

src/lib/site-navigation.ts

@@ -1,18 +1,4 @@
-import {
-  BookOpen,
-  Braces,
-  Code,
-  Home,
-  Layers,
-  LayoutGrid,
-  LucideIcon,
-  Map,
-  MapPin,
-  MessageSquare,
-  Route,
-  Settings,
-  Wrench,
-} from "lucide-react";
+import { BookOpen, CornerDownRight, Layers2, LucideIcon } from "lucide-react";
 
 export interface MainNavItem {
   href: string;
@@ -36,29 +22,29 @@ export const docsNavigation: SiteNavigationGroup[] = [
     title: "Basics",
     items: [
       { title: "Getting Started", href: "/docs", icon: BookOpen },
-      { title: "Installation", href: "/docs/installation", icon: Code },
-      { title: "API Reference", href: "/docs/api-reference", icon: Braces },
+      { title: "Installation", href: "/docs/installation", icon: BookOpen },
+      { title: "API Reference", href: "/docs/api-reference", icon: BookOpen },
     ],
   },
   {
     title: "Components",
     items: [
-      { title: "Map", href: "/docs/basic-map", icon: Map },
-      { title: "Controls", href: "/docs/controls", icon: Settings },
-      { title: "Markers", href: "/docs/markers", icon: MapPin },
-      { title: "Popups", href: "/docs/popups", icon: MessageSquare },
-      { title: "Routes", href: "/docs/routes", icon: Route },
-      { title: "Clusters", href: "/docs/clusters", icon: Layers },
-      { title: "Advanced", href: "/docs/advanced-usage", icon: Wrench },
+      { title: "Map", href: "/docs/basic-map", icon: Layers2 },
+      { title: "Controls", href: "/docs/controls", icon: Layers2 },
+      { title: "Markers", href: "/docs/markers", icon: Layers2 },
+      { title: "Popups", href: "/docs/popups", icon: Layers2 },
+      { title: "Routes", href: "/docs/routes", icon: Layers2 },
+      { title: "Clusters", href: "/docs/clusters", icon: Layers2 },
+      { title: "Advanced", href: "/docs/advanced-usage", icon: Layers2 },
     ],
   },
 ];
 
 const navItems: SiteNavigationItem[] = [
-  { title: "Home", href: "/", icon: Home },
-  { title: "Docs", href: "/docs", icon: BookOpen },
-  { title: "Components", href: "/docs/basic-map", icon: Map },
-  { title: "Blocks", href: "/blocks", icon: LayoutGrid },
+  { title: "Home", href: "/", icon: CornerDownRight },
+  { title: "Docs", href: "/docs", icon: CornerDownRight },
+  { title: "Components", href: "/docs/basic-map", icon: CornerDownRight },
+  { title: "Blocks", href: "/blocks", icon: CornerDownRight },
 ];
 
 export const siteNavigation: SiteNavigationGroup[] = [