diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/stories.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/stories.tsx | 39 |
1 files changed, 37 insertions, 2 deletions
diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx index 09261d6f7..02cc15393 100644 --- a/packages/taler-wallet-webextension/src/stories.tsx +++ b/packages/taler-wallet-webextension/src/stories.tsx @@ -62,7 +62,7 @@ const Page = styled.div` `; const SideBar = styled.div` - min-width: 200px; + min-width: var(--with-size); height: calc(100vh - 20px); overflow-y: visible; overflow-x: hidden; @@ -106,6 +106,35 @@ const SideBar = styled.div` } `; +const ResizeHandleDiv = styled.div` + width: 10px; + background: #ddd; + cursor: ew-resize; +`; + +function ResizeHandle({ onUpdate }: { onUpdate: (x: number) => void }): VNode { + const [start, setStart] = useState<number | undefined>(undefined); + return ( + <ResizeHandleDiv + onMouseDown={(e: any) => { + setStart(e.pageX); + console.log("active", e.pageX); + return false; + }} + onMouseMove={(e: any) => { + if (start !== undefined) { + onUpdate(e.pageX - start); + } + return false; + }} + onMouseUp={() => { + setStart(undefined); + return false; + }} + /> + ); +} + const Content = styled.div` width: 100%; padding: 20px; @@ -380,11 +409,12 @@ function Application(): VNode { const ExampleContent = getContentForExample(selected); const GroupWrapper = getWrapperForGroup(selected?.group || "default"); + const [sidebarWidth, setSidebarWidth] = useState(200); return ( <Page> <LiveReload /> - <SideBar> + <SideBar style={{ "--with-size": `${sidebarWidth}px` }}> {allExamples.map((e) => ( <ExampleList key={e.title} @@ -401,6 +431,11 @@ function Application(): VNode { ))} <hr /> </SideBar> + <ResizeHandle + onUpdate={(x) => { + setSidebarWidth((s) => s + x); + }} + /> <Content> <ErrorReport selected={selected}> <GroupWrapper> |