Feat/refact header (#468)

web/app/components/header/nav/index.tsx

@@ -4,12 +4,13 @@ import React, { useState } from 'react'
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import classNames from 'classnames'
-import { ArrowLeftIcon } from '@heroicons/react/24/solid'
 import type { INavSelectorProps } from './nav-selector'
 import NavSelector from './nav-selector'
+import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type INavProps = {
   icon: React.ReactNode
+  activeIcon?: React.ReactNode
   text: string
   activeSegment: string | string[]
   link: string
@@ -17,6 +18,7 @@ type INavProps = {
 
 const Nav = ({
   icon,
+  activeIcon,
   text,
   activeSegment,
   link,
@@ -32,25 +34,29 @@ const Nav = ({
 
   return (
     <div className={`
-      flex items-center h-8 mr-3 px-0.5  rounded-xl text-[14px] shrink-0
-      ${isActived && 'bg-white shadow-[0_2px_5px_-1px_rgba(0,0,0,0.05),0_2px_4px_-2px_rgba(0,0,0,0.05)]'}
+      flex items-center h-8 mr-3 px-0.5 rounded-xl text-sm shrink-0 font-medium
+      ${isActived && 'bg-white shadow-[0_2px_5px_-1px_rgba(0,0,0,0.05),0_2px_4px_-2px_rgba(0,0,0,0.05)] font-semibold'}
+      ${!curNav && !isActived && 'hover:bg-gray-200'}
     `}>
       <Link href={link}>
         <div
           className={classNames(`
-            flex items-center h-7 pl-2.5 pr-2
-            font-semibold cursor-pointer rounded-[10px]
-            ${isActived ? 'text-[#1C64F2]' : 'text-gray-500 hover:bg-gray-200'}
-            ${curNav && isActived && 'hover:bg-[#EBF5FF]'}
+            flex items-center h-7 px-2.5 cursor-pointer rounded-[10px]
+            ${isActived ? 'text-primary-600' : 'text-gray-500'}
+            ${curNav && isActived && 'hover:bg-primary-50'}
           `)}
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
         >
-          {
-            (hovered && curNav && isActived)
-              ? <ArrowLeftIcon className='mr-1 w-[18px] h-[18px]' />
-              : icon
-          }
+          <div className='mr-2'>
+            {
+              (hovered && curNav)
+                ? <ArrowNarrowLeft className='w-4 h-4' />
+                : isActived
+                  ? activeIcon
+                  : icon
+            }
+          </div>
           {text}
         </div>
       </Link>