feat:(sidebar): compact layout

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'),

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);

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`

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;
+  width: 28px;
-  height: 32px;
+  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;
+  width: 34px;
-  height: 36px;
+  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;
   }

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' }}>