chore: use Menu for Drawer basic demo

Author: tugcekucukoglu

apps/showcase/demo/styled/drawer/basic-demo.tsx

@@ -9,6 +9,7 @@ import { Button } from '@primereact/ui/button';
 import { Drawer } from '@primereact/ui/drawer';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
+import { Menu } from '@primereact/ui/menu';
 import * as React from 'react';
 
 const navSections = [
@@ -51,13 +52,12 @@ export default function BasicDemo() {
                 <Drawer.Portal className="w-full md:w-80">
                     <Drawer.Header>
                         <Drawer.Title>Drawer Title</Drawer.Title>
-                        <Drawer.Close as={Button} iconOnly variant="text" rounded severity="secondary">
+                        <Drawer.Close className="w-8 h-8 rounded-full flex items-center justify-center text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors">
                             <Times />
                         </Drawer.Close>
                     </Drawer.Header>
                     <Drawer.Content pt={{ root: 'p-0' }}>
                         <div className="flex flex-col h-full">
-                            {/* Search */}
                             <div className="px-4 pb-4">
                                 <IconField.Root>
                                     <IconField.Inset>
@@ -72,58 +72,44 @@ export default function BasicDemo() {
                                 </IconField.Root>
                             </div>
 
-                            {/* Navigation */}
-                            <div className="flex-1 overflow-y-auto px-3">
-                                {navSections.map((section) => (
-                                    <div key={section.label} className="mb-4">
-                                        <span className="text-xs font-semibold text-surface-500 dark:text-surface-400 px-3 mb-2 block tracking-wider">
-                                            {section.label}
-                                        </span>
-                                        <ul className="list-none m-0 p-0">
-                                            {section.items.map((item) => (
-                                                <li key={item.label}>
-                                                    <a
-                                                        className={`flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-all mb-0.5 ${
-                                                            item.active
-                                                                ? 'bg-primary text-primary-contrast'
-                                                                : 'text-surface-700 dark:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800'
-                                                        }`}
+                            <div className="flex-1 overflow-y-auto px-4">
+                                <Menu.Root className="w-full border-0 bg-transparent p-0">
+                                    <Menu.List className="gap-0">
+                                        {navSections.map((section, sectionIndex) => (
+                                            <React.Fragment key={section.label}>
+                                                <Menu.Label className={`text-primary font-semibold text-xs tracking-wider px-0 py-1${sectionIndex > 0 ? ' mt-4' : ''}`}>
+                                                    {section.label}
+                                                </Menu.Label>
+                                                {section.items.map((item) => (
+                                                    <Menu.Item
+                                                        key={item.label}
+                                                        className={`text-sm hover:bg-transparent px-0 py-2.5${item.active ? ' text-primary font-semibold' : ''}`}
                                                     >
-                                                        <i className={`${item.icon} text-base`} />
-                                                        <span className="font-medium text-sm">{item.label}</span>
+                                                        <i className={`${item.icon} text-base${item.active ? ' text-primary' : ''}`} />
+                                                        {item.label}
                                                         {item.badge && (
                                                             <Badge
-                                                                severity={item.active ? 'secondary' : undefined}
                                                                 shape="circle"
                                                                 className="ml-auto"
                                                             >
                                                                 {item.badge}
                                                             </Badge>
                                                         )}
-                                                    </a>
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    </div>
-                                ))}
+                                                    </Menu.Item>
+                                                ))}
+                                            </React.Fragment>
+                                        ))}
 
-                                {/* Recent Activity */}
-                                <div className="mb-4">
-                                    <span className="text-xs font-semibold text-surface-500 dark:text-surface-400 px-3 mb-2 block tracking-wider">
-                                        RECENT
-                                    </span>
-                                    <ul className="list-none m-0 p-0">
+                                        <Menu.Label className="text-primary font-semibold text-xs tracking-wider px-0 py-1 mt-4">RECENT</Menu.Label>
                                         {recentItems.map((item) => (
-                                            <li key={item.label}>
-                                                <a className="flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-surface-700 dark:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all mb-0.5">
-                                                    <span className={`${item.color} w-2 h-2 rounded-full shrink-0`} />
-                                                    <span className="font-medium text-sm truncate">{item.label}</span>
-                                                    <span className="text-xs text-surface-400 ml-auto shrink-0">{item.time}</span>
-                                                </a>
-                                            </li>
+                                            <Menu.Item key={item.label} className="text-sm hover:bg-transparent px-0 py-2.5">
+                                                <span className={`${item.color} w-2 h-2 rounded-full shrink-0`} />
+                                                <span className="truncate">{item.label}</span>
+                                                <span className="text-xs text-surface-400 ml-auto shrink-0">{item.time}</span>
+                                            </Menu.Item>
                                         ))}
-                                    </ul>
-                                </div>
+                                    </Menu.List>
+                                </Menu.Root>
                             </div>
                         </div>
                     </Drawer.Content>