feat: fe mobile responsive next (#1609)

web/app/components/header/index.tsx

@@ -1,43 +1,90 @@
 'use client'
 
 import Link from 'next/link'
+import { useSelectedLayoutSegment } from 'next/navigation'
+import classNames from 'classnames'
+import { useEffect } from 'react'
+import { Bars3Icon } from '@heroicons/react/20/solid'
+import { useBoolean } from 'ahooks'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
 import DatasetNav from './dataset-nav'
 import EnvNav from './env-nav'
 import ExploreNav from './explore-nav'
 import GithubStar from './github-star'
+import s from './index.module.css'
 import { WorkspaceProvider } from '@/context/workspace-context'
 import { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 const navClassName = `
-  flex items-center relative mr-3 px-3 h-8 rounded-xl
+  flex items-center relative mr-3 px-3 h-9 rounded-xl
   font-medium text-sm
   cursor-pointer
 `
 
 const Header = () => {
-  const { isCurrentWorkspaceManager } = useAppContext()
+  const selectedSegment = useSelectedLayoutSegment()
+  const { isCurrentWorkspaceManager, langeniusVersionInfo } = useAppContext()
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const [isShowNavMenu, { toggle, setFalse: hideNavMenu }] = useBoolean(false)
+
+  useEffect(() => {
+    hideNavMenu()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedSegment])
+
   return (
     <>
-      <div className='flex items-center'>
-        <Link href="/apps" className='flex items-center mr-4'>
-          <LogoSite />
-        </Link>
-        <GithubStar />
-      </div>
-      <div className='flex items-center'>
-        <ExploreNav className={navClassName} />
-        <AppNav />
-        {isCurrentWorkspaceManager && <DatasetNav />}
-      </div>
-      <div className='flex items-center flex-shrink-0'>
-        <EnvNav />
-        <WorkspaceProvider>
-          <AccountDropdown />
-        </WorkspaceProvider>
+      <div className={classNames(
+        s[`header-${langeniusVersionInfo.current_env}`],
+        'flex flex-1 items-center justify-between px-4',
+      )}>
+        <div className='flex items-center'>
+          {isMobile && <div
+            className='flex items-center justify-center h-8 w-8 cursor-pointer'
+            onClick={toggle}
+          >
+            <Bars3Icon className="h-4 w-4 text-gray-500" />
+          </div>}
+          {!isMobile && <>
+            <Link href="/apps" className='flex items-center mr-4'>
+              <LogoSite />
+            </Link>
+            <GithubStar />
+          </>}
+        </div>
+        {isMobile && (
+          <div className='flex'>
+            <Link href="/apps" className='flex items-center mr-4'>
+              <LogoSite />
+            </Link>
+            <GithubStar />
+          </div>
+        )}
+        {!isMobile && (
+          <div className='flex items-center'>
+            <ExploreNav className={navClassName} />
+            <AppNav />
+            {isCurrentWorkspaceManager && <DatasetNav />}
+          </div>
+        )}
+        <div className='flex items-center flex-shrink-0'>
+          <EnvNav />
+          <WorkspaceProvider>
+            <AccountDropdown isMobile={isMobile} />
+          </WorkspaceProvider>
+        </div>
       </div>
+      {(isMobile && isShowNavMenu) && (
+        <div className='w-full flex flex-col p-2 gap-y-1'>
+          <ExploreNav className={navClassName} />
+          <AppNav />
+          {isCurrentWorkspaceManager && <DatasetNav />}
+        </div>
+      )}
     </>
   )
 }