Initial commit

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

@@ -0,0 +1,73 @@
+'use client'
+
+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'
+
+type INavProps = {
+  icon: React.ReactNode
+  text: string
+  activeSegment: string | string[]
+  link: string
+} & INavSelectorProps
+
+const Nav = ({
+  icon,
+  text,
+  activeSegment,
+  link,
+  curNav,
+  navs,
+  createText,
+  onCreate,
+}: INavProps) => {
+  const [hovered, setHovered] = useState(false)
+  const segment = useSelectedLayoutSegment()
+  const isActived = Array.isArray(activeSegment) ? activeSegment.includes(segment!) : segment === activeSegment
+
+  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)]'}
+    `}>
+      <Link href={link}>
+        <div
+          className={classNames(`
+            flex items-center h-8 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]'}
+          `)}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+        >
+          {
+            (hovered && curNav && isActived)
+              ? <ArrowLeftIcon className='mr-1 w-[18px] h-[18px]' />
+              : icon
+          }
+          {text}
+        </div>
+      </Link>
+      {
+        curNav && isActived && (
+          <>
+            <div className='font-light text-gray-300 '>/</div>
+            <NavSelector
+              curNav={curNav}
+              navs={navs}
+              createText={createText}
+              onCreate={onCreate}
+            />
+          </>
+        )
+      }
+    </div>
+  )
+}
+
+export default Nav