Sidebar

import NextImage from 'next/image';
import { Avatar } from '@/components/ui/Avatar';
import NextLink from 'next/link';
import { IconSearch, IconHome, IconChartBar, IconChecklist, IconLogout2, IconLifebuoy, IconBellRinging, IconSettings, IconCreditCard, IconChevronDown, IconHelp } from '@tabler/icons-react';
import { cn } from '@/lib/utils';
import Input from '@/components/ui/Input';
import Kbd from '@/components/ui/Kbd';
import Button from '@/components/ui/Button';
import Tag from '@/components/ui/Tag';
import Divider from '@/components/ui/Divider';
import Collapsible from '@/components/ui/Collapsible';
import Badge from '@/components/ui/Badge';
export default function Page() {
  return (
    <div className="relative">
      <aside className="border-line fixed top-0 left-0 z-10 flex h-screen w-60 flex-col overflow-hidden border-r px-3">
        <div className="flex h-12 items-center gap-1">
          <NextImage src="/images/logo.svg" width={100} height={100} className="size-7" alt="logo" />
          <span className="text-lg font-semibold">Nexus Studio</span>
        </div>
        <Input className="mt-2 shrink-0 px-2" placeholder="search..." size="sm" prefix={<IconSearch size={16} />} suffix={<Kbd className="size-5 shrink-0 justify-center p-0">/</Kbd>} />
        <div className="mt-4 overflow-auto">
          <ul className="space-y-1">
            <MenuLink href="#" icon={<IconHome size={18} />}>
              Home
            </MenuLink>
            <MenuLink href="#" icon={<IconChartBar size={18} />}>
              Analysis
            </MenuLink>
            <MenuLink href="#" icon={<IconChecklist size={18} />}>
              Task
            </MenuLink>
            <MenuLink
              href="#"
              icon={<IconBellRinging size={18} />}
              trail={
                <Tag pill colors="secondary" className="min-h-5">
                  20
                </Tag>
              }>
              Notification
            </MenuLink>
            <Collapsible
              className="before:bg-line relative before:absolute before:left-6 before:h-full before:w-px"
              trigger={
                <MenuItem className="group" icon={<IconCreditCard size={18} />} trail={<IconChevronDown size={16} className="transition-transform group-data-[state=open]:rotate-180" />}>
                  Finances
                </MenuItem>
              }>
              <MenuLink className="left-7 max-w-[calc(100%_-_var(--spacing)*7)]" href="#">
                Payment
              </MenuLink>
              <MenuLink className="left-7 max-w-[calc(100%_-_var(--spacing)*7)]" href="#">
                Income
              </MenuLink>
            </Collapsible>
          </ul>
          <Divider />
          <ul className="space-y-1">
            <MenuLink href="#" icon={<IconSettings size={18} />}>
              Settings
            </MenuLink>
            <MenuLink href="#" icon={<IconHelp size={18} />}>
              Help
            </MenuLink>
            <MenuLink href="#" icon={<IconLifebuoy size={18} />}>
              Support
            </MenuLink>
          </ul>
        </div>
        <div className="border-line absolute bottom-2 left-0 flex h-16 w-full items-center justify-between border-t p-2">
          <div className="flex items-center gap-3">
            <Badge placement="bottom-right" asDot className="bg-secondary">
              <Avatar src="/images/avatar-01.png" bordered />
            </Badge>
            <div className="text-sm">
              <p className="font-semibold">Bulma Jame</p>
              <p className="text-description">UI Designer</p>
            </div>
          </div>
          <Button asIcon colors="neutral" variant="light" size="sm">
            <IconLogout2 size={20} />
          </Button>
        </div>
      </aside>
      <main className="relative h-screen py-4 pr-4 pl-64">
        <div className="diagnoal border-line h-full rounded-md border"></div>
      </main>
    </div>
  );
}

interface MenuLinkProps {
  href: string;
  className?: string;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  trail?: React.ReactNode;
}
function MenuLink({ className, href, icon, trail, children, ...props }: MenuLinkProps) {
  return (
    <Button colors="neutral" className={cn('relative w-full justify-between text-sm', className)} variant="light" asChild {...props}>
      <NextLink href={href}>
        <div className="flex items-center gap-2">
          {icon ? <>{icon}</> : null}
          {children}
        </div>
        {trail ? <>{trail}</> : null}
      </NextLink>
    </Button>
  );
}

function MenuItem({ className, icon, trail, children, ...props }: Omit<MenuLinkProps, 'href'>) {
  return (
    <Button colors="neutral" className={cn('relative w-full justify-between text-sm', className)} variant="light" {...props}>
      <div className="flex items-center gap-2">
        {icon ? <>{icon}</> : null}
        {children}
      </div>
      {trail ? <>{trail}</> : null}
    </Button>
  );
}