refactor(FE): refactor Dropdown component API and Navbar usage

src/components/Dropdown.tsx

@@ -0,0 +1,114 @@
+import React, { ReactNode, useState, useRef } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  className?: {
+    wrapper?: string;
+    trigger?: string;
+    content?: string;
+  };
+  align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  hover?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
+}
+
+const Dropdown = ({
+  trigger,
+  children,
+  className,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    if (!controlled) {
+      const newState = !isOpen;
+      setIsOpen(newState);
+    }
+  };
+
+  const getWrapperClasses = () => {
+    const openState = controlled ? open : isOpen;
+
+    return cn(
+      'dropdown',
+      {
+        'dropdown-start': align === 'start',
+        'dropdown-center': align === 'center',
+        'dropdown-end': align === 'end',
+        'dropdown-top': direction === 'top',
+        'dropdown-bottom': direction === 'bottom',
+        'dropdown-left': direction === 'left',
+        'dropdown-right': direction === 'right',
+        'dropdown-hover': hover,
+        'dropdown-open': openState && !close,
+        'dropdown-close': close,
+      },
+      className?.wrapper
+    );
+  };
+
+  const getTriggerClasses = () => {
+    return cn(className?.trigger);
+  };
+
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className={getWrapperClasses()}>
+      <div
+        tabIndex={0}
+        role='button'
+        className={getTriggerClasses()}
+        onClick={toggleDropdown}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        }}
+      >
+        {trigger}
+      </div>
+      {!close && (
+        <div tabIndex={-1} className={getContentClasses()}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/Navbar.tsx

@@ -7,7 +7,7 @@ import { Icon } from '@iconify/react';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Button from '@/components/Button';
-import Dropdown from '@/components/dropdown/Dropdown';
+import Dropdown from '@/components/Dropdown';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';
@@ -54,7 +54,8 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
 
       <div className='flex gap-2'>
         <Dropdown
-          position='bottom-end'
+          align='end'
+          direction='bottom'
           trigger={
             <div className='btn btn-ghost btn-circle avatar'>
               <div className='w-10 rounded-full border flex justify-center items-center'>
@@ -62,9 +63,11 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
               </div>
             </div>
           }
-          contentClassName='w-52 mt-3'
+          className={{
+            content: 'w-52 mt-3',
+          }}
         >
-          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
+          <Menu>
             <MenuItem title='Logout' onClick={logoutClickHandler} />
           </Menu>
         </Dropdown>

src/components/dropdown/Dropdown.tsx

@@ -1,116 +0,0 @@
-'use client';
-
-import { ReactNode, useRef, useEffect, useState } from 'react';
-import { cn } from '@/lib/helper';
-
-interface DropdownProps {
-  trigger: ReactNode;
-  children: ReactNode;
-  position?:
-    | 'top'
-    | 'bottom'
-    | 'left'
-    | 'right'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left-start'
-    | 'left-end'
-    | 'right-start'
-    | 'right-end';
-  align?: 'start' | 'center' | 'end';
-  hover?: boolean;
-  className?: string;
-  contentClassName?: string;
-}
-
-const Dropdown = ({
-  trigger,
-  children,
-  position = 'bottom',
-  align = 'start',
-  hover = false,
-  className,
-  contentClassName,
-}: DropdownProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // Handle click outside to close dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  // Build position classes
-  const getPositionClasses = () => {
-    const classes: string[] = [];
-
-    // Handle combined positions like 'top-start'
-    if (position.includes('-')) {
-      const [pos, al] = position.split('-');
-      classes.push(`dropdown-${pos}`);
-      classes.push(`dropdown-${al}`);
-    } else {
-      classes.push(`dropdown-${position}`);
-      if (align !== 'start') {
-        classes.push(`dropdown-${align}`);
-      }
-    }
-
-    return classes.join(' ');
-  };
-
-  const handleToggle = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // alert('clicked');
-    setIsOpen(!isOpen);
-  };
-
-  return (
-    <div
-      ref={dropdownRef}
-      className={cn(
-        'dropdown',
-        getPositionClasses(),
-        hover && 'dropdown-hover',
-        isOpen && 'dropdown-open',
-        className
-      )}
-    >
-      {/* Trigger Button */}
-      <div onClick={handleToggle} className='cursor-pointer'>
-        {trigger}
-      </div>
-
-      {/* Dropdown Content - Only render when open */}
-      {isOpen && (
-        <div
-          tabIndex={-1}
-          className={cn('dropdown-content z-[10]', contentClassName)}
-          onClick={() => setIsOpen(false)} // Close on item click
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Dropdown;