feat: add tooltip on collapsed navigation

hendraaagil · Oct 12, 2024 · f5a1bdd · f5a1bdd
1 parent 1b03b66
commit f5a1bdd
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/src/components/layout/navigation/link.tsx b/src/components/layout/navigation/link.tsx
@@ -4,37 +4,60 @@ import React from 'react'
 import { Link } from 'next-view-transitions'
 
 import { cn } from '@/lib/utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui'
+
+const TooltipContainer = ({
+  children,
+  content,
+}: { children: React.ReactNode; content: string }) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger>{children}</TooltipTrigger>
+      <TooltipContent side="right">
+        <p>{content}</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
 
 export const NavigationLink = ({
   href,
   currentPath,
+  name,
   children,
   isCollapse,
   ...rest
 }: {
   href: string
   currentPath: string
+  name: string
   children: React.ReactNode
   isCollapse?: boolean
 } & LinkProps) => {
   const regEx = new RegExp(`^${href}`)
   const isActive = href === '/' ? currentPath === href : regEx.test(currentPath)
 
-  return (
+  const link = (
     <Link
       href={href}
       className={cn(
-        'flex items-center space-x-2 border-2 border-transparent bg-slate-200 bg-opacity-25 px-3 py-2 font-medium tracking-wide transition-colors hover:border-color',
-        'dark:bg-slate-800 dark:bg-opacity-25',
+        'flex items-center space-x-2 border border-color px-3 py-2 font-medium transition-colors hover:bg-color-secondary',
         {
           'md:min-w-[10rem] ': !isCollapse,
           'justify-center': isCollapse,
-          'border-color bg-opacity-50 dark:bg-opacity-50': isActive,
+          'border-color bg-color-secondary bg-opacity-100 dark:bg-opacity-100':
+            isActive,
         },
       )}
       {...rest}
     >
       {children}
     </Link>
   )
+
+  if (isCollapse) {
+    return <TooltipContainer content={name}>{link}</TooltipContainer>
+  }
+
+  return link
 }
diff --git a/src/components/layout/navigation/navigation.tsx b/src/components/layout/navigation/navigation.tsx
@@ -15,6 +15,7 @@ import {
   Sheet,
   SheetContent,
   SheetTrigger,
+  TooltipProvider,
 } from '@/components/ui'
 import { ThemeToggle } from '@/components/theme'
 import {
@@ -49,6 +50,7 @@ const MobileNavigation = ({
             <li key={name}>
               <NavigationLink
                 href={href}
+                name={name}
                 currentPath={pathname}
                 onClick={() => setIsOpen(false)}
               >
@@ -71,7 +73,7 @@ export const Navigation = () => {
   const pathname = usePathname()
 
   return (
-    <>
+    <TooltipProvider>
       <nav
         className={cn(
           'sticky top-0 hidden min-h-screen w-48 flex-col items-center self-start px-4 py-8 sm:flex',
@@ -123,6 +125,7 @@ export const Navigation = () => {
             <li key={name}>
               <NavigationLink
                 href={href}
+                name={name}
                 currentPath={pathname}
                 isCollapse={isCollapse}
               >
@@ -152,6 +155,6 @@ export const Navigation = () => {
         isOpen={isOpen}
         setIsOpen={setIsOpen}
       />
-    </>
+    </TooltipProvider>
   )
 }