From 1a42e860104341758646608dda78acb6fab25268 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Wed, 14 Aug 2024 21:28:44 +0800
Subject: [PATCH] feat: new windows and linux sidebar style

---
 src/renderer/src/components/app/Navbar.tsx  |  4 ++--
 src/renderer/src/components/app/Sidebar.tsx | 15 ++++++++-------
 src/renderer/src/pages/home/HomePage.tsx    |  2 +-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx
index c2c62d1a48..c63260c43a 100644
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -34,7 +34,7 @@ const NavbarContainer = styled.div`
   flex-direction: row;
   min-height: var(--navbar-height);
   max-height: var(--navbar-height);
-  margin-left: calc(var(--sidebar-width) * -1);
+  margin-left: ${isMac ? 'calc(var(--sidebar-width) * -1)' : 0};
   padding-left: ${isMac ? 'var(--sidebar-width)' : 0};
   border-bottom: 0.5px solid var(--color-border);
   background-color: var(--navbar-background);
@@ -43,7 +43,7 @@ const NavbarContainer = styled.div`
 `
 
 const NavbarLeftContainer = styled.div`
-  min-width: ${isMac ? 'var(--assistants-width)' : 'calc(var(--sidebar-width) + var(--assistants-width))'};
+  min-width: var(--assistants-width);
   padding: 0 10px;
   display: flex;
   flex-direction: row;
diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index 3295d8882c..1d98a69f78 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -1,7 +1,9 @@
 import { TranslationOutlined } from '@ant-design/icons'
 import Logo from '@renderer/assets/images/logo.png'
+import { isMac } from '@renderer/config/constant'
 import useAvatar from '@renderer/hooks/useAvatar'
 import { useRuntime } from '@renderer/hooks/useStore'
+import { Avatar } from 'antd'
 import { FC } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
@@ -54,22 +56,21 @@ const Container = styled.div`
   align-items: center;
   padding: 8px 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height));
+  height: ${isMac ? 'calc(100vh - var(--navbar-height))' : '100vh'};
   -webkit-app-region: drag !important;
   border-right: 0.5px solid var(--color-border);
-  margin-top: var(--navbar-height);
-  margin-bottom: var(--navbar-height);
+  margin-top: ${isMac ? 'var(--navbar-height)' : 0};
   background-color: var(--sidebar-background);
   transition: background-color 0.3s ease;
 `
 
-const AvatarImg = styled.img`
-  border-radius: 50%;
+const AvatarImg = styled(Avatar)`
   width: 28px;
   height: 28px;
   background-color: var(--color-background-soft);
-  margin: 5px 0;
-  margin-top: 5px;
+  margin-bottom: ${isMac ? '12px' : '12px'};
+  margin-top: ${isMac ? '5px' : '2px'};
+  border: none;
 `
 const MainMenus = styled.div`
   display: flex;
diff --git a/src/renderer/src/pages/home/HomePage.tsx b/src/renderer/src/pages/home/HomePage.tsx
index b649c2c72f..e42255060d 100644
--- a/src/renderer/src/pages/home/HomePage.tsx
+++ b/src/renderer/src/pages/home/HomePage.tsx
@@ -120,7 +120,7 @@ export const NewButton = styled.div`
 
 const ThemeSwitch = styled(Switch)`
   -webkit-app-region: none;
-  margin-right: 8px;
+  margin-right: 10px;
   .icon-theme {
     font-size: 14px;
   }