fix: Navbar css (#10025)

* 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

@@ -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;
 `
 

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}>
+        <NavbarLeft style={{ justifyContent: 'flex-start', borderRight: 'none', padding: '0 10px', minWidth: 'auto' }}>
-          <NavbarIcon onClick={() => toggleShowAssistants()} style={{ marginRight: 8, marginLeft: -12 }}>
+          <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={0.8}>
-            <PanelRightClose size={18} />
+            <NavbarIcon onClick={() => toggleShowAssistants()}>
-          </NavbarIcon>
+              <PanelRightClose size={18} />
-        </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} />
             </NavbarIcon>
-          </motion.div>
+          </Tooltip>
-        )}
+          <AnimatePresence initial={false}>
-      </AnimatePresence>
+            <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>

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;