From ab8600864ee62069f90c7631f42c275f96525837 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 18 Mar 2025 19:52:29 +0800
Subject: [PATCH] refactor: implement useNavBackgroundColor hook for dynamic
 navbar background

- Replaced direct background color logic in Navbar and Sidebar components with useNavBackgroundColor hook for improved maintainability.
- Updated navbar background color variable in index.scss for consistency across components.
- Enhanced handling of background color based on window style and application state.
---
 src/renderer/src/assets/styles/index.scss     |  2 +-
 src/renderer/src/components/app/Navbar.tsx    |  7 ++----
 src/renderer/src/components/app/Sidebar.tsx   | 13 +++-------
 .../src/hooks/useNavBackgroundColor.ts        | 25 +++++++++++++++++++
 4 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 src/renderer/src/hooks/useNavBackgroundColor.ts

diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index e5a17fbe..5531ec5a 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -51,7 +51,7 @@
   --color-reference-background: #0b0e12;
 
   --navbar-background-mac: rgba(20, 20, 20, 0.55);
-  --navbar-background: rgba(40, 40, 40);
+  --navbar-background: #1f1f1f;
 
   --navbar-height: 40px;
   --sidebar-width: 50px;
diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx
index a4a95034..47c1b3f3 100644
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -1,15 +1,12 @@
 import { isMac } from '@renderer/config/constant'
-import { useSettings } from '@renderer/hooks/useSettings'
+import useNavBackgroundColor from '@renderer/hooks/useNavBackgroundColor'
 import { FC, PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
 type Props = PropsWithChildren & JSX.IntrinsicElements['div']
 
 export const Navbar: FC<Props> = ({ children, ...props }) => {
-  const { windowStyle } = useSettings()
-
-  const macTransparentWindow = isMac && windowStyle === 'transparent'
-  const backgroundColor = macTransparentWindow ? 'transparent' : 'var(--navbar-background)'
+  const backgroundColor = useNavBackgroundColor()
 
   return (
     <NavbarContainer {...props} style={{ backgroundColor }}>
diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index e5650cc8..015f49f6 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -10,6 +10,7 @@ import { AppLogo, UserAvatar } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import useAvatar from '@renderer/hooks/useAvatar'
 import { useMinapps } from '@renderer/hooks/useMinapps'
+import useNavBackgroundColor from '@renderer/hooks/useNavBackgroundColor'
 import { modelGenerating, useRuntime } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { isEmoji } from '@renderer/utils'
@@ -33,14 +34,13 @@ const Sidebar: FC = () => {
   const { minappShow } = useRuntime()
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { windowStyle, sidebarIcons } = useSettings()
+  const { sidebarIcons } = useSettings()
   const { theme, toggleTheme } = useTheme()
   const { pinned } = useMinapps()
 
   const onEditUser = () => UserPopup.show()
 
-  const macTransparentWindow = isMac && windowStyle === 'transparent'
-  const sidebarBgColor = macTransparentWindow ? 'transparent' : 'var(--navbar-background)'
+  const backgroundColor = useNavBackgroundColor()
 
   const showPinnedApps = pinned.length > 0 && sidebarIcons.visible.includes('minapp')
 
@@ -59,12 +59,7 @@ const Sidebar: FC = () => {
   }
 
   return (
-    <Container
-      id="app-sidebar"
-      style={{
-        backgroundColor: sidebarBgColor,
-        zIndex: minappShow ? 10000 : 'initial'
-      }}>
+    <Container id="app-sidebar" style={{ backgroundColor, zIndex: minappShow ? 10000 : 'initial' }}>
       {isEmoji(avatar) ? (
         <EmojiAvatar onClick={onEditUser}>{avatar}</EmojiAvatar>
       ) : (
diff --git a/src/renderer/src/hooks/useNavBackgroundColor.ts b/src/renderer/src/hooks/useNavBackgroundColor.ts
new file mode 100644
index 00000000..ec75bab6
--- /dev/null
+++ b/src/renderer/src/hooks/useNavBackgroundColor.ts
@@ -0,0 +1,25 @@
+import { isMac } from '@renderer/config/constant'
+import { useTheme } from '@renderer/context/ThemeProvider'
+
+import { useRuntime } from './useRuntime'
+import { useSettings } from './useSettings'
+
+function useNavBackgroundColor() {
+  const { windowStyle } = useSettings()
+  const { theme } = useTheme()
+  const { minappShow } = useRuntime()
+
+  const macTransparentWindow = isMac && windowStyle === 'transparent'
+
+  if (macTransparentWindow) {
+    return 'transparent'
+  }
+
+  if (minappShow) {
+    return theme === 'dark' ? 'var(--navbar-background)' : 'var(--color-white)'
+  }
+
+  return 'var(--navbar-background)'
+}
+
+export default useNavBackgroundColor