diff --git a/.gitignore b/.gitignore index ef7eccd..ead5092 100644 --- a/.gitignore +++ b/.gitignore @@ -25,4 +25,7 @@ yarn-error.log* coverage -storybook-static \ No newline at end of file +storybook-static + +# Ignore vs folder +.vs \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index cc5c529..f0ebc6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- Possibility to render the whole PanelSidebarLayout hiding completely the SidebarNav. +- Export for `PanelSidebarNavbar` component. It can be used to render only the Navbar without need of context. + ## [5.1.0] - 2025-06-11 ### Changed diff --git a/package.json b/package.json index ef90bbf..97974e7 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "copy-sass": "shx cp -r styles dist/scss", "lint": "eslint --cache", "prepack": "yarn build", - "prepare-pr": "yarn prettier . --write && yarn lint && yarn build && yarn test\"", + "prepare-pr": "yarn prettier . --write && yarn lint && yarn build", "prettier-check": "prettier --check .", "start": "rollup -c -w", "start-all": "concurrently \"yarn start\" \"yarn start-yalc\"", @@ -62,8 +62,6 @@ "@types/node": "^18.16.3", "@types/react": "^18.2.5", "@types/react-dom": "^18.2.3", - "@typescript-eslint/eslint-plugin": "^5.59.2", - "@typescript-eslint/parser": "^5.59.2", "bootstrap": "^5.2.3", "concurrently": "^8.0.1", "cross-env": "^7.0.3", diff --git a/src/index.ts b/src/index.ts index 75f49b6..9210fac 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,6 +2,7 @@ export * from "./lib/Layout/AuthenticationLayout"; export * from "./lib/Paging/Paging"; // Panel sidebar layout +export { PanelSidebarNavbar, PanelSidebarNavbarProps } from "./lib/Layout/PanelSideBarLayout/PanelSideBarNavbar"; export * from "./lib/Layout/PanelSideBarLayout/PanelSideBarLayout"; export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext"; export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelItem"; diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts index 730c8e3..caf4873 100644 --- a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts +++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts @@ -3,7 +3,24 @@ import { PanelItem } from "../Definitions/PanelItem"; import { PanelLinkRenderer } from "../Definitions/PanelLinkRenderer"; import { MenuItemToggleFn } from "./PanelSideBarContext"; -export interface PanelSideBarContextProps { +export interface SidebarProps { + /** + * If the sidebar is currently open or not + */ + isSidebarOpen: boolean; + + /** + * Function for toggling sidebar + */ + toggleSidebar: () => void; + + /** + * The theme + */ + theme?: "light" | "dark" | "blue"; +} + +export interface PanelSideBarContextProps extends SidebarProps { /** * The active panel id. */ @@ -37,20 +54,6 @@ export interface PanelSideBarContextProps void; - /** - * If the sidebar is currently open or not - */ - isSidebarOpen: boolean; - /** - * Function for toggling sidebar - */ - toggleSidebar: () => void; - - /** - * The theme - */ - theme?: "light" | "dark" | "blue"; - /** * Boolean indicating if you want to render first items level as icons or directly as menu entries */ diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx index 973ffc7..e9b2314 100644 --- a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx +++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx @@ -4,7 +4,7 @@ import "../../../../styles/Layout/index.scss"; import { PanelSideBar } from "./PanelSideBar/PanelSidebar"; import { PanelSideBarLayoutContent } from "./PanelSideBarLayoutContent"; import { PanelSideBarToggle } from "./PanelSideBar/PanelSideBarToggle"; -import { PanelSidebarNavbar } from "./PanelSideBarNavbar"; +import { PanelSidebarNavbarInternal, PanelSidebarNavbarInternalProps } from "./PanelSideBarNavbar"; import { usePanelSideBarContext } from "./PanelSideBar/Context/PanelSideBarContext"; export interface PanelSideBarLayoutProps extends PropsWithChildren { @@ -38,8 +38,19 @@ export interface PanelSideBarLayoutProps extends PropsWithChildren { * If use the responsive layout when the screen is sm in order to remove the sidebar overlay. */ useResponsiveLayout?: boolean; + + /** + * If true, exclude the sidebar menu. + */ + excludeSibebarMenu?: boolean; } +const PanelSidebarNavbar = (props: Omit) => { + const { toggleSidebar, theme } = usePanelSideBarContext(); + + return ; +}; + export const PanelSideBarLayout = (props: PanelSideBarLayoutProps) => { const { brand, @@ -50,6 +61,7 @@ export const PanelSideBarLayout = (prop collapsible = true, useToggleButton = false, useResponsiveLayout = false, + excludeSibebarMenu = false, } = props; const { isSidebarOpen, toggleSidebar, renderFirstItemsLevelAsTiles, menuItems, activePanelId } = usePanelSideBarContext< @@ -83,15 +95,23 @@ export const PanelSideBarLayout = (prop { "section-tiles": renderFirstItemsLevelAsTiles }, )} > - isIconShownOnSidebarCollapse={isIconShownOnSidebarCollapse} /> - {collapsible && !useToggleButton && ( - + {!excludeSibebarMenu && ( + <> + isIconShownOnSidebarCollapse={isIconShownOnSidebarCollapse} /> + {collapsible && !useToggleButton && ( + + )} + )} - + {children} diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx index 22818c2..d25de1d 100644 --- a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx +++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx @@ -5,17 +5,18 @@ import { usePanelSideBarContext } from "./PanelSideBar/Context/PanelSideBarConte interface PanelSideBarLayoutContentProps extends PropsWithChildren { footer?: ReactNode; isIconShownOnSidebarCollapse: boolean; + excludeSibebarMenu: boolean; } export const PanelSideBarLayoutContent = (props: PanelSideBarLayoutContentProps) => { - const { children, footer, isIconShownOnSidebarCollapse } = props; + const { children, footer, isIconShownOnSidebarCollapse, excludeSibebarMenu } = props; const { mainContentBodyRef } = usePanelSideBarContext(); return (
{children}