diff --git a/app/components/Sidebar/Right.tsx b/app/components/Sidebar/Right.tsx index fb6805416..0962f33c5 100644 --- a/app/components/Sidebar/Right.tsx +++ b/app/components/Sidebar/Right.tsx @@ -5,7 +5,7 @@ import styled, { useTheme } from "styled-components"; import breakpoint from "styled-components-breakpoint"; import Flex from "~/components/Flex"; import ResizeBorder from "~/components/Sidebar/components/ResizeBorder"; -import usePersistedState from "~/hooks/usePersistedState"; +import useStores from "~/hooks/useStores"; type Props = React.HTMLAttributes & { children: React.ReactNode; @@ -14,10 +14,7 @@ type Props = React.HTMLAttributes & { function Right({ children, border, className }: Props) { const theme = useTheme(); - const [width, setWidth] = usePersistedState( - "rightSidebarWidth", - theme.sidebarWidth - ); + const { ui } = useStores(); const [isResizing, setResizing] = React.useState(false); const maxWidth = theme.sidebarMaxWidth; const minWidth = theme.sidebarMinWidth + 16; // padding @@ -30,14 +27,14 @@ function Right({ children, border, className }: Props) { Math.min(window.innerWidth - event.pageX, maxWidth), minWidth ); - setWidth(width); + ui.setRightSidebarWidth(width); }, - [minWidth, maxWidth, setWidth] + [minWidth, maxWidth, ui] ); const handleReset = React.useCallback(() => { - setWidth(theme.sidebarWidth); - }, [setWidth, theme.sidebarWidth]); + ui.setRightSidebarWidth(theme.sidebarRightWidth); + }, [ui, theme.sidebarRightWidth]); const handleStopDrag = React.useCallback(() => { setResizing(false); @@ -66,9 +63,9 @@ function Right({ children, border, className }: Props) { const style = React.useMemo( () => ({ - width: `${width}px`, + width: `${ui.sidebarRightWidth}px`, }), - [width] + [ui.sidebarRightWidth] ); return ( @@ -84,7 +81,7 @@ function Right({ children, border, className }: Props) { bounce: 0.2, duration: 0.6, }, - width, + width: ui.sidebarRightWidth, }} exit={{ width: 0, @@ -115,7 +112,7 @@ const Sidebar = styled(m.div)<{ $border?: boolean }>` position: relative; flex-shrink: 0; background: ${(props) => props.theme.background}; - width: ${(props) => props.theme.sidebarWidth}px; + width: ${(props) => props.theme.sidebarRightWidth}px; border-left: 1px solid ${(props) => props.theme.divider}; transition: border-left 100ms ease-in-out; z-index: 1; diff --git a/app/stores/UiStore.ts b/app/stores/UiStore.ts index 4a2dc5b4c..7afbcadee 100644 --- a/app/stores/UiStore.ts +++ b/app/stores/UiStore.ts @@ -98,7 +98,7 @@ class UiStore { this.sidebarCollapsed = !!data.sidebarCollapsed; this.sidebarWidth = data.sidebarWidth || defaultTheme.sidebarWidth; this.sidebarRightWidth = - data.sidebarRightWidth || defaultTheme.sidebarWidth; + data.sidebarRightWidth || defaultTheme.sidebarRightWidth; this.tocVisible = !!data.tocVisible; this.theme = data.theme || Theme.System; @@ -165,6 +165,11 @@ class UiStore { this.sidebarWidth = width; }; + @action + setRightSidebarWidth = (width: number): void => { + this.sidebarRightWidth = width; + }; + @action collapseSidebar = () => { this.sidebarCollapsed = true; diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts index c9a41b710..e10b47007 100644 --- a/app/typings/styled-components.d.ts +++ b/app/typings/styled-components.d.ts @@ -111,6 +111,7 @@ declare module "styled-components" { vpadding: string; hpadding: string; sidebarWidth: number; + sidebarRightWidth: number; sidebarCollapsedWidth: number; sidebarMinWidth: number; sidebarMaxWidth: number; diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts index fe2441c3c..712937c4e 100644 --- a/shared/styles/theme.ts +++ b/shared/styles/theme.ts @@ -48,6 +48,7 @@ const spacing = { vpadding: "1.5vw", hpadding: "1.875vw", sidebarWidth: 260, + sidebarRightWidth: 300, sidebarCollapsedWidth: 16, sidebarMinWidth: 200, sidebarMaxWidth: 600,