From 22b71b0ac2fd7ce133e6e77ffd82903c80c2bc7c Mon Sep 17 00:00:00 2001
From: samuel <samuel.slavik@protonmail.com>
Date: Sat, 18 Oct 2025 01:13:56 +0200
Subject: [PATCH 1/5] Refactor layout components

---
 packages/layout/CHANGELOG.md                  |   4 +-
 packages/layout/README.md                     |  10 +-
 packages/layout/src/components/king/King.tsx  |  33 ++++++
 .../king/__tests__/King.stories.tsx           |  18 +++
 packages/layout/src/components/king/king.scss |   0
 .../layoutWithSidebar/LayoutWithSidebar.tsx   | 108 ------------------
 .../layout/src/components/overlay/Overlay.tsx |  19 +++
 .../src/components/overlay/overlay.scss       |  16 +++
 .../LayoutBasic.tsx => prince/Prince.tsx}     |  12 +-
 .../__tests__/Prince.stories.tsx}             |   8 +-
 .../layoutBasic.scss => prince/prince.scss}   |   2 +-
 .../layout/src/components/queen/Queen.tsx     |  81 +++++++++++++
 .../__tests__/Queen.stories.tsx}              |  61 ++++++++--
 .../queen.scss}                               |  82 ++++++-------
 .../SidebarExpandButton.tsx                   |  37 ++++++
 .../sidebarExpandButton.scss                  |  22 ++++
 packages/layout/src/main.ts                   |   7 +-
 17 files changed, 333 insertions(+), 187 deletions(-)
 create mode 100644 packages/layout/src/components/king/King.tsx
 create mode 100644 packages/layout/src/components/king/__tests__/King.stories.tsx
 create mode 100644 packages/layout/src/components/king/king.scss
 delete mode 100644 packages/layout/src/components/layoutWithSidebar/LayoutWithSidebar.tsx
 create mode 100644 packages/layout/src/components/overlay/Overlay.tsx
 create mode 100644 packages/layout/src/components/overlay/overlay.scss
 rename packages/layout/src/components/{layoutBasic/LayoutBasic.tsx => prince/Prince.tsx} (66%)
 rename packages/layout/src/components/{layoutBasic/__tests__/LayoutBasic.stories.tsx => prince/__tests__/Prince.stories.tsx} (61%)
 rename packages/layout/src/components/{layoutBasic/layoutBasic.scss => prince/prince.scss} (86%)
 create mode 100644 packages/layout/src/components/queen/Queen.tsx
 rename packages/layout/src/components/{layoutWithSidebar/__tests__/LayoutWithSidebar.stories.tsx => queen/__tests__/Queen.stories.tsx} (63%)
 rename packages/layout/src/components/{layoutWithSidebar/layoutWithSidebar.scss => queen/queen.scss} (71%)
 create mode 100644 packages/layout/src/components/sidebarExpandButton/SidebarExpandButton.tsx
 create mode 100644 packages/layout/src/components/sidebarExpandButton/sidebarExpandButton.scss

diff --git a/packages/layout/CHANGELOG.md b/packages/layout/CHANGELOG.md
index 49c0804..9266d01 100644
--- a/packages/layout/CHANGELOG.md
+++ b/packages/layout/CHANGELOG.md
@@ -4,8 +4,8 @@
 
 ### Minor Changes
 
-- 50e606b: Renamed prop `classname` to `className` in Container.tsx and LayoutBasic.tsx
-  - **What** Renamed prop `classname` to `className` in Container.tsx and LayoutBasic.tsx
+- 50e606b: Renamed prop `classname` to `className` in Container.tsx and Prince.tsx
+  - **What** Renamed prop `classname` to `className` in Container.tsx and Prince.tsx
   - **Why** Matches React convention, improves consistency.
   - **How** Rename `classname` prop to `className` in `Container` and `LayoutBasic`.
     Update your code by replacing all `classname` props with `className`.
diff --git a/packages/layout/README.md b/packages/layout/README.md
index 1887baa..bac4121 100644
--- a/packages/layout/README.md
+++ b/packages/layout/README.md
@@ -12,7 +12,7 @@ This package provides the following React layout components:
 
 - `Container`: Styled wrapper. 
 - `LayoutBasic`: Single column layout utilizing previously mentioned Container as main wrapper.
-- `LayoutWithSidebar`: Double column layout with main content and left sidebar. 
+- `Queen`: Double column layout with main content and left sidebar. 
 
 ## \<Container />
 
@@ -46,20 +46,20 @@ export function ExampleComponent() {
 }
 ```
 
-## \<LayoutWithSidebar />
+## \<Queen />
 
 Double column layout with main content and sidebar on the left side. 
 
 ```jsx
