Expandable sidebar option (#732)

nordcloud · Dec 13, 2024 · 0a1fa82 · 0a1fa82
1 parent 2ede9e3
commit 0a1fa82
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "10.4.3",
+  "version": "10.4.4",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/components/sidebar/Sidebar.stories.tsx b/src/components/sidebar/Sidebar.stories.tsx
@@ -249,3 +249,36 @@ export const CustomWidth: StoryObj = {
     },
   },
 };
+
+export const Expandable: StoryObj = {
+  render: () => {
+    const { isOpen, open, close } = useDisclosure();
+
+    return (
+      <Container>
+        <Row justify="center">
+          <Button onClick={open}>Click button to open sidebar</Button>
+        </Row>
+        <Sidebar
+          showExpandButton
+          title="Default sidebar"
+          caption="Default sidebar caption"
+          isOpen={isOpen}
+          onClick={close}
+          onExpandClick={() => alert("clicked")}
+        >
+          Sidebar Content
+        </Sidebar>
+      </Container>
+    );
+  },
+
+  name: "expandable",
+  parameters: {
+    docs: {
+      story: {
+        height: "450px",
+      },
+    },
+  },
+};
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
+import { When } from "react-if";
 import { Button } from "../button";
+import { FlexContainer } from "../container";
 import { Background } from "../modal/styles";
 import { SVGIcon } from "../svgicon";
 import {
@@ -34,6 +36,8 @@ export function Sidebar({
   headerStyles,
   contentStyles,
   onClick = () => undefined,
+  showExpandButton = false,
+  onExpandClick = () => undefined,
   ...props
 }: SidebarProps) {
   React.useEffect(() => {
@@ -69,14 +73,27 @@ export function Sidebar({
                   </Title>
                   {caption && <Caption>{caption}</Caption>}
                 </header>
-                <Button
-                  severity="low"
-                  size="md"
-                  icon="close"
-                  title="Close sidebar"
-                  type="button"
-                  onClick={onClick}
-                />
+                <FlexContainer justifyContent="space-evenly">
+                  <When condition={showExpandButton}>
+                    <Button
+                      severity="low"
+                      size="md"
+                      icon="externalLink"
+                      title="Expand"
+                      type="button"
+                      marginRight={1}
+                      onClick={onExpandClick}
+                    />
+                  </When>
+                  <Button
+                    severity="low"
+                    size="md"
+                    icon="close"
+                    title="Close sidebar"
+                    type="button"
+                    onClick={onClick}
+                  />
+                </FlexContainer>
               </Header>
               <Container style={contentStyles}>
                 <Content tag="div">{children}</Content>

diff --git a/src/components/sidebar/types.ts b/src/components/sidebar/types.ts
@@ -10,6 +10,8 @@ export type SidebarProps = {
   width?: number | string;
   reverse?: boolean;
   onClick?: () => void;
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
   footer?: React.ReactNode;
   headerStyles?: React.CSSProperties;
   contentStyles?: React.CSSProperties;