From e40bf52332362daeb48a9b312a8443dd223d0da9 Mon Sep 17 00:00:00 2001
From: Gianmarco Manni <gianmarco.manni@collana.com>
Date: Fri, 5 Jun 2026 18:46:21 +0200
Subject: [PATCH 1/4] x

---
 .../PanelSideBarLayout/NavbarLayout.tsx       | 40 +++++++++++++++++++
 .../PanelSideBar/MainSection.tsx              | 27 +++++++++++++
 .../PanelSideBarLayout/PanelSideBarLayout.tsx | 33 ++++++---------
 .../PanelSideBarLayoutContent.tsx             |  5 +--
 4 files changed, 81 insertions(+), 24 deletions(-)
 create mode 100644 src/lib/Layout/PanelSideBarLayout/NavbarLayout.tsx
 create mode 100644 src/lib/Layout/PanelSideBarLayout/PanelSideBar/MainSection.tsx

diff --git a/src/lib/Layout/PanelSideBarLayout/NavbarLayout.tsx b/src/lib/Layout/PanelSideBarLayout/NavbarLayout.tsx
new file mode 100644
index 0000000..822cb86
--- /dev/null
+++ b/src/lib/Layout/PanelSideBarLayout/NavbarLayout.tsx
@@ -0,0 +1,40 @@
+import "../../../../styles/Layout/index.scss";
+
+import { ComponentProps, PropsWithChildren } from "react";
+import { PanelSideBarLayoutContent } from "./PanelSideBarLayoutContent";
+import { PanelSidebarNavbarInternal, PanelSidebarNavbarInternalProps } from "./PanelSideBarNavbar";
+import { MainSection } from "./PanelSideBar/MainSection";
+import { PanelSideBarLayoutProps } from "./PanelSideBarLayout";
+
+export interface NavbarLayoutProps
+  extends
+    PropsWithChildren,
+    Pick<ComponentProps<typeof PanelSideBarLayoutContent>, "footer" | "mainContentBodyRef">,
+    Pick<PanelSideBarLayoutProps, "useResponsiveLayout" | "navbarLeftItems" | "navbarRightItems" | "brand">,
+    Pick<PanelSidebarNavbarInternalProps, "theme"> {}
+
+export const NavbarLayout = (props: NavbarLayoutProps) => {
+  const { brand, children, navbarLeftItems, navbarRightItems, footer, useResponsiveLayout = false, mainContentBodyRef, theme } = props;
+
+  return (
+    <>
+      <PanelSidebarNavbarInternal
+        useToggleButton={false}
+        theme={theme}
+        brand={brand}
+        navbarRightItems={navbarRightItems}
+        navbarLeftItems={navbarLeftItems}
+      />
+      <MainSection isSidebarOpen={false} useResponsiveLayout={useResponsiveLayout}>
+        <PanelSideBarLayoutContent
+          excludeSibebarMenu={true}
+          footer={footer}
+          isIconShownOnSidebarCollapse={false}
+          mainContentBodyRef={mainContentBodyRef}
+        >
+          {children}
+        </PanelSideBarLayoutContent>
+      </MainSection>
+    </>
+  );
+};
diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBar/MainSection.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/MainSection.tsx
new file mode 100644
index 0000000..1180600
--- /dev/null
+++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBar/MainSection.tsx
@@ -0,0 +1,27 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+interface MainSectionProps extends PropsWithChildren {
+  isSidebarOpen: boolean;
+  useResponsiveLayout?: boolean;
+  renderFirstItemsLevelAsTiles?: boolean;
+}
+
+const MainSection = (props: MainSectionProps) => {
+  const { children, isSidebarOpen, useResponsiveLayout = false, renderFirstItemsLevelAsTiles } = props;
+  return (
+    <section
+      id="main-section"
+      className={classNames(
+        { toggled: !isSidebarOpen },
+        { "responsive-layout": useResponsiveLayout },
+        { "section-no-tiles": !renderFirstItemsLevelAsTiles },
+        { "section-tiles": renderFirstItemsLevelAsTiles },
+      )}
+    >
+      {children}
+    </section>
+  );
+};
+
+export { MainSection };
diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx
index e9b2314..1c34390 100644
--- a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx
+++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx
@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import { PropsWithChildren, ReactNode, useMemo } from "react";
 import "../../../../styles/Layout/index.scss";
 import { PanelSideBar } from "./PanelSideBar/PanelSidebar";
@@ -6,6 +5,7 @@ import { PanelSideBarLayoutContent } from "./PanelSideBarLayoutContent";
 import { PanelSideBarToggle } from "./PanelSideBar/PanelSideBarToggle";
 import { PanelSidebarNavbarInternal, PanelSidebarNavbarInternalProps } from "./PanelSideBarNavbar";
 import { usePanelSideBarContext } from "./PanelSideBar/Context/PanelSideBarContext";
