From abca91c26a5f888593c13d88ab8dd358cb36cf3b Mon Sep 17 00:00:00 2001
From: louiscklaw <louiscklaw@users.noreply.github.com>
Date: Sun, 11 May 2025 10:39:09 +0800
Subject: [PATCH] "introduce horizontal main navigation component with dynamic
 styling and interactive elements"

---
 .../{main-nav.tsx => main-nav/index.tsx}      | 134 +++++++++++++++---
 1 file changed, 112 insertions(+), 22 deletions(-)
 rename 002_source/cms/src/components/dashboard/layout/horizontal/{main-nav.tsx => main-nav/index.tsx} (84%)

diff --git a/002_source/cms/src/components/dashboard/layout/horizontal/main-nav.tsx b/002_source/cms/src/components/dashboard/layout/horizontal/main-nav/index.tsx
similarity index 84%
rename from 002_source/cms/src/components/dashboard/layout/horizontal/main-nav.tsx
rename to 002_source/cms/src/components/dashboard/layout/horizontal/main-nav/index.tsx
index 71acbe5..f679fca 100644
--- a/002_source/cms/src/components/dashboard/layout/horizontal/main-nav.tsx
+++ b/002_source/cms/src/components/dashboard/layout/horizontal/main-nav/index.tsx
@@ -92,7 +92,11 @@ export function MainNav({ color = 'evident', items = [] }: MainNavProps): React.
             py: 1,
           }}
         >
-          <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flex: '1 1 auto' }}
+          >
             <IconButton
               onClick={(): void => {
                 setOpenNav(true);
@@ -101,8 +105,16 @@ export function MainNav({ color = 'evident', items = [] }: MainNavProps): React.
             >
               <ListIcon color="var(--NavItem-icon-color)" />
             </IconButton>
-            <Box component={RouterLink} href={paths.home} sx={{ display: { xs: 'none', md: 'inline-block' } }}>
-              <Logo color={logoColor} height={32} width={122} />
+            <Box
+              component={RouterLink}
+              href={paths.home}
+              sx={{ display: { xs: 'none', md: 'inline-block' } }}
+            >
+              <Logo
+                color={logoColor}
+                height={32}
+                width={122}
+              />
             </Box>
             <Box sx={{ display: { xs: 'none', md: 'block' } }}>
               <WorkspacesSwitch />
@@ -154,11 +166,17 @@ function SearchButton(): React.JSX.Element {
   return (
     <React.Fragment>
       <Tooltip title="Search">
-        <IconButton onClick={dialog.handleOpen} sx={{ display: { xs: 'none', md: 'inline-flex' } }}>
+        <IconButton
+          onClick={dialog.handleOpen}
+          sx={{ display: { xs: 'none', md: 'inline-flex' } }}
+        >
           <MagnifyingGlassIcon color="var(--NavItem-icon-color)" />
         </IconButton>
       </Tooltip>
-      <SearchDialog onClose={dialog.handleClose} open={dialog.open} />
+      <SearchDialog
+        onClose={dialog.handleClose}
+        open={dialog.open}
+      />
     </React.Fragment>
   );
 }
@@ -174,12 +192,19 @@ function NotificationsButton(): React.JSX.Element {
           sx={{ '& .MuiBadge-dot': { borderRadius: '50%', height: '10px', right: '6px', top: '6px', width: '10px' } }}
           variant="dot"
         >
-          <IconButton onClick={popover.handleOpen} ref={popover.anchorRef}>
+          <IconButton
+            onClick={popover.handleOpen}
+            ref={popover.anchorRef}
+          >
             <BellIcon color="var(--NavItem-icon-color)" />
           </IconButton>
         </Badge>
       </Tooltip>
-      <NotificationsPopover anchorEl={popover.anchorRef.current} onClose={popover.handleClose} open={popover.open} />
+      <NotificationsPopover
+        anchorEl={popover.anchorRef.current}
+        onClose={popover.handleClose}
+        open={popover.open}
+      />
     </React.Fragment>
   );
 }
@@ -190,11 +215,18 @@ function ContactsButton(): React.JSX.Element {
   return (
     <React.Fragment>
       <Tooltip title="Contacts">
-        <IconButton onClick={popover.handleOpen} ref={popover.anchorRef}>
+        <IconButton
+          onClick={popover.handleOpen}
+          ref={popover.anchorRef}
+        >
           <UsersIcon color="var(--NavItem-icon-color)" />
         </IconButton>
       </Tooltip>
-      <ContactsPopover anchorEl={popover.anchorRef.current} onClose={popover.handleClose} open={popover.open} />
+      <ContactsPopover
+        anchorEl={popover.anchorRef.current}
+        onClose={popover.handleClose}
+        open={popover.open}
+      />
     </React.Fragment>
   );
 }
@@ -214,11 +246,20 @@ function LanguageSwitch(): React.JSX.Element {
           sx={{ display: { xs: 'none', md: 'inline-flex' } }}
         >
           <Box sx={{ height: '24px', width: '24px' }}>
-            <Box alt={language} component="img" src={flag} sx={{ height: 'auto', width: '100%' }} />
+            <Box
+              alt={language}
+              component="img"
+              src={flag}
+              sx={{ height: 'auto', width: '100%' }}
+            />
           </Box>
         </IconButton>
       </Tooltip>
-      <LanguagePopover anchorEl={popover.anchorRef.current} onClose={popover.handleClose} open={popover.open} />
+      <LanguagePopover
+        anchorEl={popover.anchorRef.current}
+        onClose={popover.handleClose}
+        open={popover.open}
+      />
     </React.Fragment>
   );
 }
