From 0a1fa828fa9d83cb50a75c9f0b5b23d3c61d06a7 Mon Sep 17 00:00:00 2001
From: ievavizg <36439165+ievavizg@users.noreply.github.com>
Date: Fri, 13 Dec 2024 12:10:31 +0200
Subject: [PATCH] Expandable sidebar option (#732)

---
 package.json                               |  2 +-
 src/components/sidebar/Sidebar.stories.tsx | 33 ++++++++++++++++++++++
 src/components/sidebar/Sidebar.tsx         | 33 ++++++++++++++++------
 src/components/sidebar/types.ts            |  2 ++
 4 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 4910979f..1e54e5c6 100644
--- 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
index ef994fd7..4fc65281 100644
--- 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
index 93acd80f..b137cae6 100644
--- 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
index a28d97ca..3f976e4c 100644
--- 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;