+import { MainSection } from "./PanelSideBar/MainSection";
 
 export interface PanelSideBarLayoutProps extends PropsWithChildren {
   /**
@@ -45,12 +45,6 @@ export interface PanelSideBarLayoutProps extends PropsWithChildren {
   excludeSibebarMenu?: boolean;
 }
 
-const PanelSidebarNavbar = (props: Omit<PanelSidebarNavbarInternalProps, "toggleSidebar" | "theme">) => {
-  const { toggleSidebar, theme } = usePanelSideBarContext();
-
-  return <PanelSidebarNavbarInternal toggleSidebar={toggleSidebar} theme={theme} {...props} />;
-};
-
 export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(props: PanelSideBarLayoutProps) => {
   const {
     brand,
@@ -64,10 +58,8 @@ export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(prop
     excludeSibebarMenu = false,
   } = props;
 
-  const { isSidebarOpen, toggleSidebar, renderFirstItemsLevelAsTiles, menuItems, activePanelId } = usePanelSideBarContext<
-    TPanelItemId,
-    TPanelItem
-  >();
+  const { isSidebarOpen, toggleSidebar, theme, renderFirstItemsLevelAsTiles, menuItems, activePanelId, mainContentBodyRef } =
+    usePanelSideBarContext<TPanelItemId, TPanelItem>();
 
   if (useResponsiveLayout && !useToggleButton) {
     throw new Error("Responsive layout can be used only with toggle button in the navbar!");
@@ -80,20 +72,18 @@ export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(prop
 
   return (
     <>
-      <PanelSidebarNavbar
+      <PanelSidebarNavbarInternal
         useToggleButton={useToggleButton}
+        theme={theme}
+        toggleSidebar={toggleSidebar}
         brand={brand}
         navbarRightItems={navbarRightItems}
         navbarLeftItems={navbarLeftItems}
       />
-      <section
-        id="main-section"
-        className={classNames(
-          { toggled: !isSidebarOpen },
-          { "responsive-layout": useResponsiveLayout },
-          { "section-no-tiles": !renderFirstItemsLevelAsTiles },
-          { "section-tiles": renderFirstItemsLevelAsTiles },
-        )}
+      <MainSection
+        isSidebarOpen={isSidebarOpen}
+        useResponsiveLayout={useResponsiveLayout}
+        renderFirstItemsLevelAsTiles={renderFirstItemsLevelAsTiles}
       >
         {!excludeSibebarMenu && (
           <>
@@ -111,10 +101,11 @@ export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(prop
           excludeSibebarMenu={excludeSibebarMenu}
           footer={footer}
           isIconShownOnSidebarCollapse={isIconShownOnSidebarCollapse}
+          mainContentBodyRef={mainContentBodyRef}
         >
           {children}
         </PanelSideBarLayoutContent>
-      </section>
+      </MainSection>
     </>
   );
 };
diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx
index d25de1d..a5dab23 100644
--- a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx
+++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx
@@ -1,16 +1,15 @@
 import classNames from "classnames";
 import { PropsWithChildren, ReactNode } from "react";
-import { usePanelSideBarContext } from "./PanelSideBar/Context/PanelSideBarContext";
 
 interface PanelSideBarLayoutContentProps extends PropsWithChildren {
   footer?: ReactNode;
   isIconShownOnSidebarCollapse: boolean;
   excludeSibebarMenu: boolean;
+  mainContentBodyRef?: React.RefObject<HTMLElement | null>;
 }
 
 export const PanelSideBarLayoutContent = (props: PanelSideBarLayoutContentProps) => {
-  const { children, footer, isIconShownOnSidebarCollapse, excludeSibebarMenu } = props;
-  const { mainContentBodyRef } = usePanelSideBarContext();
+  const { children, footer, isIconShownOnSidebarCollapse, excludeSibebarMenu, mainContentBodyRef } = props;
 
   return (
     <section

From 5cea8a2f19b66ff6649b18e5babf8e95cccbb5cc Mon Sep 17 00:00:00 2001
From: Gianmarco Manni <gianmarco.manni@collana.com>
Date: Fri, 5 Jun 2026 18:48:20 +0200
Subject: [PATCH 2/4] x

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 162febd..9c167ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- `NavbarLayout`, a component which will rendered exactly the same layout but only with the navbar and will not require the context
+
 ## [6.0.0] - 2026-02-24
 
 ### Changed

From c9f7e5794eb8a53ec6317d8c71d3b7c4e29aaf00 Mon Sep 17 00:00:00 2001
From: Gianmarco Manni <gianmarco.manni@collana.com>
Date: Fri, 5 Jun 2026 18:48:58 +0200
Subject: [PATCH 3/4] x

---
 src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx
index 1c34390..520b915 100644
--- a/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx
+++ b/src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx
@@ -3,7 +3,7 @@ import "../../../../styles/Layout/index.scss";
 import { PanelSideBar } from "./PanelSideBar/PanelSidebar";
 import { PanelSideBarLayoutContent } from "./PanelSideBarLayoutContent";
 import { PanelSideBarToggle } from "./PanelSideBar/PanelSideBarToggle";
-import { PanelSidebarNavbarInternal, PanelSidebarNavbarInternalProps } from "./PanelSideBarNavbar";
+import { PanelSidebarNavbarInternal } from "./PanelSideBarNavbar";
 import { usePanelSideBarContext } from "./PanelSideBar/Context/PanelSideBarContext";
 import { MainSection } from "./PanelSideBar/MainSection";
 

From c6b5ea341596fa979cd40f1cdd1ec6b2f4b6bdd8 Mon Sep 17 00:00:00 2001
From: Gianmarco Manni <gianmarco.manni@collana.com>
Date: Fri, 5 Jun 2026 18:54:41 +0200
Subject: [PATCH 4/4] export component

---
 src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.ts b/src/index.ts
index 9210fac..1a5ee91 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,7 @@ export * from "./lib/Paging/Paging";
 
 // Panel sidebar layout
 export { PanelSidebarNavbar, PanelSidebarNavbarProps } from "./lib/Layout/PanelSideBarLayout/PanelSideBarNavbar";
+export * from "./lib/Layout/PanelSideBarLayout/NavbarLayout";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBarLayout";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelItem";