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 (
+
+
+
+
+ alert("clicked")}
+ >
+ Sidebar Content
+
+
+ );
+ },
+
+ 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({
{caption &&
{caption}}
-
+
+
+
+
+
+
{children}
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;