import type { ComponentType } from "react";import { ArchiveIcon, ArrowLeftIcon, Settings2Icon } from "lucide-react";import { useNavigate } from "@tanstack/react-router"; import {  SidebarContent,  SidebarFooter,  SidebarGroup,  SidebarMenu,  SidebarMenuButton,  SidebarMenuItem,  SidebarSeparator,} from "../ui/sidebar"; export type SettingsSectionPath = "/settings/general" | "/settings/archived"; export const SETTINGS_NAV_ITEMS: ReadonlyArray<{  label: string;  to: SettingsSectionPath;  icon: ComponentType<{ className?: string }>;}> = [  { label: "General", to: "/settings/general", icon: Settings2Icon },  { label: "Archive", to: "/settings/archived", icon: ArchiveIcon },]; export function SettingsSidebarNav({ pathname }: { pathname: string }) {  const navigate = useNavigate();   return (    <>      <SidebarContent className="overflow-x-hidden">        <SidebarGroup className="px-2 py-3">          <SidebarMenu>            {SETTINGS_NAV_ITEMS.map((item) => {              const Icon = item.icon;              const isActive = pathname === item.to;              return (                <SidebarMenuItem key={item.to}>                  <SidebarMenuButton                    size="sm"                    isActive={isActive}                    className={                      isActive                        ? "gap-2 px-2 py-2 text-left text-xs text-foreground"                        : "gap-2 px-2 py-2 text-left text-xs text-muted-foreground hover:text-foreground/80"                    }                    onClick={() => void navigate({ to: item.to, replace: true })}                  >                    <Icon                      className={                        isActive                          ? "size-4 shrink-0 text-foreground"                          : "size-4 shrink-0 text-muted-foreground"                      }                    />                    <span className="truncate">{item.label}</span>                  </SidebarMenuButton>                </SidebarMenuItem>              );            })}          </SidebarMenu>        </SidebarGroup>      </SidebarContent>       <SidebarSeparator />      <SidebarFooter className="p-2">        <SidebarMenu>          <SidebarMenuItem>            <SidebarMenuButton              size="sm"              className="gap-2 px-2 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"              onClick={() => window.history.back()}            >              <ArrowLeftIcon className="size-4" />              <span>Back</span>            </SidebarMenuButton>          </SidebarMenuItem>        </SidebarMenu>      </SidebarFooter>    </>  );}