From 71856a5cd57ad3831949d94bff37a9e040577a9b Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sun, 14 Jul 2024 13:28:45 +0800
Subject: [PATCH] feat:(sidebar): compact layout

---
 src/main/index.ts                                |  2 +-
 src/renderer/src/assets/styles/index.scss        |  2 +-
 src/renderer/src/components/app/Navbar.tsx       |  6 ++++--
 src/renderer/src/components/app/Sidebar.tsx      | 16 ++++++++--------
 .../src/pages/home/components/Navigation.tsx     |  2 +-
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/main/index.ts b/src/main/index.ts
index 09e1ff56..74954f63 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -24,7 +24,7 @@ function createWindow(): void {
     show: true,
     autoHideMenuBar: true,
     titleBarStyle: 'hiddenInset',
-    trafficLightPosition: { x: 8, y: 8 },
+    trafficLightPosition: { x: 8, y: 12 },
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index cc42e409..6d4cc466 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -33,7 +33,7 @@
   --color-border: #ffffff20;
 
   --navbar-height: 42px;
-  --sidebar-width: 68px;
+  --sidebar-width: 55px;
   --assistants-width: 235px;
   --topic-list-width: 250px;
   --settings-width: var(--assistants-width);
diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx
index 726c49e7..d30e2b79 100644
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -28,12 +28,14 @@ const NavbarContainer = styled.div`
   border-bottom: 0.5px solid var(--color-border);
   -webkit-app-region: drag;
   background-color: #1f1f1f;
+  margin-left: calc(var(--sidebar-width) * -1);
+  padding-left: var(--sidebar-width);
 `
 
 const NavbarLeftContainer = styled.div`
   min-width: var(--assistants-width);
   border-right: 1px solid var(--color-border);
-  padding: 0 16px;
+  padding: 0 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -48,7 +50,7 @@ const NavbarCenterContainer = styled.div`
   color: var(--color-text-1);
   text-align: center;
   border-right: 1px solid var(--color-border);
-  padding: 0 16px;
+  padding: 0 20px;
 `
 
 const NavbarRightContainer = styled.div`
diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index e4d71b15..ef30a43a 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -44,20 +44,20 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 16px 0;
+  padding: 12px 0;
   min-width: var(--sidebar-width);
   min-height: 100%;
-  padding-top: 40px;
-  padding-bottom: 10px;
   -webkit-app-region: drag !important;
   background-color: #1f1f1f;
   border-right: 0.5px solid var(--color-border);
+  margin-top: var(--navbar-height);
+  padding-bottom: calc(var(--navbar-height) + 6px);
 `
 
 const AvatarImg = styled.img`
   border-radius: 50%;
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   background-color: var(--color-background-soft);
   margin: 5px 0;
 `
@@ -73,8 +73,8 @@ const Menus = styled.div`
 `
 
 const Icon = styled.div`
-  width: 36px;
-  height: 36px;
+  width: 34px;
+  height: 34px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -84,7 +84,7 @@ const Icon = styled.div`
   -webkit-app-region: none;
   .iconfont {
     color: var(--color-icon);
-    font-size: 22px;
+    font-size: 20px;
     transition: color 0.2s ease;
     text-decoration: none;
   }
diff --git a/src/renderer/src/pages/home/components/Navigation.tsx b/src/renderer/src/pages/home/components/Navigation.tsx
index 42c5166c..3f2533a9 100644
--- a/src/renderer/src/pages/home/components/Navigation.tsx
+++ b/src/renderer/src/pages/home/components/Navigation.tsx
@@ -32,7 +32,7 @@ const Navigation: FC<Props> = ({ activeAssistant }) => {
     }))
 
   return (
-    <NavbarCenter style={{ border: 'none' }}>
+    <NavbarCenter style={{ border: 'none', padding: '0 15px' }}>
       {activeAssistant?.name}
       <DropdownMenu menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' } }} trigger={['click']}>
         <Button size="small" type="primary" ghost style={{ fontSize: '11px' }}>