diff --git a/packages/core-components/src/layout/Sidebar/Bar.test.tsx b/packages/core-components/src/layout/Sidebar/Bar.test.tsx
index a4413dfd00..4d89008ea3 100644
--- a/packages/core-components/src/layout/Sidebar/Bar.test.tsx
+++ b/packages/core-components/src/layout/Sidebar/Bar.test.tsx
@@ -26,34 +26,43 @@ import { Sidebar, SidebarExpandButton } from './Bar';
 import { SidebarItem, SidebarSearchField } from './Items';
 import { SidebarSubItem } from './SidebarSubItem';
 import { Submenu } from './Submenu';
+import { SidebarPinStateContext } from '.';
 
 async function renderScalableSidebar() {
   await renderInTestApp(
-    <Sidebar disableExpandOnHover>
-      <SidebarSearchField onSearch={() => {}} to="/search" />
-      <SidebarItem icon={CatalogSidebarLogo} onClick={() => {}} text="Catalog">
-        <Submenu title="Catalog">
-          <SidebarSubItem title="Tools" to="/1" icon={BuildRoundedIcon} />
-          <SidebarSubItem
-            title="Misc"
-            to="/6"
-            icon={MiscIcon}
-            dropdownItems={[
-              {
-                title: 'dropdown item 1',
-                to: '/dropdownitemlink',
-              },
-              {
-                title: 'dropdown item 2',
-                to: '/dropdownitemlink2',
-              },
-            ]}
-          />
-        </Submenu>
-      </SidebarItem>
-      <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
-      <SidebarExpandButton />
-    </Sidebar>,
+    <SidebarPinStateContext.Provider
+      value={{ isPinned: false, toggleSidebarPinState: () => {} }}
+    >
+      <Sidebar disableExpandOnHover>
+        <SidebarSearchField onSearch={() => {}} to="/search" />
+        <SidebarItem
+          icon={CatalogSidebarLogo}
+          onClick={() => {}}
+          text="Catalog"
+        >
+          <Submenu title="Catalog">
+            <SidebarSubItem title="Tools" to="/1" icon={BuildRoundedIcon} />
+            <SidebarSubItem
+              title="Misc"
+              to="/6"
+              icon={MiscIcon}
+              dropdownItems={[
+                {
+                  title: 'dropdown item 1',
+                  to: '/dropdownitemlink',
+                },
+                {
+                  title: 'dropdown item 2',
+                  to: '/dropdownitemlink2',
+                },
+              ]}
+            />
+          </Submenu>
+        </SidebarItem>
+        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+        <SidebarExpandButton />
+      </Sidebar>
+    </SidebarPinStateContext.Provider>,
   );
 }
 
diff --git a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
index e25693cc81..978987e028 100644
--- a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
+++ b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
@@ -27,6 +27,7 @@ import {
   SidebarExpandButton,
   SidebarIntro,
   SidebarItem,
+  SidebarPage,
   SidebarSearchField,
   SidebarSpace,
 } from '.';
@@ -53,54 +54,58 @@ const handleSearch = (input: string) => {
 };
 
 export const SampleSidebar = () => (
-  <Sidebar>
-    <SidebarSearchField onSearch={handleSearch} to="/search" />
-    <SidebarDivider />
-    <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
-    <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
-    <SidebarDivider />
-    <SidebarIntro />
-    <SidebarSpace />
-  </Sidebar>
+  <SidebarPage>
+    <Sidebar>
+      <SidebarSearchField onSearch={handleSearch} to="/search" />
+      <SidebarDivider />
+      <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
+      <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
+      <SidebarDivider />
+      <SidebarIntro />
+      <SidebarSpace />
+    </Sidebar>
+  </SidebarPage>
 );
 
 export const SampleScalableSidebar = () => (
-  <Sidebar disableExpandOnHover>
-    <SidebarSearchField onSearch={handleSearch} to="/search" />
-    <SidebarDivider />
-    <SidebarItem icon={CatalogSidebarLogo} onClick={() => {}} text="Catalog">
-      <Submenu title="Catalog">
-        <SidebarSubItem title="Tools" to="/1" icon={BuildRoundedIcon} />
-        <SidebarSubItem title="APIs" to="/2" icon={APIsIcon} />
-        <SidebarSubItem title="Services" to="/3" icon={ServicesIcon} />
-        <SidebarSubItem
-          title="Libraries"
-          to="/4"
-          icon={LibraryBooksOutlinedIcon}
-        />
-        <SidebarSubItem title="Websites" to="/5" icon={WebOutlinedIcon} />
-        <SidebarSubItem
-          title="Misc"
-          to="/6"
-          icon={MiscIcon}
-          dropdownItems={[
-            {
-              title: 'Lorem Ipsum',
-              to: '/7',
-            },
-            {
-              title: 'Lorem Ipsum',
-              to: '/8',
-            },
-          ]}
-        />
-      </Submenu>
-    </SidebarItem>
-    <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
-    <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
-    <SidebarDivider />
-    <SidebarIntro />
-    <SidebarSpace />
-    <SidebarExpandButton />
-  </Sidebar>
+  <SidebarPage>
+    <Sidebar disableExpandOnHover>
+      <SidebarSearchField onSearch={handleSearch} to="/search" />
+      <SidebarDivider />
+      <SidebarItem icon={CatalogSidebarLogo} onClick={() => {}} text="Catalog">
+        <Submenu title="Catalog">
+          <SidebarSubItem title="Tools" to="/1" icon={BuildRoundedIcon} />
+          <SidebarSubItem title="APIs" to="/2" icon={APIsIcon} />
+          <SidebarSubItem title="Services" to="/3" icon={ServicesIcon} />
+          <SidebarSubItem
+            title="Libraries"
+            to="/4"
+            icon={LibraryBooksOutlinedIcon}
+          />
+          <SidebarSubItem title="Websites" to="/5" icon={WebOutlinedIcon} />
+          <SidebarSubItem
+            title="Misc"
+            to="/6"
+            icon={MiscIcon}
+            dropdownItems={[
+              {
+                title: 'Lorem Ipsum',
+                to: '/7',
+              },
+              {
+                title: 'Lorem Ipsum',
+                to: '/8',
+              },
+            ]}
+          />
+        </Submenu>
+      </SidebarItem>
+      <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
+      <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
+      <SidebarDivider />
+      <SidebarIntro />
+      <SidebarSpace />
+      <SidebarExpandButton />
+    </Sidebar>
+  </SidebarPage>
 );