HorizontalMenuIcon

ui/src/components/template/HorizontalMenuContent/HorizontalMenuContent.tsx

@@ -10,6 +10,7 @@ import { useStoreState } from '@/store'
 import { useTranslation } from 'react-i18next'
 import HorizontalMenuDropdownItem from './HorizontalMenuDropdownItem'
 import HorizontalMenuItem from './HorizontalMenuItem'
+import HorizontalMenuIcon from './HorizontalMenuIcon'
 
 type HorizontalMenuContentProps = {
   manuVariant: NavMode
@@ -37,7 +38,16 @@ const HorizontalMenuContent = ({ manuVariant }: HorizontalMenuContentProps) => {
                     permissions={secondarySubNav.authority}
                   >
                     {secondarySubNav.subMenu.length > 0 ? (
-                      <Dropdown.Menu title={t(secondarySubNav.translateKey, secondarySubNav.title)}>
+                      <Dropdown.Menu
+                        title={
+                          <div className="flex items-center">
+                            <HorizontalMenuIcon icon={secondarySubNav.icon} />
+                            <span>
+                              {t(secondarySubNav.translateKey, secondarySubNav.title)}
+                            </span>
+                          </div>
+                        }
+                      >
                         {secondarySubNav.subMenu.map((tertiarySubNav) => (
                           <PermissionCheck
                             key={tertiarySubNav.key}

ui/src/components/template/HorizontalMenuContent/HorizontalMenuDropdownItem.tsx

@@ -15,7 +15,7 @@ export type HorizontalMenuItemProps = {
 }
 
 const HorizontalMenuDropdownItem = ({ nav }: HorizontalMenuItemProps) => {
-    const { title, translateKey, path, key, isExternalLink } = nav
+    const { title, translateKey, path, key, isExternalLink, icon } = nav
 
     const { t } = useTranslation()
 
@@ -26,19 +26,20 @@ const HorizontalMenuDropdownItem = ({ nav }: HorizontalMenuItemProps) => {
             eventKey={key} 
             className={
                 classNames(
-                    path && 'px-1'
+                    path 
                 )
-            }
+            } 
         >
             {path ? (
                 <HorizontalMenuNavLink 
                     path={path}
                     className={
                         classNames(
-                            path && 'px-2'
+                            path 
                         )
                     }
                     isExternalLink={isExternalLink}
+                    icon={icon}
                 >
                     {itemTitle}
                 </HorizontalMenuNavLink>

ui/src/components/template/HorizontalMenuContent/HorizontalMenuIcon.tsx

@@ -0,0 +1,26 @@
+import navigationIcon from '@/configs/navigation-icon.config'
+import type { ElementType, ComponentPropsWithRef } from 'react'
+
+type HorizontalMenuIconProps = {
+  icon: string
+}
+
+export const Icon = <T extends ElementType>({
+  component,
+  ...props
+}: {
+  header: T
+} & ComponentPropsWithRef<T>) => {
+  const Component = component
+  return <Component {...props} />
+}
+
+const HorizontalMenuIcon = ({ icon }: HorizontalMenuIconProps) => {
+  if (typeof icon !== 'string' && !icon) {
+    return <></>
+  }
+
+  return <span className="text-2xl ltr:mr-2 rtl:ml-2">{navigationIcon[icon]}</span>
+}
+
+export default HorizontalMenuIcon

ui/src/components/template/HorizontalMenuContent/HorizontalMenuNavLink.tsx

@@ -1,32 +1,34 @@
 import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 import type { PropsWithChildren } from 'react'
+import HorizontalMenuIcon from './HorizontalMenuIcon'
 
 export type HorizontalMenuNavLinkProps = PropsWithChildren<{
-    path: string
+  path: string
-    isExternalLink?: boolean
+  isExternalLink?: boolean
-    className?: string
+  className?: string
+  icon?: string
 }>
 
 const HorizontalMenuNavLink = ({
-    path,
+  path,
-    children,
+  children,
-    isExternalLink,
+  isExternalLink,
-    className
+  className,
+  icon,
 }: HorizontalMenuNavLinkProps) => {
-    return (
+  return (
-        <Link 
+    <div className="flex items-center">
-            className={
+      <Link
-                classNames(
+        className={classNames('h-full w-full flex items-center', className)}
-                    'h-full w-full flex items-center',
+        to={path}
-                    className
+        target={isExternalLink ? '_blank' : ''}
-                )} 
+      >
-            to={path}
+        <HorizontalMenuIcon icon={icon || ''} />
-            target={isExternalLink ? '_blank' :  ''}
+        <span>{children}</span>
-        >
+      </Link>
-            <span>{children}</span>
+    </div>
-        </Link>
+  )
-    )
 }
 
 export default HorizontalMenuNavLink