-import { LayoutWithSidebar } from '@musica-sacra/layout'
+import { Queen } from '@musica-sacra/layout'
 
 export function ExampleComponent() {
     return (
-        <LayoutWithSidebar
+        <Queen
             sidebar={<div>{/* Your Sidebar Content*/}</div>}
         >
             {/* Your Main Content */}
-        </LayoutWithSidebar>
+        </Queen>
     )
 }
 ```
diff --git a/packages/layout/src/components/king/King.tsx b/packages/layout/src/components/king/King.tsx
new file mode 100644
index 0000000..ee3b4d8
--- /dev/null
+++ b/packages/layout/src/components/king/King.tsx
@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { useBem } from '@musica-sacra/hooks';
+
+type KingProps = {
+    className?: string;
+    isPageLayout?: boolean;
+    children: React.ReactNode;
+    leftSidebar: ReactNode;
+    rightSidebar: ReactNode;
+};
+
+export function King({
+    className = '',
+    isPageLayout = false,
+    children,
+    leftSidebar,
+    rightSidebar,
+}: KingProps) {
+    const { bem, base } = useBem('ms-king');
+
+    return (
+        <div
+            className={bem(base, {
+                [className]: true,
+                'ms-king--page-layout': isPageLayout,
+            })}
+        >
+            <div className={bem('left-sidebar')}>{leftSidebar}</div>
+            <div className={bem('content')}>{children}</div>
+            <div className={bem('right-sidebar')}>{rightSidebar}</div>
+        </div>
+    );
+}
diff --git a/packages/layout/src/components/king/__tests__/King.stories.tsx b/packages/layout/src/components/king/__tests__/King.stories.tsx
new file mode 100644
index 0000000..b47ffa0
--- /dev/null
+++ b/packages/layout/src/components/king/__tests__/King.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { King } from '../King';
+
+const meta: Meta<typeof King> = {
+    title: '@musica-sacra/Layout/components/King',
+    component: King,
+    args: {
+        children: 'children',
+        leftSidebar: 'leftSidebar',
+        rightSidebar: 'rightSidebar',
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/layout/src/components/king/king.scss b/packages/layout/src/components/king/king.scss
new file mode 100644
index 0000000..e69de29
diff --git a/packages/layout/src/components/layoutWithSidebar/LayoutWithSidebar.tsx b/packages/layout/src/components/layoutWithSidebar/LayoutWithSidebar.tsx
deleted file mode 100644
index b63a6e6..0000000
--- a/packages/layout/src/components/layoutWithSidebar/LayoutWithSidebar.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { ReactNode, useState } from 'react';
-import { useBem } from '@musica-sacra/hooks';
-import { SidebarContext } from '../../context/SidebarContext';
-
-type LayoutWithSidebarProps = {
-    className?: string;
-    sidebar: ReactNode;
-    children: ReactNode;
-    isPageLayout?: boolean;
-};
-
-export function LayoutWithSidebar({
-    className = '',
-    sidebar,
-    children,
-    isPageLayout = false,
-}: LayoutWithSidebarProps) {
-    const { bem, base } = useBem('ms-layout-with-sidebar');
-
-    const [isSidebarExpanded, setSidebarExpanded] = useState(false);
-
-    const toggleSidebar = () => {
-        setSidebarExpanded((prev) => !prev);
-    };
-
-    const closeSidebar = () => setSidebarExpanded(false);
-
-    return (
-        <div
-            className={bem(base, {
-                [className]: true,
-                'ms-layout-with-sidebar--page-layout': isPageLayout,
-            })}
-        >
-            <div className={bem('sidebar-expand')}>
-                <button
-                    onClick={toggleSidebar}
-                    aria-label="Sidebar"
-                    aria-pressed={isSidebarExpanded}
-                >
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        enableBackground="new 0 0 24 24"
-                        height="24px"
-                        viewBox="0 0 24 24"
-                        width="24px"
-                        fill="currentColor"
-                    >
-                        <g>
-                            <rect fill="none" height="24" width="24" />
-                            <rect fill="none" height="24" width="24" />
-                        </g>
-                        <g>
-                            <g>
-                                <path d="M5.7,6.71L5.7,6.71c-0.39,0.39-0.39,1.02,0,1.41L9.58,12L5.7,15.88c-0.39,0.39-0.39,1.02,0,1.41l0,0 c0.39,0.39,1.02,0.39,1.41,0l4.59-4.59c0.39-0.39,0.39-1.02,0-1.41L7.12,6.71C6.73,6.32,6.09,6.32,5.7,6.71z" />
-                                <path d="M12.29,6.71L12.29,6.71c-0.39,0.39-0.39,1.02,0,1.41L16.17,12l-3.88,3.88c-0.39,0.39-0.39,1.02,0,1.41l0,0 c0.39,0.39,1.02,0.39,1.41,0l4.59-4.59c0.39-0.39,0.39-1.02,0-1.41l-4.59-4.59C13.32,6.32,12.68,6.32,12.29,6.71z" />
-                            </g>
-                        </g>
-                    </svg>
-                </button>
-            </div>
-
-            {isSidebarExpanded && (
-                <div
-                    className={bem({
-                        overlay: true,
-                        'overlay--active': isSidebarExpanded,
-                    })}
-                    onClick={toggleSidebar}
-                />
-            )}
-
-            <aside
-                className={bem({
-                    sidebar: true,
-                    'sidebar--expanded': isSidebarExpanded,
-                })}
-            >
-                {isSidebarExpanded && (
-                    <div className={bem('sidebar-close')}>
-                        <button
-                            onClick={toggleSidebar}
-                            aria-label="Zatvoriť sidebar"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                width="24"
-                                fill="currentColor"
-                            >
-                                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-                            </svg>
-                        </button>
-                    </div>
-                )}
-
-                <SidebarContext.Provider value={{ closeSidebar }}>
-                    <div className={bem('sidebar-content')}>{sidebar}</div>
-                </SidebarContext.Provider>
-            </aside>
-
-            <main className={bem('content')}>
-                <div className={bem('content-inner')}>{children}</div>
-            </main>
-        </div>
-    );
-}
diff --git a/packages/layout/src/components/overlay/Overlay.tsx b/packages/layout/src/components/overlay/Overlay.tsx
new file mode 100644
index 0000000..2564c48
--- /dev/null
+++ b/packages/layout/src/components/overlay/Overlay.tsx
@@ -0,0 +1,19 @@
+import { useBem } from '@musica-sacra/hooks';
+
+type OverlayProps = {
+    shouldBeVisible: boolean;
+    onClickCallback?: () => void;
+};
+
+export function Overlay({ shouldBeVisible, onClickCallback }: OverlayProps) {
+    const { bem, base } = useBem('ms-overlay');
+
+    return (
+        <div
+            className={bem(base, {
+                'ms-overlay--visible': shouldBeVisible,
+            })}
+            onClick={onClickCallback}
+        />
+    );
+}
diff --git a/packages/layout/src/components/overlay/overlay.scss b/packages/layout/src/components/overlay/overlay.scss
new file mode 100644
index 0000000..5e87291
--- /dev/null
+++ b/packages/layout/src/components/overlay/overlay.scss
@@ -0,0 +1,16 @@
+.ms-overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: -1;
+
+    &-- {
+        &visible {
+            opacity: 1;
+            z-index: 9;
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/layout/src/components/layoutBasic/LayoutBasic.tsx b/packages/layout/src/components/prince/Prince.tsx
similarity index 66%
rename from packages/layout/src/components/layoutBasic/LayoutBasic.tsx
rename to packages/layout/src/components/prince/Prince.tsx
index 6c19680..cea885f 100644
--- a/packages/layout/src/components/layoutBasic/LayoutBasic.tsx
+++ b/packages/layout/src/components/prince/Prince.tsx
@@ -1,19 +1,19 @@
 import { Container } from '../container/Container';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useBem } from '@musica-sacra/hooks';
 
-type LayoutBasicProps = {
-    children?: React.ReactNode;
+type PrinceProps = {
+    children?: ReactNode;
     className?: string;
     isPageLayout?: boolean;
 };
 
-export function LayoutBasic({
+export function Prince({
     children,
     className = '',
     isPageLayout = false,
-}: LayoutBasicProps) {
-    const { bem, base } = useBem('ms-layout-basic');
+}: PrinceProps) {
+    const { bem, base } = useBem('ms-prince');
 
     return (
         <div className={bem(base, className)}>
diff --git a/packages/layout/src/components/layoutBasic/__tests__/LayoutBasic.stories.tsx b/packages/layout/src/components/prince/__tests__/Prince.stories.tsx
similarity index 61%
rename from packages/layout/src/components/layoutBasic/__tests__/LayoutBasic.stories.tsx
rename to packages/layout/src/components/prince/__tests__/Prince.stories.tsx
index 38adda8..c3f40d8 100644
--- a/packages/layout/src/components/layoutBasic/__tests__/LayoutBasic.stories.tsx
+++ b/packages/layout/src/components/prince/__tests__/Prince.stories.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { LayoutBasic } from '@musica-sacra/layout';
 import type { StoryObj } from '@storybook/react';
+import { Prince } from '../Prince';
 
 const meta = {
-    title: '@musica-sacra/Layout/components/LayoutBasic',
-    component: LayoutBasic,
+    title: '@musica-sacra/Layout/components/Prince',
+    component: Prince,
     args: {
-        children: <p>LayoutBasic content</p>,
+        children: <p>Prince layout content</p>,
     },
 };
 
diff --git a/packages/layout/src/components/layoutBasic/layoutBasic.scss b/packages/layout/src/components/prince/prince.scss
similarity index 86%
rename from packages/layout/src/components/layoutBasic/layoutBasic.scss
rename to packages/layout/src/components/prince/prince.scss
index e308cf8..d6d9a3c 100644
--- a/packages/layout/src/components/layoutBasic/layoutBasic.scss
+++ b/packages/layout/src/components/prince/prince.scss
@@ -1,4 +1,4 @@
-.ms-layout-basic {
+.ms-prince {
     width: 100%;
 
     padding: 3rem 0 4rem 0;
diff --git a/packages/layout/src/components/queen/Queen.tsx b/packages/layout/src/components/queen/Queen.tsx
new file mode 100644
index 0000000..0fb7240
--- /dev/null
+++ b/packages/layout/src/components/queen/Queen.tsx
@@ -0,0 +1,81 @@
+import { ReactNode, useState } from 'react';
+import { useBem } from '@musica-sacra/hooks';
+import { SidebarContext } from '../../context/SidebarContext';
+import { Overlay } from '../overlay/Overlay';
+import { SidebarExpandButton } from '../sidebarExpandButton/SidebarExpandButton';
+
+type QueenProps = {
+    className?: string;
+    sidebar: ReactNode;
+    children: ReactNode;
+    isPageLayout?: boolean;
+    fullWidth?: boolean;
+};
+
+export function Queen({
+    className = '',
+    sidebar,
+    children,
+    isPageLayout = false,
+    fullWidth = false,
+}: QueenProps) {
+    const { bem, base } = useBem('ms-queen');
+
+    const [isSidebarExpanded, setSidebarExpanded] = useState(false);
+
+    const toggleSidebar = () => {
+        setSidebarExpanded((prev) => !prev);
+    };
+
+    const closeSidebar = () => setSidebarExpanded(false);
+
+    return (
+        <div
+            className={bem(base, {
+                [className]: true,
+                'ms-queen--page-layout': isPageLayout,
+                'ms-queen--full-width': fullWidth,
+            })}
+        >
+            <SidebarExpandButton onClickCallback={toggleSidebar} />
+            <Overlay
+                shouldBeVisible={isSidebarExpanded}
+                onClickCallback={toggleSidebar}
+            />
+
+            <div
+                className={bem({
+                    sidebar: true,
+                    'sidebar--expanded': isSidebarExpanded,
+                })}
+            >
+                {isSidebarExpanded && (
+                    <div className={bem('sidebar-close')}>
+                        <button
+                            onClick={toggleSidebar}
+                            aria-label="Zatvoriť sidebar"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                width="24"
+                                fill="currentColor"
+                            >
+                                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                            </svg>
+                        </button>
+                    </div>
+                )}
+
+                <SidebarContext.Provider value={{ closeSidebar }}>
+                    <div className={bem('sidebar-content')}>{sidebar}</div>
+                </SidebarContext.Provider>
+            </div>
+
+            <div className={bem('content')}>
+                <div className={bem('content-inner')}>{children}</div>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/layout/src/components/layoutWithSidebar/__tests__/LayoutWithSidebar.stories.tsx b/packages/layout/src/components/queen/__tests__/Queen.stories.tsx
similarity index 63%
rename from packages/layout/src/components/layoutWithSidebar/__tests__/LayoutWithSidebar.stories.tsx
rename to packages/layout/src/components/queen/__tests__/Queen.stories.tsx
index a9d5212..e51b67b 100644
--- a/packages/layout/src/components/layoutWithSidebar/__tests__/LayoutWithSidebar.stories.tsx
+++ b/packages/layout/src/components/queen/__tests__/Queen.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { LayoutWithSidebar } from '@musica-sacra/layout';
+import { Queen } from '../Queen';
 
 const DummyContent = () => (
     <div>
@@ -38,9 +38,9 @@ const DummyContent = () => (
     </div>
 );
 
-const meta: Meta<typeof LayoutWithSidebar> = {
-    title: '@musica-sacra/Layout/components/LayoutWithSidebar',
-    component: LayoutWithSidebar,
+const meta: Meta<typeof Queen> = {
+    title: '@musica-sacra/Layout/components/Queen',
+    component: Queen,
 
     argTypes: {
         className: {
@@ -57,9 +57,9 @@ type Story = StoryObj<typeof meta>;
 
 const Template: Story = {
     render: (args) => (
-        <LayoutWithSidebar {...args} sidebar={<div></div>}>
+        <Queen {...args} sidebar={<div></div>}>
             <DummyContent />
-        </LayoutWithSidebar>
+        </Queen>
     ),
 };
 
@@ -69,7 +69,7 @@ export const Default: Story = {
 
 export const MixedContentLength: Story = {
     render: (args) => (
-        <LayoutWithSidebar
+        <Queen
             {...args}
             sidebar={
                 <div style={{}}>
@@ -104,9 +104,54 @@ export const MixedContentLength: Story = {
             }
         >
             <DummyContent />
-        </LayoutWithSidebar>
+        </Queen>
     ),
     args: {
         isPageLayout: true,
     },
 };
+
+export const FullWidth: Story = {
+    render: (args) => (
+        <Queen
+            {...args}
+            sidebar={
+                <div style={{}}>
+                    <h4>Long sidebar</h4>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                    <p>Len pár položiek.</p>
+                </div>
+            }
+        >
+            <DummyContent />
+        </Queen>
+    ),
+    args: {
+        isPageLayout: true,
+        fullWidth: true,
+    },
+};
diff --git a/packages/layout/src/components/layoutWithSidebar/layoutWithSidebar.scss b/packages/layout/src/components/queen/queen.scss
similarity index 71%
rename from packages/layout/src/components/layoutWithSidebar/layoutWithSidebar.scss
rename to packages/layout/src/components/queen/queen.scss
index a7dc4f1..9a00a4a 100644
--- a/packages/layout/src/components/layoutWithSidebar/layoutWithSidebar.scss
+++ b/packages/layout/src/components/queen/queen.scss
@@ -1,5 +1,5 @@
-.ms-layout-with-sidebar {
-    $max-width: 1200px;
+.ms-queen {
+    $max-width: 1280px;
 
     $sidebar-ratio: 1;
     $content-ratio: 3;
@@ -20,44 +20,6 @@
     }
 
     &__ {
-        &overlay {
-            position: fixed;
-            inset: 0;
-            background-color: rgba(0, 0, 0, 0.4);
-            opacity: 0;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            z-index: -1;
-
-            &--active {
-                opacity: 1;
-                z-index: 9;
-            }
-        }
-
-        &sidebar-expand {
-            display: none;
-            width: 100%;
-            padding: 1rem;
-            background-color: rgb(246, 246, 247); // TODO delete
-
-            @media (max-width: $max-width) {
-                display: block;
-            }
-
-            button {
-                background-color: transparent;
-                outline: none;
-                border: none;
-                color: rgba(60, 60, 67, 1);
-
-                &:hover {
-                    cursor: pointer;
-                    color: rgba(8, 130, 170, 1); // TODO delete
-                }
-            }
-        }
-
         &sidebar {
             width: calc((100% - ($max-width - 64px)) / 2 + $sidebar-min-width - 32px);
             min-width: $sidebar-min-width;
@@ -127,7 +89,7 @@
             margin-left: auto;
             padding: 1rem;
 
-            @media(max-width: 1200px) {
+            @media (max-width: $max-width) {
                 width: 100%;
                 padding: 0 1rem;
             }
@@ -142,17 +104,17 @@
                 width: 100%;
                 min-width: auto;
             }
+        }
 
-            &-inner {
-                width: $content-min-width;
-                margin-left: 0;
-                margin-right: auto;
-                padding: 1rem;
+        &content-inner {
+            width: $content-min-width;
+            margin-left: 0;
+            margin-right: auto;
+            padding: 1rem;
 
-                @media (max-width: $max-width) {
-                    width: 100%;
-                    padding: 2rem;
-                }
+            @media (max-width: $max-width) {
+                width: 100%;
+                padding: 2rem;
             }
         }
     }
@@ -161,5 +123,25 @@
         &page-layout {
             min-height: 100vh;
         }
+
+        &full-width {
+            .ms-queen__content {
+                width: 100%;
+            }
+
+            .ms-queen__content-inner {
+                width: 100%;
+                padding: 1rem 2rem;
+            }
+
+            .ms-queen__sidebar {
+                width: 400px;
+                max-width: 100%;
+            }
+
+            .ms-queen__sidebar-content {
+                width: 100%;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/packages/layout/src/components/sidebarExpandButton/SidebarExpandButton.tsx b/packages/layout/src/components/sidebarExpandButton/SidebarExpandButton.tsx
new file mode 100644
index 0000000..c1a7abd
--- /dev/null
+++ b/packages/layout/src/components/sidebarExpandButton/SidebarExpandButton.tsx
@@ -0,0 +1,37 @@
+import { useBem } from '@musica-sacra/hooks';
+
+type SidebarExpandButtonProps = {
+    onClickCallback: () => void;
+};
+
+export function SidebarExpandButton({
+    onClickCallback,
+}: SidebarExpandButtonProps) {
+    const { bem } = useBem('ms-sidebar-expand-button');
+
+    return (
+        <div className={bem()}>
+            <button onClick={onClickCallback} aria-label="Sidebar">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    enableBackground="new 0 0 24 24"
+                    height="24px"
+                    viewBox="0 0 24 24"
+                    width="24px"
+                    fill="currentColor"
+                >
+                    <g>
+                        <rect fill="none" height="24" width="24" />
+                        <rect fill="none" height="24" width="24" />
+                    </g>
+                    <g>
+                        <g>
+                            <path d="M5.7,6.71L5.7,6.71c-0.39,0.39-0.39,1.02,0,1.41L9.58,12L5.7,15.88c-0.39,0.39-0.39,1.02,0,1.41l0,0 c0.39,0.39,1.02,0.39,1.41,0l4.59-4.59c0.39-0.39,0.39-1.02,0-1.41L7.12,6.71C6.73,6.32,6.09,6.32,5.7,6.71z" />
+                            <path d="M12.29,6.71L12.29,6.71c-0.39,0.39-0.39,1.02,0,1.41L16.17,12l-3.88,3.88c-0.39,0.39-0.39,1.02,0,1.41l0,0 c0.39,0.39,1.02,0.39,1.41,0l4.59-4.59c0.39-0.39,0.39-1.02,0-1.41l-4.59-4.59C13.32,6.32,12.68,6.32,12.29,6.71z" />
+                        </g>
+                    </g>
+                </svg>
+            </button>
+        </div>
+    );
+}
diff --git a/packages/layout/src/components/sidebarExpandButton/sidebarExpandButton.scss b/packages/layout/src/components/sidebarExpandButton/sidebarExpandButton.scss
new file mode 100644
index 0000000..7844fbd
--- /dev/null
+++ b/packages/layout/src/components/sidebarExpandButton/sidebarExpandButton.scss
@@ -0,0 +1,22 @@
+.ms-sidebar-expand-button {
+    display: none;
+    width: 100%;
+    padding: 1rem;
+    background-color: rgb(246, 246, 247);
+
+    @media (max-width: 1280px) {
+        display: block;
+    }
+
+    button {
+        background-color: transparent;
+        outline: none;
+        border: none;
+        color: rgba(60, 60, 67, 1);
+
+        &:hover {
+            cursor: pointer;
+            color: rgba(8, 130, 170, 1);
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/layout/src/main.ts b/packages/layout/src/main.ts
index d7ef143..005c53b 100644
--- a/packages/layout/src/main.ts
+++ b/packages/layout/src/main.ts
@@ -1,8 +1,9 @@
 import { Container } from './components/container/Container';
 
-import { LayoutBasic } from './components/layoutBasic/LayoutBasic';
-import { LayoutWithSidebar } from './components/layoutWithSidebar/LayoutWithSidebar';
+import { King } from './components/king/King';
+import { Queen } from './components/queen/Queen';
+import { Prince } from './components/prince/Prince';
 
-export { Container, LayoutBasic, LayoutWithSidebar };
+export { Container, King, Queen, Prince };
 
 export { useSidebar } from './context/SidebarContext';

From a2a0f82497ef300ab1e49d9a99bcb0e68c7af158 Mon Sep 17 00:00:00 2001
From: samuel <samuel.slavik@protonmail.com>
Date: Sat, 18 Oct 2025 15:35:16 +0200
Subject: [PATCH 2/5] Add king layout

---
 packages/layout/src/components/king/King.tsx  |  63 +++++++-
 .../king/__tests__/King.stories.tsx           |  12 ++
 packages/layout/src/components/king/king.scss | 149 ++++++++++++++++++
 .../src/components/overlay/overlay.scss       |   4 +-
 .../layout/src/components/queen/Queen.tsx     |  32 ++--
 .../layout/src/components/queen/queen.scss    |  10 +-
 6 files changed, 245 insertions(+), 25 deletions(-)

diff --git a/packages/layout/src/components/king/King.tsx b/packages/layout/src/components/king/King.tsx
index ee3b4d8..5a9f90b 100644
--- a/packages/layout/src/components/king/King.tsx
+++ b/packages/layout/src/components/king/King.tsx
@@ -1,5 +1,7 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import { useBem } from '@musica-sacra/hooks';
+import { SidebarExpandButton } from '../sidebarExpandButton/SidebarExpandButton';
+import { Overlay } from '../overlay/Overlay';
 
 type KingProps = {
     className?: string;
@@ -7,6 +9,7 @@ type KingProps = {
     children: React.ReactNode;
     leftSidebar: ReactNode;
     rightSidebar: ReactNode;
+    mergeSidebarsWhenResponsive?: boolean;
 };
 
 export function King({
@@ -15,19 +18,71 @@ export function King({
     children,
     leftSidebar,
     rightSidebar,
+    mergeSidebarsWhenResponsive = false,
 }: KingProps) {
     const { bem, base } = useBem('ms-king');
 
+    const [isSidebarExpanded, setSidebarExpanded] = useState(false);
+
+    const toggleSidebar = () => {
+        setSidebarExpanded((prev) => !prev);
+    };
+
+    const closeSidebar = () => setSidebarExpanded(false);
+
     return (
         <div
             className={bem(base, {
                 [className]: true,
                 'ms-king--page-layout': isPageLayout,
+                'ms-king--merge-sidebars': mergeSidebarsWhenResponsive,
             })}
         >
-            <div className={bem('left-sidebar')}>{leftSidebar}</div>
-            <div className={bem('content')}>{children}</div>
-            <div className={bem('right-sidebar')}>{rightSidebar}</div>
+            <SidebarExpandButton onClickCallback={toggleSidebar} />
+            <Overlay
+                shouldBeVisible={isSidebarExpanded}
+                onClickCallback={toggleSidebar}
+            />
+
+            <div
+                className={bem({
+                    sidebar: true,
+                    'sidebar--left': true,
+                    'sidebar--expanded': isSidebarExpanded,
+                })}
+            >
+                <div className={bem('sidebar-close-button')}>
+                    <button
+                        onClick={toggleSidebar}
+                        aria-label="Zatvoriť sidebar"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            width="24"
+                            fill="currentColor"
+                        >
+                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                        </svg>
+                    </button>
+                </div>
+                <div className={bem('sidebar-content')}>
+                    {leftSidebar}
+                    {mergeSidebarsWhenResponsive && (
+                        <div className={bem('sidebar--merged')}>
+                            <div className={bem('hr')} />
+                            {rightSidebar}
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className={bem('content')}>
+                <div className={bem('content-inner')}>{children}</div>
+            </div>
+            <div className={bem({ sidebar: true, 'sidebar--right': true })}>
+                <div className={bem('sidebar-content')}>{rightSidebar}</div>
+            </div>
         </div>
     );
 }
diff --git a/packages/layout/src/components/king/__tests__/King.stories.tsx b/packages/layout/src/components/king/__tests__/King.stories.tsx
index b47ffa0..3bfe8fd 100644
--- a/packages/layout/src/components/king/__tests__/King.stories.tsx
+++ b/packages/layout/src/components/king/__tests__/King.stories.tsx
@@ -16,3 +16,15 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const PageLayout: Story = {
+    args: {
+        isPageLayout: true,
+    },
+};
+
+export const MergedSidebars: Story = {
+    args: {
+        mergeSidebarsWhenResponsive: true,
+    },
+};
diff --git a/packages/layout/src/components/king/king.scss b/packages/layout/src/components/king/king.scss
index e69de29..0d2bfe8 100644
--- a/packages/layout/src/components/king/king.scss
+++ b/packages/layout/src/components/king/king.scss
@@ -0,0 +1,149 @@
+.ms-king {
+    background-color: lightpink;
+
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+
+    @media (max-width: 1220px) {
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    &__ {
+        &content {
+            background-color: white;
+
+            width: 100%;
+            max-width: 900px;
+
+            @media (max-width: 1540px) {
+                max-width: 100%;
+            }
+        }
+        &content-inner {
+            max-width: 900px;
+            margin: auto;
+
+            @media (max-width: 900px) {
+
+            }
+        }
+
+        &sidebar {
+            background-color: lightBlue;
+            width: 100%;
+            max-width: 320px;
+            height: auto;
+            z-index: 10;
+
+            &--{
+                &left {
+                    background-color: rgb(246, 246, 247);
+
+                    @media (max-width: 1220px) {
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        min-height: 100vh;
+                        height: 100%;
+                        width: 90%;
+                        max-width: 400px;
+                        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+
+                        transform: translateX(-100%);
+                        transition: transform 0.3s ease;
+
+                        overflow: auto;
+                    }
+                }
+
+                &expanded {
+                    @media (max-width: 1220px) {
+                        transform: translateX(0);
+                        transition: transform 0.3s ease 0.2s;
+                    }
+                }
+
+                &right {
+                    @media (max-width: 1540px) {
+                        display: none;
+                    }
+                }
+
+                &merged {
+                    display: none;
+
+                    @media (max-width: 1540px) {
+                        display: block;
+                    }
+                }
+            }
+        }
+        &sidebar-content {
+            width: 100%;
+            margin-right: 0;
+            margin-left: auto;
+            padding: 1rem;
+
+            @media (max-width: 1220px) {
+                padding: 0 1rem;
+            }
+        }
+        &sidebar-close-button {
+            display: none;
+            width: 100%;
+            padding: 1rem;
+            position: sticky;
+            top: 0;
+            background-color: rgb(246, 246, 247);
+            box-shadow: 0 1px 10px rgba(150, 150, 150, 0.1);
+
+            @media (max-width: 1220px) {
+                display: flex;
+            }
+
+            button {
+                margin-right: 0;
+                margin-left: auto;
+
+                background-color: transparent;
+                color: rgba(60, 60, 67, 1);
+
+                outline: none;
+                border: none;
+
+                &:hover {
+                    cursor: pointer;
+                    color: rgba(8, 130, 170, 1);
+                }
+            }
+        }
+
+
+        &hr {
+            background-color: rgba(60, 60, 67, 0.12);
+            height: 1px;
+            width: 100%;
+            margin: 2rem 0;
+        }
+    }
+
+    &-- {
+        &page-layout {
+            min-height: 100vh;
+        }
+    }
+
+    .ms-sidebar-expand-button {
+        display: none;
+        @media (max-width: 1220px) {
+            display: block;
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/layout/src/components/overlay/overlay.scss b/packages/layout/src/components/overlay/overlay.scss
index 5e87291..59cbdce 100644
--- a/packages/layout/src/components/overlay/overlay.scss
+++ b/packages/layout/src/components/overlay/overlay.scss
@@ -3,14 +3,16 @@
     inset: 0;
     background-color: rgba(0, 0, 0, 0.4);
     opacity: 0;
-    cursor: pointer;
     transition: all 0.3s ease;
     z-index: -1;
+    pointer-events: none;
 
     &-- {
         &visible {
             opacity: 1;
             z-index: 9;
+            cursor: pointer;
+            pointer-events: auto;
         }
     }
 }
\ No newline at end of file
diff --git a/packages/layout/src/components/queen/Queen.tsx b/packages/layout/src/components/queen/Queen.tsx
index 0fb7240..186179e 100644
--- a/packages/layout/src/components/queen/Queen.tsx
+++ b/packages/layout/src/components/queen/Queen.tsx
@@ -49,24 +49,22 @@ export function Queen({
                     'sidebar--expanded': isSidebarExpanded,
                 })}
             >
-                {isSidebarExpanded && (
-                    <div className={bem('sidebar-close')}>
-                        <button
-                            onClick={toggleSidebar}
-                            aria-label="Zatvoriť sidebar"
+                <div className={bem('sidebar-close-button')}>
+                    <button
+                        onClick={toggleSidebar}
+                        aria-label="Zatvoriť sidebar"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            width="24"
+                            fill="currentColor"
                         >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                width="24"
-                                fill="currentColor"
-                            >
-                                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-                            </svg>
-                        </button>
-                    </div>
-                )}
+                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                        </svg>
+                    </button>
+                </div>
 
                 <SidebarContext.Provider value={{ closeSidebar }}>
                     <div className={bem('sidebar-content')}>{sidebar}</div>
diff --git a/packages/layout/src/components/queen/queen.scss b/packages/layout/src/components/queen/queen.scss
index 9a00a4a..8c58397 100644
--- a/packages/layout/src/components/queen/queen.scss
+++ b/packages/layout/src/components/queen/queen.scss
@@ -33,8 +33,9 @@
                 left: 0;
                 min-height: 100vh;
                 height: 100%;
-                width: 80%;
-                max-width: 300px;
+                width: 90%;
+                max-width: 400px;
+                min-width: auto;
                 box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
 
                 transform: translateX(-100%);
@@ -53,7 +54,7 @@
             }
         }
 
-        &sidebar-close {
+        &sidebar-close-button {
             display: none;
             width: 100%;
             padding: 1rem;
@@ -111,10 +112,12 @@
             margin-left: 0;
             margin-right: auto;
             padding: 1rem;
+            max-width: 960px;
 
             @media (max-width: $max-width) {
                 width: 100%;
                 padding: 2rem;
+                margin: auto;
             }
         }
     }
@@ -132,6 +135,7 @@
             .ms-queen__content-inner {
                 width: 100%;
                 padding: 1rem 2rem;
+                max-width: none;
             }
 
             .ms-queen__sidebar {

From e17274c623f92d4b7d3cbc8aa53e8c45bcb01472 Mon Sep 17 00:00:00 2001
From: samuel <samuel.slavik@protonmail.com>
Date: Sat, 18 Oct 2025 15:50:50 +0200
Subject: [PATCH 3/5] Add docs

---
 .changeset/cruel-ads-march.md | 30 +++++++++++++++++++++++++
 packages/layout/README.md     | 41 +++++++++++++++++++++++++++--------
 2 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/cruel-ads-march.md

diff --git a/.changeset/cruel-ads-march.md b/.changeset/cruel-ads-march.md
new file mode 100644
index 0000000..a43019d
--- /dev/null
+++ b/.changeset/cruel-ads-march.md
@@ -0,0 +1,30 @@
+---
+"@musica-sacra/layout": major
+---
+
+Create new layout King.
+
+- **what** Create new 3 column layout KIng and refactor old layouts.
+- **why** We wanted a 3 column layout.
+- **how** Breaking changes! Follow instructions:
+
+1. **If you are using layout `<LayoutBasic>`**
+   
+This layout was renamed to `<Prince>`. All classNames derived from `layout-basic` were renamed to `prince`.
+
+There was change from layout content + sidebar width, from `1200px` to `1280px`.
+
+2. **If you are using layout `<LayoutWithSidebar>`**
+
+This layout was renamed to `<Queen>`. All classNames derived from `layout-with-sidebar` were renamed to `queen`.
+
+There was added prop `fullWidth`, default set to `false`. With this prop you can make the layout to take full width of the page, and dont have max-width of content.
+
+There was change from layout content + sidebar width, from `1200px` to `1280px`.
+
+3. **New layout `<King>`**
+
+There was added new layout `<King>`. Layout has 3 column, see readme for more information.
+
+
+
diff --git a/packages/layout/README.md b/packages/layout/README.md
index bac4121..f7db166 100644
--- a/packages/layout/README.md
+++ b/packages/layout/README.md
@@ -11,12 +11,13 @@ Layout components for building easy and consistent web app layouts in React.
 This package provides the following React layout components:
 
 - `Container`: Styled wrapper. 
-- `LayoutBasic`: Single column layout utilizing previously mentioned Container as main wrapper.
+- `Prince`: Single column layout utilizing previously mentioned Container as main wrapper.
 - `Queen`: Double column layout with main content and left sidebar. 
+- `King`: Triple column layout with main content and two sidebars. 
 
-## \<Container />
+### \<Container />
 
-Basic styled wrapper that provides container of with 1200px with auto margins on sides.
+Basic styled wrapper that provides container of with 1280px with auto margins on sides.
 
 ```jsx
 import { Container } from '@musica-sacra/layout'
