stories resize (wip)

packages/taler-wallet-webextension/src/NavigationBar.tsx

@@ -143,7 +143,7 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode {
       <div style={{ display: "flex", paddingTop: 4, justifyContent: "right" }}>
         <a href={Pages.qr}>
           <SvgIcon
-            title={i18n.str`QR Reader`}
+            title={i18n.str`QR Reader and Taler URI`}
             dangerouslySetInnerHTML={{ __html: qrIcon }}
             color="white"
           />
@@ -189,7 +189,7 @@ export function WalletNavBar({ path = "" }: { path?: string }): VNode {
         >
           <a href={Pages.qr}>
             <SvgIcon
-              title={i18n.str`QR Reader`}
+              title={i18n.str`QR Reader and Taler URI`}
               dangerouslySetInnerHTML={{ __html: qrIcon }}
               color="white"
             />

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>