From fc187d6998e818580aca23d7496dd457eb268a15 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Tue, 17 Jun 2025 17:37:06 +0800
Subject: [PATCH] chore: responsive header (#21115)

---
 .../workplace-selector/index.tsx              |  19 +-
 web/app/components/header/app-nav/index.tsx   |   4 +-
 .../components/header/dataset-nav/index.tsx   |   3 +-
 web/app/components/header/env-nav/index.tsx   |  10 +-
 .../components/header/explore-nav/index.tsx   |   8 +-
 web/app/components/header/index.tsx           | 124 ++++-----
 web/app/components/header/nav/index.tsx       |   8 +-
 .../header/nav/nav-selector/index.tsx         | 246 +++++++++---------
 web/app/components/header/tools-nav/index.tsx |   8 +-
 9 files changed, 211 insertions(+), 219 deletions(-)

diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index 98668c61d2..f384cbc0bc 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -31,22 +31,22 @@ const WorkplaceSelector = () => {
   }
 
   return (
-    <Menu as="div" className="relative h-full w-full">
+    <Menu as="div" className="min-w-0">
       {
         ({ open }) => (
           <>
             <MenuButton className={cn(
               `
                 group flex w-full cursor-pointer items-center
-                gap-1.5 p-0.5 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} rounded-[10px]
+                p-0.5 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} rounded-[10px]
               `,
             )}>
-              <div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'>
+              <div className='mr-1.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px] max-[800px]:mr-0'>
                 <span className='h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90'>{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
               </div>
-              <div className='flex flex-row'>
-                <div className={'system-sm-medium max-w-[160px] truncate text-text-secondary'}>{currentWorkspace?.name}</div>
-                <RiArrowDownSLine className='h-4 w-4 text-text-secondary' />
+              <div className='flex min-w-0 items-center'>
+                <div className={'system-sm-medium min-w-0  max-w-[149px] truncate text-text-secondary max-[800px]:hidden'}>{currentWorkspace?.name}</div>
+                <RiArrowDownSLine className='h-4 w-4 shrink-0 text-text-secondary' />
               </div>
             </MenuButton>
             <Transition
@@ -59,10 +59,11 @@ const WorkplaceSelector = () => {
               leaveTo="transform opacity-0 scale-95"
             >
               <MenuItems
+                anchor="bottom start"
                 className={cn(
                   `
-                    shadows-shadow-lg absolute left-[-15px] mt-1 flex max-h-[400px] w-[280px] flex-col items-start overflow-y-auto rounded-xl
-                    bg-components-panel-bg-blur backdrop-blur-[5px]
+                    shadows-shadow-lg absolute left-[-15px] z-[1000] mt-1 flex max-h-[400px] w-[280px] flex-col items-start overflow-y-auto
+                    rounded-xl bg-components-panel-bg-blur backdrop-blur-[5px]
                   `,
                 )}
               >
@@ -73,7 +74,7 @@ const WorkplaceSelector = () => {
                   {
                     workspaces.map(workspace => (
                       <div className='flex items-center gap-2 self-stretch rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
-                        <div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'>
+                        <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'>
                           <span className='h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90'>{workspace?.name[0]?.toLocaleUpperCase()}</span>
                         </div>
                         <div className='system-md-regular line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary'>{workspace.name}</div>
diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
index 3b902811fc..4934ed3105 100644
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -96,7 +96,7 @@ const AppNav = () => {
           link,
         }
       })
-      setNavItems(navItems)
+      setNavItems(navItems as any)
     }
   }, [appsData, isCurrentWorkspaceEditor, setNavItems])
 
@@ -122,7 +122,7 @@ const AppNav = () => {
         text={t('common.menus.apps')}
         activeSegment={['apps', 'app']}
         link='/apps'
-        curNav={appDetail}
+        curNav={appDetail as any}
         navs={navItems}
         createText={t('common.menus.newApp')}
         onCreate={openModal}
diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx
index 4894a62484..85223f9f37 100644
--- a/web/app/components/header/dataset-nav/index.tsx
+++ b/web/app/components/header/dataset-nav/index.tsx
@@ -48,7 +48,7 @@ const DatasetNav = () => {
       text={t('common.menus.datasets')}
       activeSegment='datasets'
       link='/datasets'
-      curNav={currentDataset as Omit<NavItem, 'link'>}
+      curNav={currentDataset as any}
       navs={datasetItems.map(dataset => ({
         id: dataset.id,
         name: dataset.name,
@@ -59,6 +59,7 @@ const DatasetNav = () => {
       createText={t('common.menus.newDataset')}
       onCreate={() => router.push(`${basePath}/datasets/create`)}
       onLoadmore={handleLoadmore}
+      isApp={false}
     />
   )
 }
diff --git a/web/app/components/header/env-nav/index.tsx b/web/app/components/header/env-nav/index.tsx
index cec933a4c5..3f0b0f01dd 100644
--- a/web/app/components/header/env-nav/index.tsx
+++ b/web/app/components/header/env-nav/index.tsx
@@ -20,22 +20,22 @@ const EnvNav = () => {
 
   return (
     <div className={`
-      mr-4 flex h-[22px] items-center rounded-md border px-2 text-xs font-medium
+      mr-1 flex h-[22px] items-center rounded-md border px-2 text-xs font-medium
       ${headerEnvClassName[langeniusVersionInfo.current_env]}
     `}>
       {
         langeniusVersionInfo.current_env === 'TESTING' && (
           <>
-            <Beaker02 className='mr-1 h-3 w-3' />
-            {t('common.environment.testing')}
+            <Beaker02 className='h-3 w-3' />
+            <div className='ml-1 max-[1280px]:hidden'>{t('common.environment.testing')}</div>
           </>
         )
       }
       {
         langeniusVersionInfo.current_env === 'DEVELOPMENT' && (
           <>
-            <TerminalSquare className='mr-1 h-3 w-3' />
-            {t('common.environment.development')}
+            <TerminalSquare className='h-3 w-3' />
+            <div className='ml-1 max-[1280px]:hidden'>{t('common.environment.development')}</div>
           </>
         )
       }
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index b6ebf5d1a9..6896722a84 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -27,10 +27,12 @@ const ExploreNav = ({
     )}>
       {
         activated
-          ? <RiPlanetFill className='mr-2 h-4 w-4' />
-          : <RiPlanetLine className='mr-2 h-4 w-4' />
+          ? <RiPlanetFill className='h-4 w-4' />
+          : <RiPlanetLine className='h-4 w-4' />
       }
-      {t('common.menus.explore')}
+      <div className='ml-2 max-[1024px]:hidden'>
+        {t('common.menus.explore')}
+      </div>
     </Link>
   )
 }
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index a9c26e0070..48973e50a8 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -1,9 +1,6 @@
 'use client'
-import { useCallback, useEffect } from 'react'
+import { useCallback } from 'react'
 import Link from 'next/link'
-import { useBoolean } from 'ahooks'
-import { useSelectedLayoutSegment } from 'next/navigation'
-import { Bars3Icon } from '@heroicons/react/20/solid'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
 import DatasetNav from './dataset-nav'
@@ -24,17 +21,15 @@ import { Plan } from '../billing/type'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const navClassName = `
-  flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
+  flex items-center relative px-3 h-8 rounded-xl
   font-medium text-sm
   cursor-pointer
 `
 
 const Header = () => {
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
-  const selectedSegment = useSelectedLayoutSegment()
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
-  const [isShowNavMenu, { toggle, setFalse: hideNavMenu }] = useBoolean(false)
   const { enableBilling, plan } = useProviderContext()
   const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
@@ -46,23 +41,12 @@ const Header = () => {
       setShowAccountSettingModal({ payload: 'billing' })
   }, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])
 
-  useEffect(() => {
-    hideNavMenu()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedSegment])
-  return (
-    <div className='relative flex flex-1 items-center justify-between bg-background-body'>
-      <div className='flex items-center'>
-        {isMobile && <div
-          className='flex h-8 w-8 cursor-pointer items-center justify-center'
-          onClick={toggle}
-        >
-          <Bars3Icon className="h-4 w-4 text-gray-500" />
-        </div>}
-        {
-          !isMobile
-          && <div className='flex shrink-0 items-center gap-1.5 self-stretch pl-3'>
-            <Link href="/apps" className='flex h-8 shrink-0 items-center justify-center gap-2 px-0.5'>
+  if (isMobile) {
+    return (
+      <div className=''>
+        <div className='flex items-center justify-between px-2'>
+          <div className='flex items-center'>
+            <Link href="/apps" className='flex h-8 shrink-0 items-center justify-center px-0.5'>
               {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
                 ? <img
                   src={systemFeatures.branding.workspace_logo}
@@ -71,59 +55,61 @@ const Header = () => {
                 />
                 : <DifyLogo />}
             </Link>
-            <div className='font-light text-divider-deep'>/</div>
-            <div className='flex items-center gap-0.5'>
-              <WorkspaceProvider>
-                <WorkplaceSelector />
-              </WorkspaceProvider>
-              {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
+            <div className='mx-1.5 shrink-0 font-light text-divider-deep'>/</div>
+            <WorkspaceProvider>
+              <WorkplaceSelector />
+            </WorkspaceProvider>
+            {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
+          </div>
+          <div className='flex items-center'>
+            <div className='mr-2'>
+              <PluginsNav />
             </div>
+            <AccountDropdown />
           </div>
-        }
-      </div >
-      {isMobile && (
-        <div className='flex'>
-          <Link href="/apps" className='mr-4 flex items-center'>
-            {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-              ? <img
-                src={systemFeatures.branding.workspace_logo}
-                className='block h-[22px] w-auto object-contain'
-                alt='logo'
-              />
-              : <DifyLogo />}
-          </Link>
-          <div className='font-light text-divider-deep'>/</div>
-          {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
-        </div >
-      )}
-      {
-        !isMobile && (
-          <div className='absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center'>
-            {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
-            {!isCurrentWorkspaceDatasetOperator && <AppNav />}
-            {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
-            {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
-          </div>
-        )
-      }
-      <div className='flex shrink-0 items-center pr-3'>
+        </div>
+        <div className='my-1 flex items-center justify-center space-x-1'>
+          {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
+          {!isCurrentWorkspaceDatasetOperator && <AppNav />}
+          {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
+          {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex h-[60px] items-center'>
+      <div className='flex min-w-0 flex-[1]  items-center pl-3 pr-2 min-[1280px]:pr-3'>
+        <Link href="/apps" className='flex h-8 shrink-0 items-center justify-center px-0.5'>
+          {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
+            ? <img
+              src={systemFeatures.branding.workspace_logo}
+              className='block h-[22px] w-auto object-contain'
+              alt='logo'
+            />
+            : <DifyLogo />}
+        </Link>
+        <div className='mx-1.5 shrink-0 font-light text-divider-deep'>/</div>
+        <WorkspaceProvider>
+          <WorkplaceSelector />
+        </WorkspaceProvider>
+        {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
+      </div>
+      <div className='flex items-center space-x-2'>
+        {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
+        {!isCurrentWorkspaceDatasetOperator && <AppNav />}
+        {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
+        {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+      </div>
+      <div className='flex min-w-0 flex-[1] items-center justify-end pl-2 pr-3 min-[1280px]:pl-3'>
         <EnvNav />
         <div className='mr-2'>
           <PluginsNav />
         </div>
         <AccountDropdown />
       </div>
-      {
-        (isMobile && isShowNavMenu) && (
-          <div className='flex w-full flex-col gap-y-1 p-2'>
-            {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
-            {!isCurrentWorkspaceDatasetOperator && <AppNav />}
-            {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
-            {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
-          </div>
-        )
-      }
-    </div >
+    </div>
   )
 }
 export default Header
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index 293c66a7b0..dc68b712cb 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -46,7 +46,7 @@ const Nav = ({
 
   return (
     <div className={`
-      mr-0 flex h-8 shrink-0 items-center rounded-xl px-0.5 text-sm font-medium sm:mr-3
+      flex h-8 max-w-[670px] shrink-0 items-center rounded-xl px-0.5 text-sm font-medium max-[1024px]:max-w-[400px]
       ${isActivated && 'bg-components-main-nav-nav-button-bg-active font-semibold shadow-md'}
       ${!curNav && !isActivated && 'hover:bg-components-main-nav-nav-button-bg-hover'}
     `}>
@@ -61,7 +61,7 @@ const Nav = ({
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
         >
-          <div className='mr-2'>
+          <div>
             {
               (hovered && curNav)
                 ? <ArrowNarrowLeft className='h-4 w-4' />
@@ -70,7 +70,9 @@ const Nav = ({
                   : icon
             }
           </div>
-          {text}
+          <div className='ml-2 max-[1024px]:hidden'>
+            {text}
+          </div>
         </div>
       </Link>
       {
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 473abf03c1..77cf348da2 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -53,136 +53,134 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
   }, 50), [])
 
   return (
-    <div className="">
-      <Menu as="div" className="relative inline-block text-left">
-        {({ open }) => (
-          <>
-            <MenuButton className={cn(
-              'hover:hover:bg-components-main-nav-nav-button-bg-active-hover group inline-flex h-7 w-full items-center justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active',
-              open && 'bg-components-main-nav-nav-button-bg-active',
-            )}>
-              <div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div>
-              <RiArrowDownSLine
-                className={cn('ml-1 h-3 w-3 shrink-0 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
-                aria-hidden="true"
-              />
-            </MenuButton>
-            <MenuItems
-              className="
-                absolute -left-11 right-0 mt-1.5 w-60 max-w-80
-                origin-top-right divide-y divide-divider-regular rounded-lg bg-components-panel-bg-blur
-                shadow-lg
-              "
-            >
-              <div className="overflow-auto px-1 py-1" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
-                {
-                  navs.map(nav => (
-                    <MenuItem key={nav.id}>
-                      <div className='flex w-full cursor-pointer items-center truncate rounded-lg px-3 py-[6px] text-[14px] font-normal text-text-secondary hover:bg-state-base-hover' onClick={() => {
-                        if (curNav?.id === nav.id)
-                          return
-                        setAppDetail()
-                        router.push(nav.link)
-                      }} title={nav.name}>
-                        <div className='relative mr-2 h-6 w-6 rounded-md'>
-                          <AppIcon size='tiny' iconType={nav.icon_type} icon={nav.icon} background={nav.icon_background} imageUrl={nav.icon_url} />
-                          {!!nav.mode && (
-                            <span className={cn(
-                              'absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded border-[0.5px] border-[rgba(0,0,0,0.02)] bg-white p-0.5 shadow-sm',
-                            )}>
-                              {nav.mode === 'advanced-chat' && (
-                                <ChatBot className='h-2.5 w-2.5 text-[#1570EF]' />
-                              )}
-                              {nav.mode === 'agent-chat' && (
-                                <CuteRobot className='h-2.5 w-2.5 text-indigo-600' />
-                              )}
-                              {nav.mode === 'chat' && (
-                                <ChatBot className='h-2.5 w-2.5 text-[#1570EF]' />
-                              )}
-                              {nav.mode === 'completion' && (
-                                <AiText className='h-2.5 w-2.5 text-[#0E9384]' />
-                              )}
-                              {nav.mode === 'workflow' && (
-                                <Route className='h-2.5 w-2.5 text-[#f79009]' />
-                              )}
-                            </span>
-                          )}
-                        </div>
-                        <div className='truncate'>
-                          {nav.name}
-                        </div>
+    <Menu as="div" className="relative">
+      {({ open }) => (
+        <>
+          <MenuButton className={cn(
+            'hover:hover:bg-components-main-nav-nav-button-bg-active-hover group inline-flex h-7 w-full items-center justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active',
+            open && 'bg-components-main-nav-nav-button-bg-active',
+          )}>
+            <div className='max-w-[157px] truncate' title={curNav?.name}>{curNav?.name}</div>
+            <RiArrowDownSLine
+              className={cn('ml-1 h-3 w-3 shrink-0 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
+              aria-hidden="true"
+            />
+          </MenuButton>
+          <MenuItems
+            className="
+              absolute -left-11 right-0 mt-1.5 w-60 max-w-80
+              origin-top-right divide-y divide-divider-regular rounded-lg bg-components-panel-bg-blur
+              shadow-lg
+            "
+          >
+            <div className="overflow-auto px-1 py-1" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
+              {
+                navs.map(nav => (
+                  <MenuItem key={nav.id}>
+                    <div className='flex w-full cursor-pointer items-center truncate rounded-lg px-3 py-[6px] text-[14px] font-normal text-text-secondary hover:bg-state-base-hover' onClick={() => {
+                      if (curNav?.id === nav.id)
+                        return
+                      setAppDetail()
+                      router.push(nav.link)
+                    }} title={nav.name}>
+                      <div className='relative mr-2 h-6 w-6 rounded-md'>
+                        <AppIcon size='tiny' iconType={nav.icon_type} icon={nav.icon} background={nav.icon_background} imageUrl={nav.icon_url} />
+                        {!!nav.mode && (
+                          <span className={cn(
+                            'absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded border-[0.5px] border-[rgba(0,0,0,0.02)] bg-white p-0.5 shadow-sm',
+                          )}>
+                            {nav.mode === 'advanced-chat' && (
+                              <ChatBot className='h-2.5 w-2.5 text-[#1570EF]' />
+                            )}
+                            {nav.mode === 'agent-chat' && (
+                              <CuteRobot className='h-2.5 w-2.5 text-indigo-600' />
+                            )}
+                            {nav.mode === 'chat' && (
+                              <ChatBot className='h-2.5 w-2.5 text-[#1570EF]' />
+                            )}
+                            {nav.mode === 'completion' && (
+                              <AiText className='h-2.5 w-2.5 text-[#0E9384]' />
+                            )}
+                            {nav.mode === 'workflow' && (
+                              <Route className='h-2.5 w-2.5 text-[#f79009]' />
+                            )}
+                          </span>
+                        )}
+                      </div>
+                      <div className='truncate'>
+                        {nav.name}
                       </div>
-                    </MenuItem>
-                  ))
-                }
-              </div>
-              {!isApp && isCurrentWorkspaceEditor && (
-                <MenuItem as="div" className='w-full p-1'>
-                  <div onClick={() => onCreate('')} className={cn(
-                    'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover ',
-                  )}>
-                    <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border-[0.5px] border-divider-regular bg-background-default'>
-                      <RiAddLine className='h-4 w-4 text-text-primary' />
                     </div>
-                    <div className='grow text-left text-[14px] font-normal text-text-secondary'>{createText}</div>
+                  </MenuItem>
+                ))
+              }
+            </div>
+            {!isApp && isCurrentWorkspaceEditor && (
+              <MenuItem as="div" className='w-full p-1'>
+                <div onClick={() => onCreate('')} className={cn(
+                  'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover ',
+                )}>
+                  <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border-[0.5px] border-divider-regular bg-background-default'>
+                    <RiAddLine className='h-4 w-4 text-text-primary' />
                   </div>
-                </MenuItem>
-              )}
-              {isApp && isCurrentWorkspaceEditor && (
-                <Menu as="div" className="relative h-full w-full">
-                  {({ open }) => (
-                    <>
-                      <MenuButton className='w-full p-1'>
-                        <div className={cn(
-                          'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover',
-                          open && '!bg-state-base-hover',
-                        )}>
-                          <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border-[0.5px] border-divider-regular bg-background-default'>
-                            <RiAddLine className='h-4 w-4 text-text-primary' />
-                          </div>
-                          <div className='grow text-left text-[14px] font-normal text-text-secondary'>{createText}</div>
-                          <RiArrowRightSLine className='h-3.5 w-3.5 shrink-0 text-text-primary' />
+                  <div className='grow text-left text-[14px] font-normal text-text-secondary'>{createText}</div>
+                </div>
+              </MenuItem>
+            )}
+            {isApp && isCurrentWorkspaceEditor && (
+              <Menu as="div" className="relative h-full w-full">
+                {({ open }) => (
+                  <>
+                    <MenuButton className='w-full p-1'>
+                      <div className={cn(
+                        'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover',
+                        open && '!bg-state-base-hover',
+                      )}>
+                        <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border-[0.5px] border-divider-regular bg-background-default'>
+                          <RiAddLine className='h-4 w-4 text-text-primary' />
                         </div>
-                      </MenuButton>
-                      <Transition
-                        as={Fragment}
-                        enter="transition ease-out duration-100"
-                        enterFrom="transform opacity-0 scale-95"
-                        enterTo="transform opacity-100 scale-100"
-                        leave="transition ease-in duration-75"
-                        leaveFrom="transform opacity-100 scale-100"
-                        leaveTo="transform opacity-0 scale-95"
-                      >
-                        <MenuItems className={cn(
-                          'absolute right-[-198px] top-[3px] z-10 min-w-[200px] rounded-lg bg-components-panel-bg-blur shadow-lg',
-                        )}>
-                          <div className='p-1'>
-                            <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('blank')}>
-                              <FilePlus01 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' />
-                              {t('app.newApp.startFromBlank')}
-                            </div>
-                            <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('template')}>
-                              <FilePlus02 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' />
-                              {t('app.newApp.startFromTemplate')}
-                            </div>
+                        <div className='grow text-left text-[14px] font-normal text-text-secondary'>{createText}</div>
+                        <RiArrowRightSLine className='h-3.5 w-3.5 shrink-0 text-text-primary' />
+                      </div>
+                    </MenuButton>
+                    <Transition
+                      as={Fragment}
+                      enter="transition ease-out duration-100"
+                      enterFrom="transform opacity-0 scale-95"
+                      enterTo="transform opacity-100 scale-100"
+                      leave="transition ease-in duration-75"
+                      leaveFrom="transform opacity-100 scale-100"
+                      leaveTo="transform opacity-0 scale-95"
+                    >
+                      <MenuItems className={cn(
+                        'absolute right-[-198px] top-[3px] z-10 min-w-[200px] rounded-lg bg-components-panel-bg-blur shadow-lg',
+                      )}>
+                        <div className='p-1'>
+                          <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('blank')}>
+                            <FilePlus01 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' />
+                            {t('app.newApp.startFromBlank')}
                           </div>
-                          <div className='border-t border-divider-regular p-1'>
-                            <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('dsl')}>
-                              <FileArrow01 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' />
-                              {t('app.importDSL')}
-                            </div>
+                          <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('template')}>
+                            <FilePlus02 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' />
+                            {t('app.newApp.startFromTemplate')}
                           </div>
-                        </MenuItems>
-                      </Transition>
-                    </>
-                  )}
-                </Menu>
-              )}
-            </MenuItems>
-          </>
-        )}
-      </Menu>
-    </div>
+                        </div>
+                        <div className='border-t border-divider-regular p-1'>
+                          <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('dsl')}>
+                            <FileArrow01 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' />
+                            {t('app.importDSL')}
+                          </div>
+                        </div>
+                      </MenuItems>
+                    </Transition>
+                  </>
+                )}
+              </Menu>
+            )}
+          </MenuItems>
+        </>
+      )}
+    </Menu>
   )
 }
 
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
index b87398708c..bc9351cf70 100644
--- a/web/app/components/header/tools-nav/index.tsx
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -28,10 +28,12 @@ const ToolsNav = ({
     )}>
       {
         activated
-          ? <RiHammerFill className='mr-2 h-4 w-4' />
-          : <RiHammerLine className='mr-2 h-4 w-4' />
+          ? <RiHammerFill className='h-4 w-4' />
+          : <RiHammerLine className='h-4 w-4' />
       }
-      {t('common.menus.tools')}
+      <div className='ml-2 max-[1024px]:hidden'>
+        {t('common.menus.tools')}
+      </div>
     </Link>
   )
 }