From 42eb61434d227901d4ed96e2b8241dd088f6742a Mon Sep 17 00:00:00 2001
From: RieN 7z <zrien7@gmail.com>
Date: Wed, 10 Sep 2025 03:56:48 +0800
Subject: [PATCH] fix: Navbar css (#10025)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: NavbarContainer padding-left in fullscreen

* fix: use `NavbarIcon` in mac search icon

* fix: NarrowIcon in KnowledgeContent

* fix: Fix NavbarIcon & NarrowIcon for search & expand btn

---------

Co-authored-by: 自由的世界人 <3196812536@qq.com>
---
 src/renderer/src/components/app/Navbar.tsx    |  8 ++--
 src/renderer/src/pages/home/Navbar.tsx        | 38 +++++++++----------
 .../src/pages/knowledge/KnowledgeContent.tsx  | 10 +----
 3 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx
index 5b1807451b..41bad7260e 100644
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -13,6 +13,7 @@ type Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>
 
 export const Navbar: FC<Props> = ({ children, ...props }) => {
   const backgroundColor = useNavBackgroundColor()
+  const isFullscreen = useFullscreen()
   const { isTopNavbar } = useNavbarPosition()
   const { minappShow } = useRuntime()
 
@@ -22,7 +23,7 @@ export const Navbar: FC<Props> = ({ children, ...props }) => {
 
   return (
     <>
-      <NavbarContainer {...props} style={{ backgroundColor }}>
+      <NavbarContainer {...props} style={{ backgroundColor }} $isFullScreen={isFullscreen}>
         {children}
       </NavbarContainer>
       {!isTopNavbar && !minappShow && <WindowControls />}
@@ -60,14 +61,15 @@ export const NavbarHeader: FC<Props> = ({ children, ...props }) => {
   return <NavbarHeaderContent {...props}>{children}</NavbarHeaderContent>
 }
 
-const NavbarContainer = styled.div`
+const NavbarContainer = styled.div<{ $isFullScreen: boolean }>`
   min-width: 100%;
   display: flex;
   flex-direction: row;
   min-height: ${isMac ? 'env(titlebar-area-height)' : 'var(--navbar-height)'};
   max-height: var(--navbar-height);
   margin-left: ${isMac ? 'calc(var(--sidebar-width) * -1)' : 0};
-  padding-left: ${isMac ? 'env(titlebar-area-x)' : 0};
+  padding-left: ${({ $isFullScreen }) =>
+    isMac ? ($isFullScreen ? 'var(--sidebar-width)' : 'env(titlebar-area-x)') : 0};
   -webkit-app-region: drag;
 `
 
diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/Navbar.tsx
index 20536e9321..51bf834149 100644
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@@ -86,26 +86,26 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
         )}
       </AnimatePresence>
       {!showAssistants && (
-        <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={0.8}>
-          <NavbarIcon onClick={() => toggleShowAssistants()} style={{ marginRight: 8, marginLeft: -12 }}>
-            <PanelRightClose size={18} />
-          </NavbarIcon>
-        </Tooltip>
-      )}
-      <AnimatePresence initial={false}>
-        {!showAssistants && (
-          <motion.div
-            initial={{ width: 0, opacity: 0 }}
-            animate={{ width: 'auto', opacity: 1 }}
-            exit={{ width: 0, opacity: 0 }}
-            transition={{ duration: 0.3, ease: 'easeInOut' }}
-            style={{ overflow: 'hidden' }}>
-            <NavbarIcon onClick={onShowAssistantsDrawer} style={{ marginRight: 8 }}>
-              <Menu size={18} />
+        <NavbarLeft style={{ justifyContent: 'flex-start', borderRight: 'none', padding: '0 10px', minWidth: 'auto' }}>
+          <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={0.8}>
+            <NavbarIcon onClick={() => toggleShowAssistants()}>
+              <PanelRightClose size={18} />
             </NavbarIcon>
-          </motion.div>
-        )}
-      </AnimatePresence>
+          </Tooltip>
+          <AnimatePresence initial={false}>
+            <motion.div
+              initial={{ width: 0, opacity: 0 }}
+              animate={{ width: 'auto', opacity: 1 }}
+              exit={{ width: 0, opacity: 0 }}
+              transition={{ duration: 0.3, ease: 'easeInOut' }}
+              style={{ overflow: 'hidden' }}>
+              <NavbarIcon onClick={onShowAssistantsDrawer} style={{ marginLeft: 8 }}>
+                <Menu size={18} />
+              </NavbarIcon>
+            </motion.div>
+          </AnimatePresence>
+        </NavbarLeft>
+      )}
       <HStack alignItems="center" gap={6}>
         <SelectModelButton assistant={assistant} />
       </HStack>
diff --git a/src/renderer/src/pages/knowledge/KnowledgeContent.tsx b/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
index 2adaaba728..8f75d3d45a 100644
--- a/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
+++ b/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
@@ -167,9 +167,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
         </ModelInfo>
         <HStack gap={8} alignItems="center">
           {/* 使用selected base导致修改设置后没有响应式更新 */}
-          <NarrowIcon onClick={() => base && KnowledgeSearchPopup.show({ base: base })}>
+          <NavbarIcon onClick={() => base && KnowledgeSearchPopup.show({ base: base })}>
             <Search size={18} />
-          </NarrowIcon>
+          </NavbarIcon>
         </HStack>
       </HeaderContainer>
       <StyledTabs activeKey={activeKey} onChange={setActiveKey} items={tabItems} type="line" size="small" />
@@ -290,12 +290,6 @@ const ModelInfo = styled.div`
   }
 `
 
-const NarrowIcon = styled(NavbarIcon)`
-  @media (max-width: 1000px) {
-    display: none;
-  }
-`
-
 export const ItemContainer = styled.div`
   display: flex;
   flex-direction: column;