💄 style: fix sidebar style

lobehub · Apr 22, 2023 · 8738409 · 8738409
1 parent 0273840
commit 8738409
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/javascript/index.js b/javascript/index.js
diff --git a/src/components/ExtraNetworkSidebar/index.tsx b/src/components/ExtraNetworkSidebar/index.tsx
@@ -30,11 +30,11 @@ const SidebarView = styled.div<{ size: number }>`
 
 const Footer = styled.div`
   flex: 0;
-  padding: 12px 16px;
-  border-top: 1px soild ${({ theme }) => theme.colorSplit};
+  padding: 8px 16px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  border-top: 1px solid var(--color-border);
 `
 
 const ZoomSlider = styled(Slider)`

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -1,6 +1,6 @@
 import { DraggablePanel } from '@/components'
 import { useResponsive } from 'antd-style'
-import React, { useEffect, useState } from 'react'
+import React, { CSSProperties, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import PromptGroup from './PromptGroup'
 
@@ -14,9 +14,10 @@ const SidebarView = styled.div`
 interface SidebarProps {
   children: React.ReactNode
   loading?: boolean
+  style?: CSSProperties
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ children, loading }) => {
+const Sidebar: React.FC<SidebarProps> = ({ children, loading, style }) => {
   const { mobile } = useResponsive()
   const [expand, setExpand] = useState<boolean>(!mobile)
 
@@ -25,7 +26,13 @@ const Sidebar: React.FC<SidebarProps> = ({ children, loading }) => {
   }, [mobile])
 
   return (
-    <DraggablePanel placement="left" defaultSize={{ width: 280 }} isExpand={expand} onExpandChange={setExpand}>
+    <DraggablePanel
+      style={style}
+      placement="left"
+      defaultSize={{ width: 280 }}
+      isExpand={expand}
+      onExpandChange={setExpand}
+    >
       <SidebarView>
         {!loading && <PromptGroup />}
         {children}

diff --git a/src/pages/index/App.tsx b/src/pages/index/App.tsx
@@ -78,7 +78,7 @@ const App: React.FC<AppProps> = ({ themeMode }) => {
         <div ref={headerRef} className="header" />
       </Header>
       <View>
-        <Sidebar>
+        <Sidebar style={['tab_txt2img', 'tab_img2img'].includes(currentTab) ? {} : { display: 'none' }}>
           {loading && (
             <LoadingBox>
               <Spin size="small" />