@@ -30,23 +31,23 @@ export function ExampleComponent() {
 }
 ```
 
-## \<LayoutBasic />
+### \<Prince />
 
 Component for creating page layouts. Single column. Provides aditional wrapper around `<Container/>`.
 
 ```jsx
-import { LayoutBasic } from '@musica-sacra/layout'
+import { Prince } from '@musica-sacra/layout'
 
 export function ExampleComponent() {
     return (
-        <LayoutBasic>
+        <Prince>
             {/* Your Content */}
-        </LayoutBasic>
+        </Prince>
     )
 }
 ```
 
-## \<Queen />
+### \<Queen />
 
 Double column layout with main content and sidebar on the left side. 
 
@@ -64,7 +65,29 @@ export function ExampleComponent() {
 }
 ```
 
-Also provides context through hook useSidebar(), which gives you methods:
+### \<King />
+
+Triple column layout.
+
+```jsx
+import { King } from '@musica-sacra/layout'
+
+export function ExampleComponent() {
+    return (
+        <King
+            leftSidebar={<div>{/* Your LEFT Sidebar Content*/}</div>}
+            rightSidebar={<div>{/* Your RIGHT Sidebar Content*/}</div>}
+        >
+            {/* Your Main Content */}
+        </King>
+    )
+}
+```
+
+
+### useSidebar
+
+Layouts with sidebar also provide context through hook useSidebar(), which gives you methods:
 - closeSidebar()
 
 ```jsx

From 8b242ded8dfe331a68ae4e89d6313b3b5fee76c1 Mon Sep 17 00:00:00 2001
From: samuel <samuel.slavik@protonmail.com>
Date: Sat, 18 Oct 2025 15:52:59 +0200
Subject: [PATCH 4/5] Add sidebar context

---
 packages/layout/src/components/king/King.tsx | 24 ++++++++++++--------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/layout/src/components/king/King.tsx b/packages/layout/src/components/king/King.tsx
index 5a9f90b..7727a5a 100644
--- a/packages/layout/src/components/king/King.tsx
+++ b/packages/layout/src/components/king/King.tsx
@@ -2,6 +2,7 @@ import { ReactNode, useState } from 'react';
 import { useBem } from '@musica-sacra/hooks';
 import { SidebarExpandButton } from '../sidebarExpandButton/SidebarExpandButton';
 import { Overlay } from '../overlay/Overlay';
+import { SidebarContext } from '../../context/SidebarContext';
 
 type KingProps = {
     className?: string;
@@ -67,19 +68,24 @@ export function King({
                         </svg>
                     </button>
                 </div>
-                <div className={bem('sidebar-content')}>
-                    {leftSidebar}
-                    {mergeSidebarsWhenResponsive && (
-                        <div className={bem('sidebar--merged')}>
-                            <div className={bem('hr')} />
-                            {rightSidebar}
-                        </div>
-                    )}
-                </div>
+
+                <SidebarContext.Provider value={{ closeSidebar }}>
+                    <div className={bem('sidebar-content')}>
+                        {leftSidebar}
+                        {mergeSidebarsWhenResponsive && (
+                            <div className={bem('sidebar--merged')}>
+                                <div className={bem('hr')} />
+                                {rightSidebar}
+                            </div>
+                        )}
+                    </div>
+                </SidebarContext.Provider>
             </div>
+
             <div className={bem('content')}>
                 <div className={bem('content-inner')}>{children}</div>
             </div>
+
             <div className={bem({ sidebar: true, 'sidebar--right': true })}>
                 <div className={bem('sidebar-content')}>{rightSidebar}</div>
             </div>

From a7883d9d97621673c433775ade508daf965c98ca Mon Sep 17 00:00:00 2001
From: samuel <samuel.slavik@protonmail.com>
Date: Sat, 18 Oct 2025 15:53:06 +0200
Subject: [PATCH 5/5] Refactor styles

---
 packages/layout/src/components/container/container.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/layout/src/components/container/container.scss b/packages/layout/src/components/container/container.scss
index 5c539e3..a97129b 100644
--- a/packages/layout/src/components/container/container.scss
+++ b/packages/layout/src/components/container/container.scss
@@ -1,5 +1,5 @@
 .ms-container {
-    max-width: 1200px;
+    max-width: 1280px;
     width: 100%;
 
     margin: 0 auto;