xertica-ui 1.0.0

package/components/Sidebar.tsx

@@ -0,0 +1,489 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  Menu,
+  ArrowLeft,
+  LogOut,
+  Settings,
+  MoreHorizontal,
+  ChevronRight,
+} from "lucide-react";
+import { routes } from "../routes";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { Tooltip, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "./ui/utils";
+import { XerticaLogo } from "./XerticaLogo";
+import { XerticaXLogo } from "./XerticaXLogo";
+
+// TooltipContent customizado para a Sidebar com seta branca
+function SidebarTooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Content
+      data-slot="tooltip-content"
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <TooltipPrimitive.Arrow 
+        className="fill-popover z-50 drop-shadow-sm" 
+        width={8} 
+        height={4}
+      />
+    </TooltipPrimitive.Content>
+  );
+}
+
+interface SubMenuItem {
+  id: string;
+  label: string;
+  path: string;
+}
+
+interface NavigationItem {
+  path: string;
+  label: string;
+  icon: any;
+  active: boolean;
+  subItems?: SubMenuItem[];
+}
+
+interface SidebarProps {
+  expanded: boolean;
+  onToggle: () => void;
+  user: { email: string } | null;
+  onLogout: () => void;
+  location: { pathname: string };
+  navigate: (path: string) => void;
+}
+
+export function Sidebar({
+  expanded,
+  onToggle,
+  user,
+  onLogout,
+  location,
+  navigate,
+}: SidebarProps) {
+  const navRef = useRef<HTMLDivElement>(null);
+  const [hasOverflow, setHasOverflow] = useState(false);
+  const [visibleItems, setVisibleItems] = useState<NavigationItem[]>([]);
+  const [overflowItems, setOverflowItems] = useState<NavigationItem[]>([]);
+  const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
+
+  // Tradução direta para português
+  const labelTranslations: Record<string, string> = {
+    home: "Início",
+    dashboard: "Dashboard",
+    components: "Componentes",
+  };
+
+  // Exemplo de subitens - você pode passar isso como prop também
+  const subItemsExample: Record<string, SubMenuItem[]> = {
+    "/components": [
+      { id: "buttons", label: "Botões", path: "/components/buttons" },
+      { id: "forms", label: "Formulários", path: "/components/forms" },
+      { id: "tables", label: "Tabelas", path: "/components/tables" },
+    ],
+  };
+
+  const navigationItems: NavigationItem[] = routes.map((route) => ({
+    ...route,
+    label:
+      labelTranslations[route.label.toLowerCase()] ||
+      route.label,
+    active: location.pathname === route.path || location.pathname.startsWith(route.path + "/"),
+    subItems: subItemsExample[route.path],
+  }));
+
+  const isSettingsActive = location.pathname === "/settings";
+
+  // Detectar overflow vertical
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (!navRef.current) return;
+
+      const navHeight = navRef.current.clientHeight;
+      const itemHeight = 44; // h-10 + gap
+      const maxVisibleItems = Math.floor(navHeight / itemHeight);
+
+      if (navigationItems.length > maxVisibleItems) {
+        setHasOverflow(true);
+        setVisibleItems(navigationItems.slice(0, maxVisibleItems - 1));
+        setOverflowItems(navigationItems.slice(maxVisibleItems - 1));
+      } else {
+        setHasOverflow(false);
+        setVisibleItems(navigationItems);
+        setOverflowItems([]);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [navigationItems.length]);
+
+  const handleNavigate = (path: string) => {
+    navigate(path);
+    setOpenSubmenu(null);
+    // Fecha o menu no mobile após navegar
+    if (window.innerWidth < 768) {
+      onToggle();
+    }
+  };
+
+  const renderMenuItem = (item: NavigationItem, showEllipsis: boolean = false) => {
+    const Icon = item.icon;
+    const hasSubItems = item.subItems && item.subItems.length > 0;
+
+    const buttonContent = (
+      <button
+        onClick={hasSubItems ? undefined : () => handleNavigate(item.path)}
+        className={
+          expanded
+            ? item.active
+              ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+              : "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+            : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 " +
+              (item.active
+                ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+                : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
+        }
+      >
+        <Icon className="w-5 h-5 flex-shrink-0" />
+        {expanded && (
+          <>
+            <span className="truncate text-sidebar-foreground flex-1 text-left">
+              {item.label}
+            </span>
+            {hasSubItems && (
+              <MoreHorizontal className="w-4 h-4 flex-shrink-0 text-sidebar-foreground/60" />
+            )}
+          </>
+        )}
+      </button>
+    );
+
+    if (hasSubItems || showEllipsis) {
+      return (
+        <Popover
+          key={item.path}
+          open={openSubmenu === item.path}
+          onOpenChange={(open) => setOpenSubmenu(open ? item.path : null)}
+        >
+          <PopoverTrigger asChild>
+            {!expanded ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  {buttonContent}
+                </TooltipTrigger>
+                <SidebarTooltipContent side="right" sideOffset={0}>
+                  <p>{item.label}</p>
+                </SidebarTooltipContent>
+              </Tooltip>
+            ) : (
+              buttonContent
+            )}
+          </PopoverTrigger>
+          <PopoverContent
+            side="right"
+            align="start"
+            className="w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg"
+            sideOffset={8}
+          >
+            <div className="space-y-1">
+              {/* Item principal clicável */}
+              {!showEllipsis && (
+                <button
+                  onClick={() => handleNavigate(item.path)}
+                  className="w-full h-9 flex items-center gap-2 px-3 rounded-[var(--radius-button)] transition-all duration-200 text-popover-foreground/80 hover:bg-accent hover:text-accent-foreground text-left"
+                >
+                  <span className="truncate">{item.label}</span>
+                </button>
+              )}
+              
+              {/* Subitens */}
+              {hasSubItems && item.subItems && (
+                <>
+                  {!showEllipsis && (
+                    <div className="h-px bg-border my-1" />
+                  )}
+                  {item.subItems.map((subItem) => (
+                    <button
+                      key={subItem.id}
+                      onClick={() => handleNavigate(subItem.path)}
+                      className="w-full h-9 flex items-center gap-2 px-3 pl-5 rounded-[var(--radius-button)] transition-all duration-200 text-popover-foreground/70 hover:bg-accent hover:text-accent-foreground text-left"
+                    >
+                      <ChevronRight className="w-3 h-3 flex-shrink-0" />
+                      <span className="truncate text-sm">{subItem.label}</span>
+                    </button>
+                  ))}
+                </>
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+      );
+    }
+
+    // Item normal sem subitens
+    const simpleButton = (
+      <button
+        key={item.path}
+        onClick={() => handleNavigate(item.path)}
+        className={
+          expanded
+            ? item.active
+              ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+              : "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+            : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 " +
+              (item.active
+                ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+                : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
+        }
+      >
+        <Icon className="w-5 h-5 flex-shrink-0" />
+        {expanded && (
+          <span className="truncate text-sidebar-foreground">
+            {item.label}
+          </span>
+        )}
+      </button>
+    );
+
+    // Adiciona tooltip quando colapsado
+    if (!expanded) {
+      return (
+        <Tooltip key={item.path}>
+          <TooltipTrigger asChild>
+            {simpleButton}
+          </TooltipTrigger>
+          <SidebarTooltipContent side="right" sideOffset={0}>
+            <p>{item.label}</p>
+          </SidebarTooltipContent>
+        </Tooltip>
+      );
+    }
+
+    return simpleButton;
+  };
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      {/* Sidebar */}
+      <div
+        className={`bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out flex flex-col z-50 ${
+          expanded
+            ? "fixed inset-0 md:fixed md:inset-y-0 md:left-0 md:w-64"
+            : "fixed inset-y-0 left-0 w-20 -translate-x-full md:translate-x-0"
+        }`}
+      >
+        {/* Botão Toggle Menu */}
+        <div className="p-[14px] pt-[13px] pr-[14px] pb-[12px] pl-[14px]">
+          <button
+            onClick={onToggle}
+            className="w-full h-10 flex items-center gap-3 px-3 justify-center rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+          >
+            {expanded ? (
+              <ArrowLeft className="w-5 h-5" />
+            ) : (
+              <Menu className="w-5 h-5" />
+            )}
+          </button>
+        </div>
+
+        {/* Logo */}
+        <div className="px-4 py-4">
+          <div
+            className={`flex items-center h-10 ${expanded ? "justify-center" : "justify-center"}`}
+          >
+            <div className="flex items-center justify-center flex-shrink-0">
+              {expanded ? (
+                <XerticaLogo
+                  className="h-5 w-auto"
+                  variant="white"
+                />
+              ) : (
+                <XerticaXLogo
+                  className="h-5 w-auto"
+                  variant="white"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Navegação */}
+        <nav className="flex-1 px-4 py-4 overflow-hidden" ref={navRef}>
+          <div className="space-y-1">
+            {/* Itens visíveis */}
+            {(hasOverflow ? visibleItems : navigationItems).map((item) =>
+              renderMenuItem(item)
+            )}
+
+            {/* Botão de overflow (ellipsis) */}
+            {hasOverflow && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    className={
+                      expanded
+                        ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+                        : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+                    }
+                  >
+                    <MoreHorizontal className="w-5 h-5 flex-shrink-0" />
+                    {expanded && (
+                      <span className="truncate text-sidebar-foreground">
+                        Mais opções
+                      </span>
+                    )}
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent
+                  side="right"
+                  align="start"
+                  className="w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg"
+                  sideOffset={8}
+                >
+                  <div className="space-y-1">
+                    {overflowItems.map((item) => {
+                      const Icon = item.icon;
+                      return (
+                        <button
+                          key={item.path}
+                          onClick={() => handleNavigate(item.path)}
+                          className="w-full h-9 flex items-center gap-2 px-3 rounded-[var(--radius-button)] transition-all duration-200 text-popover-foreground/80 hover:bg-accent hover:text-accent-foreground text-left"
+                        >
+                          <Icon className="w-4 h-4 flex-shrink-0" />
+                          <span className="truncate">{item.label}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+          </div>
+        </nav>
+
+        {/* Footer da sidebar - Usuário */}
+        <div className="p-4 space-y-2">
+          {/* Avatar do usuário */}
+          {!expanded ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  className="w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+                >
+                  <Avatar className="w-7 h-7 flex-shrink-0">
+                    <AvatarFallback className="bg-sidebar-foreground/15 text-sidebar-foreground text-xs">
+                      A
+                    </AvatarFallback>
+                  </Avatar>
+                </button>
+              </TooltipTrigger>
+              <SidebarTooltipContent side="right" sideOffset={0}>
+                <p>Ariel</p>
+              </SidebarTooltipContent>
+            </Tooltip>
+          ) : (
+            <button
+              className="w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+            >
+              <Avatar className="w-7 h-7 flex-shrink-0">
+                <AvatarFallback className="bg-sidebar-foreground/15 text-sidebar-foreground text-xs">
+                  A
+                </AvatarFallback>
+              </Avatar>
+              <span className="text-sidebar-foreground truncate">
+                Ariel
+              </span>
+            </button>
+          )}
+
+          {/* Botão Configurações */}
+          {!expanded ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => {
+                    navigate("/settings");
+                    if (window.innerWidth < 768) {
+                      onToggle();
+                    }
+                  }}
+                  className={"w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 " +
+                    (isSettingsActive
+                      ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+                      : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
+                  }
+                >
+                  <Settings className="w-5 h-5 flex-shrink-0" />
+                </button>
+              </TooltipTrigger>
+              <SidebarTooltipContent side="right" sideOffset={0}>
+                <p>Configurações</p>
+              </SidebarTooltipContent>
+            </Tooltip>
+          ) : (
+            <button
+              onClick={() => {
+                navigate("/settings");
+                if (window.innerWidth < 768) {
+                  onToggle();
+                }
+              }}
+              className={
+                isSettingsActive
+                  ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+                  : "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+              }
+            >
+              <Settings className="w-5 h-5 flex-shrink-0" />
+              <span className="truncate text-sidebar-foreground">
+                Configurações
+              </span>
+            </button>
+          )}
+
+          {/* Botão Sair */}
+          {!expanded ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={onLogout}
+                  className="w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+                >
+                  <LogOut className="w-5 h-5 flex-shrink-0" />
+                </button>
+              </TooltipTrigger>
+              <SidebarTooltipContent side="right" sideOffset={0}>
+                <p>Sair</p>
+              </SidebarTooltipContent>
+            </Tooltip>
+          ) : (
+            <button
+              onClick={onLogout}
+              className="w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+            >
+              <LogOut className="w-5 h-5 flex-shrink-0" />
+              <span className="truncate text-sidebar-foreground">
+                Sair
+              </span>
+            </button>
+          )}
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}