Fix sidebar in Storybook

dv297 · Oct 20, 2022 · 1a2968e · 1a2968e · vercel · Oct 20, 2022
1 parent 5cdec24
commit 1a2968e
Showing 1 changed file with 72 additions and 68 deletions.
diff --git a/src/stories/ApplicationStyling.stories.tsx b/src/stories/ApplicationStyling.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   ClipboardCheckIcon,
   FolderIcon,
@@ -69,78 +69,82 @@ const ColorSwatch = (props: ColorSwatchProp) => {
 };
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof EditableTextDisplay> = () => (
-  <>
-    <_AppContext.Provider
-      value={{
-        teams: [],
-        workspaces: [],
-        userPreferences: {
-          userId: '',
-          hasFinishedSetup: true,
-          id: '',
-          workspaceId: '',
-          teamId: '',
-        },
-        selectedWorkspace: {
-          name: '',
-          id: '',
-          tag: '',
-        },
-        selectedTeam: {
-          name: '',
-          id: '',
-        },
-      }}
-    >
-      <Sidebar
-        header={
-          <div className="cursor-pointer">
-            <div className="flex flex-row items-center">
-              <div>
-                <ArrowBackIcon />
+const Template: ComponentStory<typeof EditableTextDisplay> = () => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <>
+      <_AppContext.Provider
+        value={{
+          teams: [],
+          workspaces: [],
+          userPreferences: {
+            userId: '',
+            hasFinishedSetup: true,
+            id: '',
+            workspaceId: '',
+            teamId: '',
+          },
+          selectedWorkspace: {
+            name: '',
+            id: '',
+            tag: '',
+          },
+          selectedTeam: {
+            name: '',
+            id: '',
+          },
+        }}
+      >
+        <Sidebar
+          header={
+            <div className="cursor-pointer">
+              <div className="flex flex-row items-center">
+                <div>
+                  <ArrowBackIcon />
+                </div>
+                <span className="ml-2 font-bold text-md">Back</span>
               </div>
-              <span className="ml-2 font-bold text-md">Back</span>
             </div>
-          </div>
-        }
-        footer={
-          <button
-            className={
-              'sidebar-element group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full'
-            }
-            onClick={() => {}}
-          >
-            <PeopleIcon
+          }
+          footer={
+            <button
               className={
-                'text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6'
+                'sidebar-element group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full'
               }
-              aria-hidden="true"
-            />
-            Personal
-          </button>
-        }
-        navigation={navigation}
-        setSidebarOpen={() => {}}
-        sidebarOpen
-      />
-      <DashboardBodyLayout setSidebarOpen={() => {}} isLoading={false}>
-        <ConstrainDashboardContainer>
-          <p className="mb-4 font-bold text-lg">Color Swatches</p>
-          <div className="flex flex-col gap-y-4">
-            <div className="flex flex-row gap-x-4">
-              <ColorSwatch className="bg-accent-blue-900" />
-              <ColorSwatch className="bg-accent-blue-700" />
-              <ColorSwatch className="bg-accent-blue-500" />
-              <ColorSwatch className="bg-accent-blue-300" />
-              <ColorSwatch className="bg-accent-blue-100" />
+              onClick={() => {}}
+            >
+              <PeopleIcon
+                className={
+                  'text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6'
+                }
+                aria-hidden="true"
+              />
+              Personal
+            </button>
+          }
+          navigation={navigation}
+          setSidebarOpen={setSidebarOpen}
+          sidebarOpen={sidebarOpen}
+        />
+        <DashboardBodyLayout setSidebarOpen={setSidebarOpen} isLoading={false}>
+          <ConstrainDashboardContainer>
+            <p className="mb-4 font-bold text-lg">Color Swatches</p>
+            <div className="flex flex-col gap-y-4">
+              <div className="flex flex-row gap-x-4">
+                <ColorSwatch className="bg-accent-blue-900" />
+                <ColorSwatch className="bg-accent-blue-700" />
+                <ColorSwatch className="bg-accent-blue-500" />
+                <ColorSwatch className="bg-accent-blue-300" />
+                <ColorSwatch className="bg-accent-blue-100" />
+              </div>
             </div>
-          </div>
-        </ConstrainDashboardContainer>
-      </DashboardBodyLayout>
-    </_AppContext.Provider>
-  </>
-);
+          </ConstrainDashboardContainer>
+        </DashboardBodyLayout>
+      </_AppContext.Provider>
+    </>
+  );
+};
 
 export const Primary = Template.bind({});
 Primary.args = {};