toggle works, nice animations missing

Author: bubulux

.eslintrc.frontend.yml

@@ -128,3 +128,4 @@ overrides:
     rules:
       import/no-extraneous-dependencies: off
       react/jsx-props-no-spreading: off
+      react-hooks/rules-of-hooks: off

apps/frontend/ui/src/layout/partials/Sidebar/func.tsx

@@ -5,6 +5,7 @@ import {
   SearchFilled,
   HandshakeFilled,
   ChevronLeftFilled,
+  ChevronRightFilled,
 } from "@fluentui/react-icons";
 
 import { Flex, Divider, TabList, Tab, Tooltip, Button } from "@lib-components";
@@ -15,7 +16,7 @@ import useSidebarClasses from "@app-ui/layout/partials/Sidebar/styles";
 type TProps = {
   defaultTab: "overview" | "browse" | "contribute";
   isExpanded: boolean;
-  toggleExpandAction: (isExpanded: boolean) => void;
+  toggleExpandAction: () => void;
   overviewTabAction: () => void;
   browseTabAction: () => void;
 };
@@ -79,7 +80,13 @@ export default function Sidebar({
           </TabList>
         </Flex>
       </Flex>
-      <Button icon={<ChevronLeftFilled />} appearance="subtle" size="small" />
+      <Button
+        className={classes.buttonOverride}
+        icon={isExpanded ? <ChevronLeftFilled /> : <ChevronRightFilled />}
+        appearance="subtle"
+        size="small"
+        onClick={toggleExpandAction}
+      />
     </Flex>
   );
 }

apps/frontend/ui/src/layout/partials/Sidebar/stories.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
 
 import Sidebar from "@app-ui/layout/partials/Sidebar";
@@ -10,7 +12,9 @@ const meta: Meta = {
   args: {
     defaultTab: "overview",
     isExpanded: true,
-    toggleExpandAction: (_: boolean) => _,
+    toggleExpandAction: () => {},
+    overviewTabAction: () => {},
+    browseTabAction: () => {},
   },
 };
 
@@ -19,23 +23,33 @@ export default meta;
 type TStory = StoryObj<typeof Sidebar>;
 
 export const Index: TStory = {
-  render: (args) => (
-    <div
-      style={{
-        display: "flex",
-        backgroundColor: "black",
-        gap: "1rem",
-        padding: "1rem",
-        height: "700px",
-      }}
-    >
-      <Sidebar {...args} />
+  render: (args) => {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    return (
       <div
         style={{
-          width: "100%",
-          backgroundColor: tokens.colorNeutralBackground1,
+          display: "flex",
+          backgroundColor: "black",
+          gap: "1rem",
+          padding: "1rem",
+          height: "700px",
         }}
-      />
-    </div>
-  ),
+      >
+        <Sidebar
+          {...args}
+          toggleExpandAction={() => {
+            setIsExpanded(!isExpanded);
+          }}
+          isExpanded={isExpanded}
+        />
+        <div
+          style={{
+            width: "100%",
+            backgroundColor: tokens.colorNeutralBackground1,
+          }}
+        />
+      </div>
+    );
+  },
 };

apps/frontend/ui/src/layout/partials/Sidebar/styles.ts

@@ -5,6 +5,7 @@ const useSidebarClasses = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
     borderRadius: tokens.borderRadiusLarge,
   },
+  buttonOverride: {},
 });
 
 export default useSidebarClasses;