@@ -259,7 +300,11 @@ function UserButton(): React.JSX.Element {
           <Avatar src={user.avatar} />
         </Badge>
       </Box>
-      <UserPopover anchorEl={popover.anchorRef.current} onClose={popover.handleClose} open={popover.open} />
+      <UserPopover
+        anchorEl={popover.anchorRef.current}
+        onClose={popover.handleClose}
+        open={popover.open}
+      />
     </React.Fragment>
   );
 }
@@ -267,7 +312,11 @@ function UserButton(): React.JSX.Element {
 function renderNavGroups({ items = [], pathname }: { items?: NavItemConfig[]; pathname: string }): React.JSX.Element {
   const children = items.reduce((acc: React.ReactNode[], curr: NavItemConfig): React.ReactNode[] => {
     acc.push(
-      <Box component="li" key={curr.key} sx={{ flex: '0 0 auto' }}>
+      <Box
+        component="li"
+        key={curr.key}
+        sx={{ flex: '0 0 auto' }}
+      >
         {renderNavItems({ pathname, items: curr.items })}
       </Box>
     );
@@ -276,7 +325,12 @@ function renderNavGroups({ items = [], pathname }: { items?: NavItemConfig[]; pa
   }, []);
 
   return (
-    <Stack component="ul" direction="row" spacing={2} sx={{ listStyle: 'none', m: 0, p: '8px 12px' }}>
+    <Stack
+      component="ul"
+      direction="row"
+      spacing={2}
+      sx={{ listStyle: 'none', m: 0, p: '8px 12px' }}
+    >
       {children}
     </Stack>
   );
@@ -286,13 +340,24 @@ function renderNavItems({ items = [], pathname }: { items?: NavItemConfig[]; pat
   const children = items.reduce((acc: React.ReactNode[], curr: NavItemConfig): React.ReactNode[] => {
     const { key, ...item } = curr;
 
-    acc.push(<NavItem key={key} pathname={pathname} {...item} />);
+    acc.push(
+      <NavItem
+        key={key}
+        pathname={pathname}
+        {...item}
+      />
+    );
 
     return acc;
   }, []);
 
   return (
-    <Stack component="ul" direction="row" spacing={2} sx={{ listStyle: 'none', m: 0, p: 0 }}>
+    <Stack
+      component="ul"
+      direction="row"
+      spacing={2}
+      sx={{ listStyle: 'none', m: 0, p: 0 }}
+    >
       {children}
     </Stack>
   );
@@ -318,7 +383,10 @@ function NavItem({
   const isBranch = Boolean(items);
 
   const element = (
-    <Box component="li" sx={{ userSelect: 'none' }}>
+    <Box
+      component="li"
+      sx={{ userSelect: 'none' }}
+    >
       <Box
         {...(isBranch
           ? { role: 'button' }
@@ -373,10 +441,19 @@ function NavItem({
             {title}
           </Typography>
         </Box>
-        {label ? <Chip color="primary" label={label} size="small" /> : null}
+        {label ? (
+          <Chip
+            color="primary"
+            label={label}
+            size="small"
+          />
+        ) : null}
         {external ? (
           <Box sx={{ alignItems: 'center', display: 'flex', flex: '0 0 auto' }}>
-            <ArrowSquareOutIcon color="var(--NavItem-icon-color)" fontSize="var(--icon-fontSize-sm)" />
+            <ArrowSquareOutIcon
+              color="var(--NavItem-icon-color)"
+              fontSize="var(--icon-fontSize-sm)"
+            />
           </Box>
         ) : null}
         {isBranch ? (
@@ -415,13 +492,23 @@ function renderDropdownItems({
   const children = items.reduce((acc: React.ReactNode[], curr: NavItemConfig): React.ReactNode[] => {
     const { key, ...item } = curr;
 
-    acc.push(<DropdownItem key={key} pathname={pathname} {...item} />);
+    acc.push(
+      <DropdownItem
+        key={key}
+        pathname={pathname}
+        {...item}
+      />
+    );
 
     return acc;
   }, []);
 
   return (
-    <Stack component="ul" spacing={1} sx={{ listStyle: 'none', m: 0, p: 0 }}>
+    <Stack
+      component="ul"
+      spacing={1}
+      sx={{ listStyle: 'none', m: 0, p: 0 }}
+    >
       {children}
     </Stack>
   );
@@ -444,7 +531,10 @@ function DropdownItem({
   const isBranch = Boolean(items);
 
   const element = (
-    <Box component="li" sx={{ userSelect: 'none' }}>
+    <Box
+      component="li"
+      sx={{ userSelect: 'none' }}
+    >
       <Box
         {...(isBranch
           ? { role: 'button' }