feat: replace sidebar with 21st.dev hover-to-expand component

Use framer-motion animated sidebar from 21st.dev — collapses to icons, expands on hover. Phosphor icons instead of lucide. Remove old manual collapse/expand and sidebar-context. Top bar has Pulse logo + user actions, sidebar below with site picker and nav groups.
2026-03-18 16:20:32 +01:00
parent 66a70f676f
commit db5cd4cbcb
7 changed files with 320 additions and 218 deletions
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -2,7 +2,7 @@

 import { OfflineBanner } from '@/components/OfflineBanner'
 import { Footer } from '@/components/Footer'
-import { Header, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
+import { Header, type CipheraApp } from '@ciphera-net/ui'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 import { useAuth } from '@/lib/auth/context'
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus'
@@ -16,7 +16,6 @@ import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
 import { SettingsModalProvider, useSettingsModal } from '@/lib/settings-modal-context'
 import SettingsModalWrapper from '@/components/settings/SettingsModalWrapper'
-import { SidebarProvider } from '@/lib/sidebar-context'

 const ORG_SWITCH_KEY = 'pulse_switching_org'

@@ -180,9 +179,7 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
 export default function LayoutContent({ children }: { children: React.ReactNode }) {
  return (
    <SettingsModalProvider>
-      <SidebarProvider>
      <LayoutInner>{children}</LayoutInner>
-      </SidebarProvider>
    </SettingsModalProvider>
  )
 }
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -1,8 +1,7 @@
 'use client'

-import Sidebar from './Sidebar'
+import PulseSidebar from './Sidebar'
 import UtilityBar from './UtilityBar'
-import { useSidebar } from '@/lib/sidebar-context'

 export default function DashboardShell({
  siteId,
@@ -11,15 +10,11 @@ export default function DashboardShell({
  siteId: string
  children: React.ReactNode
 }) {
-  const { mobileOpen, closeMobile } = useSidebar()
-
  return (
    <div className="flex flex-col h-screen overflow-hidden">
-      {/* Top bar: full width — logo left, actions right */}
      <UtilityBar />
-      {/* Below: sidebar + content */}
      <div className="flex flex-1 overflow-hidden">
-        <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
+        <PulseSidebar siteId={siteId} />
        <main className="flex-1 min-w-0 overflow-y-auto">
          {children}
        </main>
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -3,8 +3,15 @@
 import { useState, useEffect, useRef } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
+import { motion } from 'framer-motion'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
+import {
+  Sidebar as SidebarPrimitive,
+  SidebarBody,
+  SidebarLink,
+  useSidebar,
+} from '@/components/ui/sidebar'
 import {
  LayoutDashboardIcon,
  PathIcon,
@@ -14,16 +21,10 @@ import {
  CloudUploadIcon,
  HeartbeatIcon,
  SettingsIcon,
-  CollapseLeftIcon,
-  CollapseRightIcon,
  ChevronUpDownIcon,
  PlusIcon,
-  XIcon,
-  MenuIcon,
 } from '@ciphera-net/ui'

-const SIDEBAR_COLLAPSED_KEY = 'pulse_sidebar_collapsed'
-
 interface NavItem {
  label: string
  href: (siteId: string) => string
@@ -63,22 +64,15 @@ const SETTINGS_ITEM: NavItem = {
  matchPrefix: true,
 }

-function SitePicker({
-  sites,
-  currentSiteId,
-  collapsed,
-}: {
-  sites: Site[]
-  currentSiteId: string
-  collapsed: boolean
-}) {
+function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
+  const { open: sidebarOpen } = useSidebar()
  const [open, setOpen] = useState(false)
  const [search, setSearch] = useState('')
  const ref = useRef<HTMLDivElement>(null)
  const pathname = usePathname()
  const router = useRouter()

-  const currentSite = sites.find((s) => s.id === currentSiteId)
+  const currentSite = sites.find((s) => s.id === siteId)

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
@@ -97,10 +91,9 @@ function SitePicker({
      s.domain.toLowerCase().includes(search.toLowerCase())
  )

-  const switchSite = (siteId: string) => {
-    // Preserve current page type
+  const switchSite = (id: string) => {
    const currentPageType = pathname.replace(/^\/sites\/[^/]+/, '')
-    router.push(`/sites/${siteId}${currentPageType}`)
+    router.push(`/sites/${id}${currentPageType}`)
    setOpen(false)
    setSearch('')
  }
@@ -108,18 +101,15 @@ function SitePicker({
  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'

  return (
-    <div className="relative px-3 mb-2" ref={ref}>
+    <div className="relative mb-4" ref={ref}>
      <button
        onClick={() => setOpen(!open)}
-        className={`w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors ${
-          collapsed ? 'justify-center' : ''
-        }`}
-        title={collapsed ? currentSite?.name || 'Select site' : undefined}
+        className="w-full flex items-center gap-2.5 rounded-lg px-1 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-white/10 dark:hover:bg-white/5"
      >
        <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
          {initial}
        </span>
-        {!collapsed && (
+        {sidebarOpen && (
          <>
            <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
            <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
@@ -128,7 +118,7 @@ function SitePicker({
      </button>

      {open && (
-        <div className="absolute left-3 right-3 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
+        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
          <div className="p-2">
            <input
              type="text"
@@ -144,8 +134,8 @@ function SitePicker({
              <button
                key={site.id}
                onClick={() => switchSite(site.id)}
-                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors text-left ${
-                  site.id === currentSiteId
+                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
+                  site.id === siteId
                    ? 'bg-brand-orange/10 text-brand-orange font-medium'
                    : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
                }`}
@@ -167,7 +157,7 @@ function SitePicker({
            <Link
              href="/sites/new"
              onClick={() => setOpen(false)}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+              className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg"
            >
              <PlusIcon className="w-4 h-4" />
              Add new site
@@ -179,186 +169,110 @@ function SitePicker({
  )
 }

-function NavItemLink({
-  item,
-  siteId,
-  collapsed,
-  onClick,
-}: {
-  item: NavItem
-  siteId: string
-  collapsed: boolean
-  onClick?: () => void
-}) {
-  const pathname = usePathname()
-  const href = item.href(siteId)
-  const isActive = item.matchPrefix ? pathname.startsWith(href) : pathname === href
-
-  return (
-    <Link
-      href={href}
-      onClick={onClick}
-      title={collapsed ? item.label : undefined}
-      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
-        collapsed ? 'justify-center' : ''
-      } ${
-        isActive
-          ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
-      }`}
-    >
-      <item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
-      {!collapsed && <span>{item.label}</span>}
-    </Link>
-  )
-}
-
-export default function Sidebar({
-  siteId,
-  mobileOpen,
-  onMobileClose,
-}: {
-  siteId: string
-  mobileOpen: boolean
-  onMobileClose: () => void
-}) {
+function SidebarContent({ siteId }: { siteId: string }) {
  const { user } = useAuth()
-  const canEdit = user?.role === 'owner' || user?.role === 'admin'
-  const [collapsed, setCollapsed] = useState(() => {
-    if (typeof window === 'undefined') return false
-    return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === 'true'
-  })
-  const [sites, setSites] = useState<Site[]>([])
+  const { open } = useSidebar()
  const pathname = usePathname()
-
-  // Close mobile drawer on navigation
-  useEffect(() => {
-    onMobileClose()
-  }, [pathname, onMobileClose])
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const [sites, setSites] = useState<Site[]>([])

  useEffect(() => {
-    listSites()
-      .then(setSites)
-      .catch(() => {})
+    listSites().then(setSites).catch(() => {})
  }, [])

-  const toggleCollapsed = () => {
-    const next = !collapsed
-    setCollapsed(next)
-    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next))
+  const isActive = (item: NavItem) => {
+    const href = item.href(siteId)
+    return item.matchPrefix ? pathname.startsWith(href) : pathname === href
  }

-  const sidebarContent = (isMobile: boolean) => {
-    const isCollapsed = isMobile ? false : collapsed
-
  return (
-      <div className="flex flex-col h-full overflow-hidden">
+    <>
+      <div className="flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
        {/* Site Picker */}
-        <div className="pt-3 pb-2">
-          <SitePicker sites={sites} currentSiteId={siteId} collapsed={isCollapsed} />
-        </div>
+        <SitePicker sites={sites} siteId={siteId} />

        {/* Nav Groups */}
-        <nav className="flex-1 overflow-y-auto px-3 space-y-4">
        {NAV_GROUPS.map((group) => (
-            <div key={group.label}>
-              {!isCollapsed && (
-                <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+          <div key={group.label} className="mb-4">
+            {open && (
+              <motion.p
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="px-1 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider"
+              >
                {group.label}
-                </p>
+              </motion.p>
            )}
-              <div className="space-y-0.5">
+            <div className="flex flex-col gap-0.5">
              {group.items.map((item) => (
-                  <NavItemLink
+                <SidebarLink
                  key={item.label}
-                    item={item}
-                    siteId={siteId}
-                    collapsed={isCollapsed}
-                    onClick={isMobile ? () => onMobileClose() : undefined}
-                  />
-                ))}
-              </div>
-            </div>
-          ))}
-        </nav>
-
-        {/* Bottom: Settings + Collapse toggle */}
-        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-1">
-          {canEdit && (
-            <NavItemLink
-              item={SETTINGS_ITEM}
-              siteId={siteId}
-              collapsed={isCollapsed}
-              onClick={isMobile ? () => onMobileClose() : undefined}
-            />
-          )}
-          {!isMobile && (
-            <button
-              onClick={toggleCollapsed}
-              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors w-full"
-              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-            >
-              {collapsed ? (
-                <CollapseRightIcon className="w-[18px] h-[18px] shrink-0 mx-auto" />
-              ) : (
-                <>
-                  <CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
-                  <span>Collapse</span>
-                </>
-              )}
-            </button>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      {/* Mobile hamburger trigger — rendered in the header via leftActions */}
-
-      {/* Desktop sidebar */}
-      <aside
-        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 ${
-          collapsed ? 'w-[68px]' : 'w-60'
+                  active={isActive(item)}
+                  link={{
+                    label: item.label,
+                    href: item.href(siteId),
+                    icon: (
+                      <item.icon
+                        className={`h-5 w-5 flex-shrink-0 ${
+                          isActive(item)
+                            ? 'text-brand-orange'
+                            : 'text-neutral-700 dark:text-neutral-200'
                        }`}
-      >
-        {sidebarContent(false)}
-      </aside>
-
-      {/* Mobile overlay drawer */}
-      {mobileOpen && (
-        <>
-          <div
-            className="fixed inset-0 z-40 bg-black/30 lg:hidden"
-            onClick={() => onMobileClose()}
+                        weight={isActive(item) ? 'fill' : 'regular'}
                      />
-          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl lg:hidden animate-in slide-in-from-left duration-200">
-            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
-              <button
-                onClick={() => onMobileClose()}
-                className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
-              >
-                <XIcon className="w-5 h-5" />
-              </button>
+                    ),
+                  }}
+                  className={
+                    isActive(item)
+                      ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
+                      : 'rounded-lg px-1'
+                  }
+                />
+              ))}
            </div>
-            {sidebarContent(true)}
-          </aside>
-        </>
+          </div>
+        ))}
+      </div>
+
+      {/* Bottom: Settings */}
+      <div className="border-t border-neutral-700/30 pt-3">
+        {canEdit && (
+          <SidebarLink
+            active={isActive(SETTINGS_ITEM)}
+            link={{
+              label: SETTINGS_ITEM.label,
+              href: SETTINGS_ITEM.href(siteId),
+              icon: (
+                <SETTINGS_ITEM.icon
+                  className={`h-5 w-5 flex-shrink-0 ${
+                    isActive(SETTINGS_ITEM)
+                      ? 'text-brand-orange'
+                      : 'text-neutral-700 dark:text-neutral-200'
+                  }`}
+                  weight={isActive(SETTINGS_ITEM) ? 'fill' : 'regular'}
+                />
+              ),
+            }}
+            className={
+              isActive(SETTINGS_ITEM)
+                ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
+                : 'rounded-lg px-1'
+            }
+          />
        )}
+      </div>
    </>
  )
 }

-export function SidebarMobileToggle({ onClick }: { onClick: () => void }) {
+export default function PulseSidebar({ siteId }: { siteId: string }) {
+  const [open, setOpen] = useState(false)
+
  return (
-    <button
-      onClick={onClick}
-      className="lg:hidden p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
-      aria-label="Open navigation"
-    >
-      <MenuIcon className="w-5 h-5" />
-    </button>
+    <SidebarPrimitive open={open} setOpen={setOpen}>
+      <SidebarBody className="justify-between gap-6 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+        <SidebarContent siteId={siteId} />
+      </SidebarBody>
+    </SidebarPrimitive>
  )
 }
--- a/components/dashboard/UtilityBar.tsx
+++ b/components/dashboard/UtilityBar.tsx
@@ -3,13 +3,12 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
-import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
+import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
-import { useSidebar } from '@/lib/sidebar-context'
 import NotificationCenter from '@/components/notifications/NotificationCenter'

 const CIPHERA_APPS: CipheraApp[] = [
@@ -43,7 +42,6 @@ export default function UtilityBar() {
  const auth = useAuth()
  const router = useRouter()
  const { openSettings } = useSettingsModal()
-  const { openMobile } = useSidebar()
  const [orgs, setOrgs] = useState<OrganizationMember[]>([])

  useEffect(() => {
@@ -68,15 +66,8 @@ export default function UtilityBar() {

  return (
    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-8 py-3.5">
-      {/* Left: Pulse logo + mobile toggle */}
+      {/* Left: Pulse logo */}
      <div className="flex items-center gap-3">
-        <button
-          onClick={openMobile}
-          className="lg:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
-          aria-label="Open navigation"
-        >
-          <MenuIcon className="w-5 h-5" />
-        </button>
        <Link
          href="/"
          className="flex items-center gap-3 group relative"
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Link, { LinkProps } from "next/link";
+import React, { useState, createContext, useContext } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { List as Menu, X } from "@phosphor-icons/react";
+
+interface Links {
+  label: string;
+  href: string;
+  icon: React.JSX.Element | React.ReactNode;
+}
+
+interface SidebarContextProps {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  animate: boolean;
+}
+
+const SidebarContext = createContext<SidebarContextProps | undefined>(
+  undefined
+);
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+
+export const SidebarProvider = ({
+  children,
+  open: openProp,
+  setOpen: setOpenProp,
+  animate = true,
+}: {
+  children: React.ReactNode;
+  open?: boolean;
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  animate?: boolean;
+}) => {
+  const [openState, setOpenState] = useState(false);
+
+  const open = openProp !== undefined ? openProp : openState;
+  const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState;
+
+  return (
+    <SidebarContext.Provider value={{ open, setOpen, animate }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+export const Sidebar = ({
+  children,
+  open,
+  setOpen,
+  animate,
+}: {
+  children: React.ReactNode;
+  open?: boolean;
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  animate?: boolean;
+}) => {
+  return (
+    <SidebarProvider open={open} setOpen={setOpen} animate={animate}>
+      {children}
+    </SidebarProvider>
+  );
+};
+
+export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => {
+  return (
+    <>
+      <DesktopSidebar {...props} />
+      <MobileSidebar {...(props as React.ComponentProps<"div">)} />
+    </>
+  );
+};
+
+export const DesktopSidebar = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof motion.div>) => {
+  const { open, setOpen, animate } = useSidebar();
+  return (
+    <motion.div
+      className={cn(
+        "h-full px-4 py-4 hidden md:flex md:flex-col bg-neutral-100 dark:bg-neutral-800 w-[300px] flex-shrink-0",
+        className
+      )}
+      animate={{
+        width: animate ? (open ? "300px" : "60px") : "300px",
+      }}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export const MobileSidebar = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) => {
+  const { open, setOpen } = useSidebar();
+  return (
+    <>
+      <div
+        className={cn(
+          "h-10 px-4 py-4 flex flex-row md:hidden items-center justify-between bg-neutral-100 dark:bg-neutral-800 w-full"
+        )}
+        {...props}
+      >
+        <div className="flex justify-end z-20 w-full">
+          <Menu
+            className="text-neutral-800 dark:text-neutral-200 cursor-pointer"
+            onClick={() => setOpen(!open)}
+          />
+        </div>
+        <AnimatePresence>
+          {open && (
+            <motion.div
+              initial={{ x: "-100%", opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: "-100%", opacity: 0 }}
+              transition={{
+                duration: 0.3,
+                ease: "easeInOut",
+              }}
+              className={cn(
+                "fixed h-full w-full inset-0 bg-white dark:bg-neutral-900 p-10 z-[100] flex flex-col justify-between",
+                className
+              )}
+            >
+              <div
+                className="absolute right-10 top-10 z-50 text-neutral-800 dark:text-neutral-200 cursor-pointer"
+                onClick={() => setOpen(!open)}
+              >
+                <X />
+              </div>
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </>
+  );
+};
+
+export const SidebarLink = ({
+  link,
+  className,
+  active,
+  ...props
+}: {
+  link: Links;
+  className?: string;
+  active?: boolean;
+  props?: LinkProps;
+}) => {
+  const { open, animate } = useSidebar();
+  return (
+    <Link
+      href={link.href}
+      className={cn(
+        "flex items-center justify-start gap-2 group/sidebar py-2",
+        active && "text-brand-orange",
+        className
+      )}
+      {...props}
+    >
+      {link.icon}
+      <motion.span
+        animate={{
+          display: animate ? (open ? "inline-block" : "none") : "inline-block",
+          opacity: animate ? (open ? 1 : 0) : 1,
+        }}
+        className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0"
+      >
+        {link.label}
+      </motion.span>
+    </Link>
+  );
+};
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
        "@tanstack/react-virtual": "^3.13.21",
        "@types/d3": "^7.4.3",
        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
        "cobe": "^0.6.5",
        "country-flag-icons": "^1.6.4",
        "d3": "^7.9.0",
@@ -36,6 +37,7 @@
        "sonner": "^2.0.7",
        "svg-dotted-map": "^2.0.1",
        "swr": "^2.3.3",
+        "tailwind-merge": "^3.5.0",
        "xlsx": "^0.18.5"
      },
      "devDependencies": {
@@ -1684,6 +1686,16 @@
        "react-dom": ">=18"
      }
    },
+    "node_modules/@ciphera-net/ui/node_modules/tailwind-merge": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
+      "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
    "node_modules/@csstools/color-helpers": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
@@ -14352,9 +14364,9 @@
      "license": "MIT"
    },
    "node_modules/tailwind-merge": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
-      "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
      "license": "MIT",
      "funding": {
        "type": "github",
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
    "@tanstack/react-virtual": "^3.13.21",
    "@types/d3": "^7.4.3",
    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
    "cobe": "^0.6.5",
    "country-flag-icons": "^1.6.4",
    "d3": "^7.9.0",
@@ -40,6 +41,7 @@
    "sonner": "^2.0.7",
    "svg-dotted-map": "^2.0.1",
    "swr": "^2.3.3",
+    "tailwind-merge": "^3.5.0",
    "xlsx": "^0.18.5"
  },
  "overrides": {