From 79349e86ad63aab76c20ea6d4149c72a02b09ba5 Mon Sep 17 00:00:00 2001
From: pagoru <pagoru@gmail.com>
Date: Fri, 23 May 2025 16:39:35 +0200
Subject: [PATCH 1/5] wip

---
 .../layout/footer/footer.module.scss          |  2 +-
 .../main-layout/main-layout.component.tsx     |  7 +++---
 .../main-layout/main-layout.stories.tsx       |  2 +-
 src/components/layout/navigation/index.ts     |  4 ++--
 .../layout/navigation/lateral/index.ts        |  2 ++
 .../lateral/lateral-navigator/index.ts        |  1 +
 .../lateral-navigator.component.tsx}          |  7 +++---
 .../lateral-navigator.module.scss}            |  8 ++++++-
 .../lateral-navigator.stories.ts              | 10 ++++++++
 .../{ => lateral}/nav-item/index.ts           |  0
 .../nav-item/nav-item.component.tsx           |  6 ++---
 .../nav-item/nav-item.module.scss             |  2 +-
 .../nav-item/nav-item.stories.ts              |  0
 .../layout/navigation/navigator/index.ts      |  1 -
 .../navigation/navigator/navigator.stories.ts | 10 --------
 src/components/layout/navigation/top/index.ts |  2 ++
 .../navigation/top/top-navigator/index.ts     |  1 +
 .../top-navigator/top-navigator.component.tsx | 19 +++++++++++++++
 .../top-navigator/top-navigator.module.scss   | 24 +++++++++++++++++++
 19 files changed, 82 insertions(+), 26 deletions(-)
 create mode 100644 src/components/layout/navigation/lateral/index.ts
 create mode 100644 src/components/layout/navigation/lateral/lateral-navigator/index.ts
 rename src/components/layout/navigation/{navigator/navigator.component.tsx => lateral/lateral-navigator/lateral-navigator.component.tsx} (64%)
 rename src/components/layout/navigation/{navigator/navigation.module.scss => lateral/lateral-navigator/lateral-navigator.module.scss} (81%)
 create mode 100644 src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.stories.ts
 rename src/components/layout/navigation/{ => lateral}/nav-item/index.ts (100%)
 rename src/components/layout/navigation/{ => lateral}/nav-item/nav-item.component.tsx (79%)
 rename src/components/layout/navigation/{ => lateral}/nav-item/nav-item.module.scss (90%)
 rename src/components/layout/navigation/{ => lateral}/nav-item/nav-item.stories.ts (100%)
 delete mode 100644 src/components/layout/navigation/navigator/index.ts
 delete mode 100644 src/components/layout/navigation/navigator/navigator.stories.ts
 create mode 100644 src/components/layout/navigation/top/index.ts
 create mode 100644 src/components/layout/navigation/top/top-navigator/index.ts
 create mode 100644 src/components/layout/navigation/top/top-navigator/top-navigator.component.tsx
 create mode 100644 src/components/layout/navigation/top/top-navigator/top-navigator.module.scss

diff --git a/src/components/layout/footer/footer.module.scss b/src/components/layout/footer/footer.module.scss
index 344976c..0c7e3d2 100644
--- a/src/components/layout/footer/footer.module.scss
+++ b/src/components/layout/footer/footer.module.scss
@@ -5,7 +5,7 @@
   color: var(--text-0-c);
 
   display: flex;
-  padding: 4rem;
+  padding: 2rem;
   justify-content: space-between;
 
   text-align: center;
diff --git a/src/components/layout/main-layout/main-layout.component.tsx b/src/components/layout/main-layout/main-layout.component.tsx
index 480c0bf..4b1bda5 100644
--- a/src/components/layout/main-layout/main-layout.component.tsx
+++ b/src/components/layout/main-layout/main-layout.component.tsx
@@ -4,12 +4,12 @@ import * as React from "react";
 import styles from "./main-layout.module.scss";
 import {
   FooterComponent,
-  NavigatorComponent,
+  LateralNavigatorComponent,
   SocialComponent,
   BackgroundComponent,
   CardComponent,
   MainComponent,
-  LicenseComponent,
+  LicenseComponent, TopNavigatorComponent,
 } from "../../../components";
 import { cn } from "../../../utils";
 
@@ -29,9 +29,10 @@ export const MainLayoutComponent: React.FC<Props> = ({
     <BackgroundComponent>
       <CardComponent className={styles.bigCard}>
         <div className={styles.container}>
-          <NavigatorComponent children={navigatorChildren} />
+          <LateralNavigatorComponent children={navigatorChildren} />
           <div className={styles.bigContainer}>
             {/*{headerChildren && <HeaderComponent children={headerChildren} />}*/}
+            <TopNavigatorComponent/>
             <MainComponent
               className={cn(styles.main, {
                 [styles.headless]: !headerChildren,
diff --git a/src/components/layout/main-layout/main-layout.stories.tsx b/src/components/layout/main-layout/main-layout.stories.tsx
index 1b12f21..c234623 100644
--- a/src/components/layout/main-layout/main-layout.stories.tsx
+++ b/src/components/layout/main-layout/main-layout.stories.tsx
@@ -12,7 +12,7 @@ export default {
   component: MainLayoutComponent,
 };
 
-export const Primary = {
+export const MainLayout = {
   args: {
     headerChildren: (
       <>
diff --git a/src/components/layout/navigation/index.ts b/src/components/layout/navigation/index.ts
index 960652f..5d2d7ad 100644
--- a/src/components/layout/navigation/index.ts
+++ b/src/components/layout/navigation/index.ts
@@ -1,2 +1,2 @@
-export * from "./nav-item";
-export * from "./navigator";
+export * from './lateral'
+export * from './top'
\ No newline at end of file
diff --git a/src/components/layout/navigation/lateral/index.ts b/src/components/layout/navigation/lateral/index.ts
new file mode 100644
index 0000000..9a73c17
--- /dev/null
+++ b/src/components/layout/navigation/lateral/index.ts
@@ -0,0 +1,2 @@
+export * from "./nav-item";
+export * from "./lateral-navigator";
diff --git a/src/components/layout/navigation/lateral/lateral-navigator/index.ts b/src/components/layout/navigation/lateral/lateral-navigator/index.ts
new file mode 100644
index 0000000..c7eec97
--- /dev/null
+++ b/src/components/layout/navigation/lateral/lateral-navigator/index.ts
@@ -0,0 +1 @@
+export * from "./lateral-navigator.component";
diff --git a/src/components/layout/navigation/navigator/navigator.component.tsx b/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.component.tsx
similarity index 64%
rename from src/components/layout/navigation/navigator/navigator.component.tsx
rename to src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.component.tsx
index 7a04f6c..53c264d 100644
--- a/src/components/layout/navigation/navigator/navigator.component.tsx
+++ b/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.component.tsx
@@ -1,13 +1,14 @@
 import * as React from "react";
 
 // @ts-ignore
-import styles from "./navigation.module.scss";
+import styles from "./lateral-navigator.module.scss";
 // @ts-ignore
-import image from "../../../../../assets/logo.png";
+import image from "../../../../../../assets/logo.png";
 
 type Props = {} & React.HTMLProps<HTMLDivElement>;
 
-export const NavigatorComponent: React.FC<Props> = ({ children }) => {
+export const LateralNavigatorComponent: React.FC<Props> = ({ children }) => {
+  // return null
   return (
     <nav className={styles.navigator}>
       <div className={styles.logo}>
diff --git a/src/components/layout/navigation/navigator/navigation.module.scss b/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.module.scss
similarity index 81%
rename from src/components/layout/navigation/navigator/navigation.module.scss
rename to src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.module.scss
index 6ade1b1..234424d 100644
--- a/src/components/layout/navigation/navigator/navigation.module.scss
+++ b/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.module.scss
@@ -1,11 +1,17 @@
+@use "../../../../../styles/all.module" as *;
+
 .navigator {
   display: flex;
   flex-direction: column;
 
   padding: 1rem;
 
+
+  @include phone-only() {
+    display: none;
+  }
+
   .logo {
-    margin: 0 auto;
 
     img {
       width: 12.8rem;
diff --git a/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.stories.ts b/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.stories.ts
new file mode 100644
index 0000000..823bdb5
--- /dev/null
+++ b/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.stories.ts
@@ -0,0 +1,10 @@
+import { LateralNavigatorComponent } from "./lateral-navigator.component";
+
+export default {
+  title: "Components/Layout/Navigation/Lateral Navigator",
+  component: LateralNavigatorComponent,
+};
+
+export const LateralNavigator = {
+  args: {},
+};
diff --git a/src/components/layout/navigation/nav-item/index.ts b/src/components/layout/navigation/lateral/nav-item/index.ts
similarity index 100%
rename from src/components/layout/navigation/nav-item/index.ts
rename to src/components/layout/navigation/lateral/nav-item/index.ts
diff --git a/src/components/layout/navigation/nav-item/nav-item.component.tsx b/src/components/layout/navigation/lateral/nav-item/nav-item.component.tsx
similarity index 79%
rename from src/components/layout/navigation/nav-item/nav-item.component.tsx
rename to src/components/layout/navigation/lateral/nav-item/nav-item.component.tsx
index aa2a5b0..3a18349 100644
--- a/src/components/layout/navigation/nav-item/nav-item.component.tsx
+++ b/src/components/layout/navigation/lateral/nav-item/nav-item.component.tsx
@@ -2,9 +2,9 @@ import * as React from "react";
 
 // @ts-ignore
 import styles from "./nav-item.module.scss";
-import { cn } from "../../../../utils";
-import type { BoxProps } from "../../../../components";
-import { ButtonComponent } from "../../../../components";
+import { cn } from "../../../../../utils";
+import type { BoxProps } from "../../../../../components";
+import { ButtonComponent } from "../../../../../components";
 
 type Props = {
   className?: string;
diff --git a/src/components/layout/navigation/nav-item/nav-item.module.scss b/src/components/layout/navigation/lateral/nav-item/nav-item.module.scss
similarity index 90%
rename from src/components/layout/navigation/nav-item/nav-item.module.scss
rename to src/components/layout/navigation/lateral/nav-item/nav-item.module.scss
index b787c9c..6aacc4d 100644
--- a/src/components/layout/navigation/nav-item/nav-item.module.scss
+++ b/src/components/layout/navigation/lateral/nav-item/nav-item.module.scss
@@ -1,4 +1,4 @@
-@use "../../../../styles/all.module" as *;
+@use "../../../../../styles/all.module" as *;
 
 .navItem {
   padding: 1rem 1rem 1rem 2rem !important;
diff --git a/src/components/layout/navigation/nav-item/nav-item.stories.ts b/src/components/layout/navigation/lateral/nav-item/nav-item.stories.ts
similarity index 100%
rename from src/components/layout/navigation/nav-item/nav-item.stories.ts
rename to src/components/layout/navigation/lateral/nav-item/nav-item.stories.ts
diff --git a/src/components/layout/navigation/navigator/index.ts b/src/components/layout/navigation/navigator/index.ts
deleted file mode 100644
index fba7058..0000000
--- a/src/components/layout/navigation/navigator/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./navigator.component";
diff --git a/src/components/layout/navigation/navigator/navigator.stories.ts b/src/components/layout/navigation/navigator/navigator.stories.ts
deleted file mode 100644
index c95ce67..0000000
--- a/src/components/layout/navigation/navigator/navigator.stories.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NavigatorComponent } from "./navigator.component";
-
-export default {
-  title: "Components/Layout/Navigation/Navigator",
-  component: NavigatorComponent,
-};
-
-export const Primary = {
-  args: {},
-};
diff --git a/src/components/layout/navigation/top/index.ts b/src/components/layout/navigation/top/index.ts
new file mode 100644
index 0000000..22034c3
--- /dev/null
+++ b/src/components/layout/navigation/top/index.ts
@@ -0,0 +1,2 @@
+
+export * from './top-navigator'
\ No newline at end of file
diff --git a/src/components/layout/navigation/top/top-navigator/index.ts b/src/components/layout/navigation/top/top-navigator/index.ts
new file mode 100644
index 0000000..d712a65
--- /dev/null
+++ b/src/components/layout/navigation/top/top-navigator/index.ts
@@ -0,0 +1 @@
+export * from './top-navigator.component'
\ No newline at end of file
diff --git a/src/components/layout/navigation/top/top-navigator/top-navigator.component.tsx b/src/components/layout/navigation/top/top-navigator/top-navigator.component.tsx
new file mode 100644
index 0000000..fed2acc
--- /dev/null
+++ b/src/components/layout/navigation/top/top-navigator/top-navigator.component.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+//@ts-ignore
+import styles from './top-navigator.module.scss'
+// @ts-ignore
+import image from "../../../../../../assets/logo.png";
+
+export const TopNavigatorComponent: React.FC = () => {
+	
+	return <div className={styles.navigator}>
+		<div className={styles.logo}>
+			<img alt="logo" src={image} />
+		</div>
+		<div className={styles.items}>
+			<div>test</div>
+			<div>test</div>
+		</div>
+	</div>
+}
\ No newline at end of file
diff --git a/src/components/layout/navigation/top/top-navigator/top-navigator.module.scss b/src/components/layout/navigation/top/top-navigator/top-navigator.module.scss
new file mode 100644
index 0000000..9e56a66
--- /dev/null
+++ b/src/components/layout/navigation/top/top-navigator/top-navigator.module.scss
@@ -0,0 +1,24 @@
+@use "../../../../../styles/all.module" as *;
+
+.navigator {
+  display: none;
+
+  margin: -1rem 0;
+
+  @include phone-only() {
+    display: flex;
+  }
+
+  .logo {
+    margin: 0 auto;
+
+    img {
+      width: 12.8rem;
+    }
+  }
+  .items {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+  }
+}

From 2084ad4d205ce03d375a7fd748452ab3c3395364 Mon Sep 17 00:00:00 2001
From: pagoru <pagoru@gmail.com>
Date: Fri, 23 May 2025 17:25:55 +0200
Subject: [PATCH 2/5] wip

---
 .storybook/preview.tsx                        |  5 +-
 .../icons/burger-cross-icon.component.tsx     | 19 +++++
 .../icons/burger-icon.component.tsx           | 19 +++++
 src/components/icons/index.ts                 |  1 +
 .../layout/header/header.component.tsx        | 18 ++++-
 .../layout/header/header.module.scss          | 10 +++
 .../main-layout/main-layout.component.tsx     | 48 ++++++------
 .../main-layout/main-layout.stories.tsx       | 73 +++++++++++++++++++
 src/components/layout/navigation/index.ts     |  4 +-
 .../layout/navigation/lateral/index.ts        |  2 -
 .../lateral/lateral-navigator/index.ts        |  1 -
 .../lateral-navigator.component.tsx           | 22 ------
 .../lateral-navigator.stories.ts              | 10 ---
 .../{lateral => }/nav-item/index.ts           |  0
 .../nav-item/nav-item.component.tsx           |  6 +-
 .../nav-item/nav-item.module.scss             |  2 +-
 .../nav-item/nav-item.stories.ts              |  0
 .../layout/navigation/navigator/index.ts      |  1 +
 .../navigator/navigator.component.tsx         | 28 +++++++
 .../navigator.module.scss}                    |  6 +-
 .../navigation/navigator/navigator.stories.ts | 10 +++
 src/components/layout/navigation/top/index.ts |  2 -
 .../navigation/top/top-navigator/index.ts     |  1 -
 .../top-navigator/top-navigator.component.tsx | 19 -----
 .../top-navigator/top-navigator.module.scss   | 24 ------
 src/hooks/index.ts                            |  1 +
 src/hooks/use-layout.tsx                      | 35 +++++++++
 27 files changed, 254 insertions(+), 113 deletions(-)
 create mode 100644 src/components/icons/burger-cross-icon.component.tsx
 create mode 100644 src/components/icons/burger-icon.component.tsx
 delete mode 100644 src/components/layout/navigation/lateral/index.ts
 delete mode 100644 src/components/layout/navigation/lateral/lateral-navigator/index.ts
 delete mode 100644 src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.component.tsx
 delete mode 100644 src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.stories.ts
 rename src/components/layout/navigation/{lateral => }/nav-item/index.ts (100%)
 rename src/components/layout/navigation/{lateral => }/nav-item/nav-item.component.tsx (79%)
 rename src/components/layout/navigation/{lateral => }/nav-item/nav-item.module.scss (90%)
 rename src/components/layout/navigation/{lateral => }/nav-item/nav-item.stories.ts (100%)
 create mode 100644 src/components/layout/navigation/navigator/index.ts
 create mode 100644 src/components/layout/navigation/navigator/navigator.component.tsx
 rename src/components/layout/navigation/{lateral/lateral-navigator/lateral-navigator.module.scss => navigator/navigator.module.scss} (81%)
 create mode 100644 src/components/layout/navigation/navigator/navigator.stories.ts
 delete mode 100644 src/components/layout/navigation/top/index.ts
 delete mode 100644 src/components/layout/navigation/top/top-navigator/index.ts
 delete mode 100644 src/components/layout/navigation/top/top-navigator/top-navigator.component.tsx
 delete mode 100644 src/components/layout/navigation/top/top-navigator/top-navigator.module.scss
 create mode 100644 src/hooks/use-layout.tsx

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index af667d6..fd0ed94 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -4,6 +4,7 @@ import { BackgroundComponent } from "../src/components";
 import { useEffect, useState } from "react";
 import { addons } from "@storybook/preview-api";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
+import {LayoutProvider} from "../src/hooks";
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
@@ -44,7 +45,9 @@ export default preview;
 export const decorators = [
   (renderStory) => (
     <BackgroundComponent className="storybook-background">
-      {renderStory()}
+      <LayoutProvider>
+        {renderStory()}
+      </LayoutProvider>
     </BackgroundComponent>
   ),
   (renderStory) => (
diff --git a/src/components/icons/burger-cross-icon.component.tsx b/src/components/icons/burger-cross-icon.component.tsx
new file mode 100644
index 0000000..efebfce
--- /dev/null
+++ b/src/components/icons/burger-cross-icon.component.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { IconComponent } from "./icon.component";
+import type { IconProps } from "./icon.component";
+
+export const BurgerIconComponent: React.FC<IconProps> = ({
+  fill = "white",
+  ...props
+}) => (
+  <IconComponent {...props}>
+    <path
+      d="M3.7269 6.62755H20.2731M3.7269 12.1429H20.2731M3.7269 17.6583H20.2731"
+      stroke={fill}
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill={fill}
+    />
+  </IconComponent>
+);
diff --git a/src/components/icons/burger-icon.component.tsx b/src/components/icons/burger-icon.component.tsx
new file mode 100644
index 0000000..efebfce
--- /dev/null
+++ b/src/components/icons/burger-icon.component.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { IconComponent } from "./icon.component";
+import type { IconProps } from "./icon.component";
+
+export const BurgerIconComponent: React.FC<IconProps> = ({
+  fill = "white",
+  ...props
+}) => (
+  <IconComponent {...props}>
+    <path
+      d="M3.7269 6.62755H20.2731M3.7269 12.1429H20.2731M3.7269 17.6583H20.2731"
+      stroke={fill}
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill={fill}
+    />
+  </IconComponent>
+);
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index aef8ae8..b80e335 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -18,6 +18,7 @@ export * from "./download-icon.component";
 export * from "./forbidden-icon.component";
 export * from "./analytics-icon.component";
 export * from "./keys-icon.component";
+export * from "./burger-icon.component";
 
 export * from "./cc";
 export * from "./signal";
diff --git a/src/components/layout/header/header.component.tsx b/src/components/layout/header/header.component.tsx
index 319f55c..b4b52b4 100644
--- a/src/components/layout/header/header.component.tsx
+++ b/src/components/layout/header/header.component.tsx
@@ -2,11 +2,27 @@ import * as React from "react";
 
 // @ts-ignore
 import styles from "./header.module.scss";
+import { useLayout } from "../../../hooks";
+import { useCallback } from "react";
+import { BurgerIconComponent, CrossIconComponent } from "../../icons";
 
 type Props = {
   children?: React.ReactNode;
 };
 
 export const HeaderComponent: React.FC<Props> = ({ children }) => {
-  return <header className={styles.header}>{children}</header>;
+  const { toggleNavigator, openNavigator } = useLayout();
+
+  const onClickBurger = useCallback(() => {
+    toggleNavigator();
+  }, [toggleNavigator]);
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.burger} onClick={onClickBurger}>
+        {openNavigator ? <CrossIconComponent /> : <BurgerIconComponent />}
+      </div>
+      {children}
+    </header>
+  );
 };
diff --git a/src/components/layout/header/header.module.scss b/src/components/layout/header/header.module.scss
index 9b7c2c2..b8f70f6 100644
--- a/src/components/layout/header/header.module.scss
+++ b/src/components/layout/header/header.module.scss
@@ -1,3 +1,5 @@
+@use "../../../styles/all.module.scss" as *;
+
 .header {
   display: flex;
 
@@ -5,4 +7,12 @@
   align-items: center;
 
   padding: 1rem 1rem 1rem 0;
+
+  .burger {
+    display: none;
+
+    @include phone-only() {
+      display: inherit;
+    }
+  }
 }
diff --git a/src/components/layout/main-layout/main-layout.component.tsx b/src/components/layout/main-layout/main-layout.component.tsx
index 4b1bda5..2f04159 100644
--- a/src/components/layout/main-layout/main-layout.component.tsx
+++ b/src/components/layout/main-layout/main-layout.component.tsx
@@ -4,14 +4,15 @@ import * as React from "react";
 import styles from "./main-layout.module.scss";
 import {
   FooterComponent,
-  LateralNavigatorComponent,
+  NavigatorComponent,
   SocialComponent,
   BackgroundComponent,
   CardComponent,
   MainComponent,
-  LicenseComponent, TopNavigatorComponent,
+  LicenseComponent, HeaderComponent,
 } from "../../../components";
 import { cn } from "../../../utils";
+import {LayoutProvider} from "../../../hooks";
 
 type Props = {
   navigatorChildren?: React.ReactNode;
@@ -26,27 +27,28 @@ export const MainLayoutComponent: React.FC<Props> = ({
   footerChildren,
 }) => {
   return (
-    <BackgroundComponent>
-      <CardComponent className={styles.bigCard}>
-        <div className={styles.container}>
-          <LateralNavigatorComponent children={navigatorChildren} />
-          <div className={styles.bigContainer}>
-            {/*{headerChildren && <HeaderComponent children={headerChildren} />}*/}
-            <TopNavigatorComponent/>
-            <MainComponent
-              className={cn(styles.main, {
-                [styles.headless]: !headerChildren,
-              })}
-              children={children}
-            />
+    <LayoutProvider>
+      <BackgroundComponent>
+        <CardComponent className={styles.bigCard}>
+          <div className={styles.container}>
+            <NavigatorComponent children={navigatorChildren} />
+            <div className={styles.bigContainer}>
+              <HeaderComponent children={headerChildren} />
+              <MainComponent
+                className={cn(styles.main, {
+                  [styles.headless]: !headerChildren,
+                })}
+                children={children}
+              />
+            </div>
           </div>
-        </div>
-        <FooterComponent>
-          <SocialComponent />
-          {footerChildren}
-          <LicenseComponent />
-        </FooterComponent>
-      </CardComponent>
-    </BackgroundComponent>
+          <FooterComponent>
+            <SocialComponent />
+            {footerChildren}
+            <LicenseComponent />
+          </FooterComponent>
+        </CardComponent>
+      </BackgroundComponent>
+    </LayoutProvider>
   );
 };
diff --git a/src/components/layout/main-layout/main-layout.stories.tsx b/src/components/layout/main-layout/main-layout.stories.tsx
index c234623..86983a7 100644
--- a/src/components/layout/main-layout/main-layout.stories.tsx
+++ b/src/components/layout/main-layout/main-layout.stories.tsx
@@ -96,3 +96,76 @@ export const MainLayout = {
     ),
   },
 };
+
+export const MainLayoutHeadless = {
+  args: {
+    navigatorChildren: (
+      <>
+        <NavItemComponent selected icon={<HomeIconComponent />}>
+          Home
+        </NavItemComponent>
+        <NavItemComponent icon={<HotelIconComponent />}>
+          Hotels
+        </NavItemComponent>
+        <NavItemComponent icon={<HotelIconComponent />}>
+          Hotels
+        </NavItemComponent>
+        <NavItemComponent icon={<HotelIconComponent />}>
+          Hotels or not hotels
+        </NavItemComponent>
+      </>
+    ),
+    children: (
+      <>
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>
+          content1111111111111111111111111111111111111 1 1111kj hn1kjh1jkh
+          kjh1jkh 1hjk 1khj 1kjh1 hkj 1khjkh1j khj 1 sdf ;lkmjds fpkjlosdjklf
+          jklsdfjkl sdjklf jksldfj klsdfjklsdjlkf
+        </div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+      </>
+    ),
+    footerChildren: (
+      <>
+        <a href="#">Manifest</a>
+        <a href="#">Report a bug</a>
+        <a href="#">Run your own hotel</a>
+        <a href="#">Terms and conditions</a>
+      </>
+    ),
+  },
+};
diff --git a/src/components/layout/navigation/index.ts b/src/components/layout/navigation/index.ts
index 5d2d7ad..d1b4308 100644
--- a/src/components/layout/navigation/index.ts
+++ b/src/components/layout/navigation/index.ts
@@ -1,2 +1,2 @@
-export * from './lateral'
-export * from './top'
\ No newline at end of file
+export * from './nav-item'
+export * from './navigator'
\ No newline at end of file
diff --git a/src/components/layout/navigation/lateral/index.ts b/src/components/layout/navigation/lateral/index.ts
deleted file mode 100644
index 9a73c17..0000000
--- a/src/components/layout/navigation/lateral/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./nav-item";
-export * from "./lateral-navigator";
diff --git a/src/components/layout/navigation/lateral/lateral-navigator/index.ts b/src/components/layout/navigation/lateral/lateral-navigator/index.ts
deleted file mode 100644
index c7eec97..0000000
--- a/src/components/layout/navigation/lateral/lateral-navigator/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./lateral-navigator.component";
diff --git a/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.component.tsx b/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.component.tsx
deleted file mode 100644
index 53c264d..0000000
--- a/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.component.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-
-// @ts-ignore
-import styles from "./lateral-navigator.module.scss";
-// @ts-ignore
-import image from "../../../../../../assets/logo.png";
-
-type Props = {} & React.HTMLProps<HTMLDivElement>;
-
-export const LateralNavigatorComponent: React.FC<Props> = ({ children }) => {
-  // return null
-  return (
-    <nav className={styles.navigator}>
-      <div className={styles.logo}>
-        <img alt="logo" src={image} />
-      </div>
-      <div className={styles.items}>
-        <div className={styles.content}>{children}</div>
-      </div>
-    </nav>
-  );
-};
diff --git a/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.stories.ts b/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.stories.ts
deleted file mode 100644
index 823bdb5..0000000
--- a/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.stories.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { LateralNavigatorComponent } from "./lateral-navigator.component";
-
-export default {
-  title: "Components/Layout/Navigation/Lateral Navigator",
-  component: LateralNavigatorComponent,
-};
-
-export const LateralNavigator = {
-  args: {},
-};
diff --git a/src/components/layout/navigation/lateral/nav-item/index.ts b/src/components/layout/navigation/nav-item/index.ts
similarity index 100%
rename from src/components/layout/navigation/lateral/nav-item/index.ts
rename to src/components/layout/navigation/nav-item/index.ts
diff --git a/src/components/layout/navigation/lateral/nav-item/nav-item.component.tsx b/src/components/layout/navigation/nav-item/nav-item.component.tsx
similarity index 79%
rename from src/components/layout/navigation/lateral/nav-item/nav-item.component.tsx
rename to src/components/layout/navigation/nav-item/nav-item.component.tsx
index 3a18349..aa2a5b0 100644
--- a/src/components/layout/navigation/lateral/nav-item/nav-item.component.tsx
+++ b/src/components/layout/navigation/nav-item/nav-item.component.tsx
@@ -2,9 +2,9 @@ import * as React from "react";
 
 // @ts-ignore
 import styles from "./nav-item.module.scss";
-import { cn } from "../../../../../utils";
-import type { BoxProps } from "../../../../../components";
-import { ButtonComponent } from "../../../../../components";
+import { cn } from "../../../../utils";
+import type { BoxProps } from "../../../../components";
+import { ButtonComponent } from "../../../../components";
 
 type Props = {
   className?: string;
diff --git a/src/components/layout/navigation/lateral/nav-item/nav-item.module.scss b/src/components/layout/navigation/nav-item/nav-item.module.scss
similarity index 90%
rename from src/components/layout/navigation/lateral/nav-item/nav-item.module.scss
rename to src/components/layout/navigation/nav-item/nav-item.module.scss
index 6aacc4d..b787c9c 100644
--- a/src/components/layout/navigation/lateral/nav-item/nav-item.module.scss
+++ b/src/components/layout/navigation/nav-item/nav-item.module.scss
@@ -1,4 +1,4 @@
-@use "../../../../../styles/all.module" as *;
+@use "../../../../styles/all.module" as *;
 
 .navItem {
   padding: 1rem 1rem 1rem 2rem !important;
diff --git a/src/components/layout/navigation/lateral/nav-item/nav-item.stories.ts b/src/components/layout/navigation/nav-item/nav-item.stories.ts
similarity index 100%
rename from src/components/layout/navigation/lateral/nav-item/nav-item.stories.ts
rename to src/components/layout/navigation/nav-item/nav-item.stories.ts
diff --git a/src/components/layout/navigation/navigator/index.ts b/src/components/layout/navigation/navigator/index.ts
new file mode 100644
index 0000000..fba7058
--- /dev/null
+++ b/src/components/layout/navigation/navigator/index.ts
@@ -0,0 +1 @@
+export * from "./navigator.component";
diff --git a/src/components/layout/navigation/navigator/navigator.component.tsx b/src/components/layout/navigation/navigator/navigator.component.tsx
new file mode 100644
index 0000000..b5702e5
--- /dev/null
+++ b/src/components/layout/navigation/navigator/navigator.component.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+
+// @ts-ignore
+import styles from "./navigator.module.scss";
+// @ts-ignore
+import image from "../../../../../assets/logo.png";
+import { useLayout } from "../../../../hooks";
+import { cn } from "../../../../utils";
+
+type Props = {} & React.HTMLProps<HTMLDivElement>;
+
+export const NavigatorComponent: React.FC<Props> = ({ children }) => {
+  const { openNavigator } = useLayout();
+  return (
+    <nav
+      className={cn(styles.navigator, {
+        [styles.open]: openNavigator,
+      })}
+    >
+      <div className={styles.logo}>
+        <img alt="logo" src={image} />
+      </div>
+      <div className={styles.items}>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.module.scss b/src/components/layout/navigation/navigator/navigator.module.scss
similarity index 81%
rename from src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.module.scss
rename to src/components/layout/navigation/navigator/navigator.module.scss
index 234424d..c10c786 100644
--- a/src/components/layout/navigation/lateral/lateral-navigator/lateral-navigator.module.scss
+++ b/src/components/layout/navigation/navigator/navigator.module.scss
@@ -1,4 +1,4 @@
-@use "../../../../../styles/all.module" as *;
+@use "../../../../styles/all.module" as *;
 
 .navigator {
   display: flex;
@@ -7,11 +7,15 @@
   padding: 1rem;
 
 
+  &.open {
+    display: flex !important;
+  }
   @include phone-only() {
     display: none;
   }
 
   .logo {
+    margin: 0 auto;
 
     img {
       width: 12.8rem;
diff --git a/src/components/layout/navigation/navigator/navigator.stories.ts b/src/components/layout/navigation/navigator/navigator.stories.ts
new file mode 100644
index 0000000..1833d21
--- /dev/null
+++ b/src/components/layout/navigation/navigator/navigator.stories.ts
@@ -0,0 +1,10 @@
+import { NavigatorComponent } from "./navigator.component";
+
+export default {
+  title: "Components/Layout/Navigator",
+  component: NavigatorComponent,
+};
+
+export const Navigator = {
+  args: {},
+};
diff --git a/src/components/layout/navigation/top/index.ts b/src/components/layout/navigation/top/index.ts
deleted file mode 100644
index 22034c3..0000000
--- a/src/components/layout/navigation/top/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-
-export * from './top-navigator'
\ No newline at end of file
diff --git a/src/components/layout/navigation/top/top-navigator/index.ts b/src/components/layout/navigation/top/top-navigator/index.ts
deleted file mode 100644
index d712a65..0000000
--- a/src/components/layout/navigation/top/top-navigator/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './top-navigator.component'
\ No newline at end of file
diff --git a/src/components/layout/navigation/top/top-navigator/top-navigator.component.tsx b/src/components/layout/navigation/top/top-navigator/top-navigator.component.tsx
deleted file mode 100644
index fed2acc..0000000
--- a/src/components/layout/navigation/top/top-navigator/top-navigator.component.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-//@ts-ignore
-import styles from './top-navigator.module.scss'
-// @ts-ignore
-import image from "../../../../../../assets/logo.png";
-
-export const TopNavigatorComponent: React.FC = () => {
-	
-	return <div className={styles.navigator}>
-		<div className={styles.logo}>
-			<img alt="logo" src={image} />
-		</div>
-		<div className={styles.items}>
-			<div>test</div>
-			<div>test</div>
-		</div>
-	</div>
-}
\ No newline at end of file
diff --git a/src/components/layout/navigation/top/top-navigator/top-navigator.module.scss b/src/components/layout/navigation/top/top-navigator/top-navigator.module.scss
deleted file mode 100644
index 9e56a66..0000000
--- a/src/components/layout/navigation/top/top-navigator/top-navigator.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use "../../../../../styles/all.module" as *;
-
-.navigator {
-  display: none;
-
-  margin: -1rem 0;
-
-  @include phone-only() {
-    display: flex;
-  }
-
-  .logo {
-    margin: 0 auto;
-
-    img {
-      width: 12.8rem;
-    }
-  }
-  .items {
-    display: flex;
-    gap: 1rem;
-    padding: 1rem;
-  }
-}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 4f0eff0..98f47e7 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from "./use-click-outside";
 export * from "./use-modal";
 export * from "./use-theme";
+export * from "./use-layout";
diff --git a/src/hooks/use-layout.tsx b/src/hooks/use-layout.tsx
new file mode 100644
index 0000000..3a22c81
--- /dev/null
+++ b/src/hooks/use-layout.tsx
@@ -0,0 +1,35 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import type React from "react";
+
+type LayoutState = {
+  openNavigator: boolean;
+  toggleNavigator: () => void;
+};
+
+const LayoutContext = createContext<LayoutState>(undefined);
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+export const LayoutProvider: React.FunctionComponent<LayoutProps> = ({
+  children,
+}) => {
+  const [openNavigator, setOpenNavigator] = useState<boolean>(false);
+
+  const toggleNavigator = useCallback(() => {
+    setOpenNavigator((open) => !open);
+  }, [setOpenNavigator]);
+
+  return (
+    <LayoutContext.Provider
+      value={{
+        openNavigator,
+        toggleNavigator,
+      }}
+      children={children}
+    />
+  );
+};
+
+export const useLayout = (): LayoutState => useContext(LayoutContext);

From d760530791e597ece8bf17b187fd5d8167625c86 Mon Sep 17 00:00:00 2001
From: pablo <pagoru@gmail.com>
Date: Sat, 24 May 2025 07:55:48 +0200
Subject: [PATCH 3/5] wip

---
 .../icons/burger-arrow-icon.component.tsx         | 15 +++++++++++++++
 .../icons/burger-cross-icon.component.tsx         |  3 +--
 src/components/icons/icons.stories.tsx            |  7 +++++++
 src/components/icons/index.ts                     |  2 ++
 src/components/layout/header/header.component.tsx |  4 ++--
 src/components/layout/header/header.module.scss   |  2 ++
 6 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 src/components/icons/burger-arrow-icon.component.tsx

diff --git a/src/components/icons/burger-arrow-icon.component.tsx b/src/components/icons/burger-arrow-icon.component.tsx
new file mode 100644
index 0000000..6e9c6b7
--- /dev/null
+++ b/src/components/icons/burger-arrow-icon.component.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { IconComponent } from "./icon.component";
+import type { IconProps } from "./icon.component";
+
+export const BurgerArrowIconComponent: React.FC<IconProps> = ({
+  fill = "white",
+  ...props
+}) => (
+  <IconComponent {...props}>
+    <path
+      d="M14.3491 3.45907C14.8495 3.07065 15.5725 3.11672 16.0191 3.58504C16.4953 4.08462 16.4765 4.87527 15.9771 5.35165L8.65187 12.335L15.9771 19.3194L16.065 19.4122C16.4771 19.8935 16.4657 20.6186 16.0191 21.087C15.5724 21.5552 14.8494 21.6005 14.3491 21.212L14.2515 21.129L5.97902 13.2403C5.73169 13.0045 5.59141 12.6778 5.59132 12.336C5.59132 11.9942 5.73162 11.6666 5.97902 11.4307L14.2515 3.54305L14.3491 3.45907Z"
+      fill={fill}
+    />
+  </IconComponent>
+);
diff --git a/src/components/icons/burger-cross-icon.component.tsx b/src/components/icons/burger-cross-icon.component.tsx
index efebfce..6d4bb17 100644
--- a/src/components/icons/burger-cross-icon.component.tsx
+++ b/src/components/icons/burger-cross-icon.component.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { IconComponent } from "./icon.component";
 import type { IconProps } from "./icon.component";
 
-export const BurgerIconComponent: React.FC<IconProps> = ({
+export const BurgerCrossIconComponent: React.FC<IconProps> = ({
   fill = "white",
   ...props
 }) => (
@@ -13,7 +13,6 @@ export const BurgerIconComponent: React.FC<IconProps> = ({
       stroke-width="2.5"
       stroke-linecap="round"
       stroke-linejoin="round"
-      fill={fill}
     />
   </IconComponent>
 );
diff --git a/src/components/icons/icons.stories.tsx b/src/components/icons/icons.stories.tsx
index 79667ec..4df48b7 100644
--- a/src/components/icons/icons.stories.tsx
+++ b/src/components/icons/icons.stories.tsx
@@ -27,6 +27,9 @@ import { NetworkIconComponent } from "./network-icon.component";
 import { ForbiddenIconComponent } from "./forbidden-icon.component";
 import { AnalyticsIconComponent } from "./analytics-icon.component";
 import { KeysIconComponent } from "./keys-icon.component";
+import {BurgerIconComponent} from "./burger-icon.component";
+import {BurgerCrossIconComponent} from "./burger-cross-icon.component";
+import {BurgerArrowIconComponent} from "./burger-arrow-icon.component";
 
 export default {
   title: "Components/Icons",
@@ -55,6 +58,9 @@ export const Download = () => <DownloadIconComponent />;
 export const Forbidden = () => <ForbiddenIconComponent />;
 export const Analytics = () => <AnalyticsIconComponent />;
 export const Keys = () => <KeysIconComponent />;
+export const Burger = () => <BurgerIconComponent />;
+export const BurgerCross = () => <BurgerCrossIconComponent />;
+export const BurgerArrow = () => <BurgerArrowIconComponent />;
 
 export const CC = () => <CCIconComponent />;
 export const BY = () => <BYIconComponent />;
@@ -65,3 +71,4 @@ export const LowSignal = () => <LowSignalIconComponent />;
 export const MediumSignal = () => <MediumSignalIconComponent />;
 export const HighSignal = () => <HighSignalIconComponent />;
 export const FullSignal = () => <FullSignalIconComponent />;
+
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index b80e335..e85f159 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -19,6 +19,8 @@ export * from "./forbidden-icon.component";
 export * from "./analytics-icon.component";
 export * from "./keys-icon.component";
 export * from "./burger-icon.component";
+export * from "./burger-cross-icon.component";
+export * from "./burger-arrow-icon.component";
 
 export * from "./cc";
 export * from "./signal";
diff --git a/src/components/layout/header/header.component.tsx b/src/components/layout/header/header.component.tsx
index b4b52b4..5354e13 100644
--- a/src/components/layout/header/header.component.tsx
+++ b/src/components/layout/header/header.component.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import styles from "./header.module.scss";
 import { useLayout } from "../../../hooks";
 import { useCallback } from "react";
-import { BurgerIconComponent, CrossIconComponent } from "../../icons";
+import {BurgerArrowIconComponent, BurgerIconComponent} from "../../icons";
 
 type Props = {
   children?: React.ReactNode;
@@ -20,7 +20,7 @@ export const HeaderComponent: React.FC<Props> = ({ children }) => {
   return (
     <header className={styles.header}>
       <div className={styles.burger} onClick={onClickBurger}>
-        {openNavigator ? <CrossIconComponent /> : <BurgerIconComponent />}
+        {openNavigator ? <BurgerArrowIconComponent /> : <BurgerIconComponent />}
       </div>
       {children}
     </header>
diff --git a/src/components/layout/header/header.module.scss b/src/components/layout/header/header.module.scss
index b8f70f6..2894db1 100644
--- a/src/components/layout/header/header.module.scss
+++ b/src/components/layout/header/header.module.scss
@@ -10,6 +10,8 @@
 
   .burger {
     display: none;
+    cursor: pointer;
+    margin-left: 2rem;
 
     @include phone-only() {
       display: inherit;

From 7b70588602c021ce60dca28d2997746dfe823d02 Mon Sep 17 00:00:00 2001
From: pagoru <pagoru@gmail.com>
Date: Sat, 24 May 2025 23:25:34 +0200
Subject: [PATCH 4/5] wip

---
 src/components/icons/burger-cross-icon.component.tsx        | 6 +++---
 src/components/icons/burger-icon.component.tsx              | 6 +++---
 .../layout/navigation/nav-item/nav-item.component.tsx       | 4 ++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/icons/burger-cross-icon.component.tsx b/src/components/icons/burger-cross-icon.component.tsx
index 6d4bb17..a24318f 100644
--- a/src/components/icons/burger-cross-icon.component.tsx
+++ b/src/components/icons/burger-cross-icon.component.tsx
@@ -10,9 +10,9 @@ export const BurgerCrossIconComponent: React.FC<IconProps> = ({
     <path
       d="M3.7269 6.62755H20.2731M3.7269 12.1429H20.2731M3.7269 17.6583H20.2731"
       stroke={fill}
-      stroke-width="2.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </IconComponent>
 );
diff --git a/src/components/icons/burger-icon.component.tsx b/src/components/icons/burger-icon.component.tsx
index efebfce..4d7d08d 100644
--- a/src/components/icons/burger-icon.component.tsx
+++ b/src/components/icons/burger-icon.component.tsx
@@ -10,9 +10,9 @@ export const BurgerIconComponent: React.FC<IconProps> = ({
     <path
       d="M3.7269 6.62755H20.2731M3.7269 12.1429H20.2731M3.7269 17.6583H20.2731"
       stroke={fill}
-      stroke-width="2.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       fill={fill}
     />
   </IconComponent>
diff --git a/src/components/layout/navigation/nav-item/nav-item.component.tsx b/src/components/layout/navigation/nav-item/nav-item.component.tsx
index aa2a5b0..8ba5938 100644
--- a/src/components/layout/navigation/nav-item/nav-item.component.tsx
+++ b/src/components/layout/navigation/nav-item/nav-item.component.tsx
@@ -5,6 +5,7 @@ import styles from "./nav-item.module.scss";
 import { cn } from "../../../../utils";
 import type { BoxProps } from "../../../../components";
 import { ButtonComponent } from "../../../../components";
+import { useLayout } from "../../../../hooks";
 
 type Props = {
   className?: string;
@@ -20,11 +21,14 @@ export const NavItemComponent: React.FC<Props> = ({
   children,
   ...props
 }) => {
+  const { toggleNavigator } = useLayout();
+
   return (
     <ButtonComponent
       {...props}
       color={selected ? "blue" : "dark"}
       className={cn(className, styles.navItem, [styles.selected, selected])}
+      onClick={toggleNavigator}
     >
       {icon}
       <span className={styles.text}>{children}</span>

From 29d690e12d3b70a47558ff6e24bad98663aaae98 Mon Sep 17 00:00:00 2001
From: pagoru <pagoru@gmail.com>
Date: Sat, 24 May 2025 23:32:33 +0200
Subject: [PATCH 5/5] wip

---
 .storybook/preview.tsx                                     | 6 ++----
 src/components/icons/icons.stories.tsx                     | 7 +++----
 src/components/layout/header/header.component.tsx          | 2 +-
 .../layout/main-layout/main-layout.component.tsx           | 5 +++--
 src/components/layout/navigation/index.ts                  | 4 ++--
 .../layout/navigation/navigator/navigator.module.scss      | 1 -
 6 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index fd0ed94..4fe8669 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -4,7 +4,7 @@ import { BackgroundComponent } from "../src/components";
 import { useEffect, useState } from "react";
 import { addons } from "@storybook/preview-api";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
-import {LayoutProvider} from "../src/hooks";
+import { LayoutProvider } from "../src/hooks";
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
@@ -45,9 +45,7 @@ export default preview;
 export const decorators = [
   (renderStory) => (
     <BackgroundComponent className="storybook-background">
-      <LayoutProvider>
-        {renderStory()}
-      </LayoutProvider>
+      <LayoutProvider>{renderStory()}</LayoutProvider>
     </BackgroundComponent>
   ),
   (renderStory) => (
diff --git a/src/components/icons/icons.stories.tsx b/src/components/icons/icons.stories.tsx
index 4df48b7..8bb23a8 100644
--- a/src/components/icons/icons.stories.tsx
+++ b/src/components/icons/icons.stories.tsx
@@ -27,9 +27,9 @@ import { NetworkIconComponent } from "./network-icon.component";
 import { ForbiddenIconComponent } from "./forbidden-icon.component";
 import { AnalyticsIconComponent } from "./analytics-icon.component";
 import { KeysIconComponent } from "./keys-icon.component";
-import {BurgerIconComponent} from "./burger-icon.component";
-import {BurgerCrossIconComponent} from "./burger-cross-icon.component";
-import {BurgerArrowIconComponent} from "./burger-arrow-icon.component";
+import { BurgerIconComponent } from "./burger-icon.component";
+import { BurgerCrossIconComponent } from "./burger-cross-icon.component";
+import { BurgerArrowIconComponent } from "./burger-arrow-icon.component";
 
 export default {
   title: "Components/Icons",
@@ -71,4 +71,3 @@ export const LowSignal = () => <LowSignalIconComponent />;
 export const MediumSignal = () => <MediumSignalIconComponent />;
 export const HighSignal = () => <HighSignalIconComponent />;
 export const FullSignal = () => <FullSignalIconComponent />;
-
diff --git a/src/components/layout/header/header.component.tsx b/src/components/layout/header/header.component.tsx
index 5354e13..4ecec66 100644
--- a/src/components/layout/header/header.component.tsx
+++ b/src/components/layout/header/header.component.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import styles from "./header.module.scss";
 import { useLayout } from "../../../hooks";
 import { useCallback } from "react";
-import {BurgerArrowIconComponent, BurgerIconComponent} from "../../icons";
+import { BurgerArrowIconComponent, BurgerIconComponent } from "../../icons";
 
 type Props = {
   children?: React.ReactNode;
diff --git a/src/components/layout/main-layout/main-layout.component.tsx b/src/components/layout/main-layout/main-layout.component.tsx
index 2f04159..a6edb92 100644
--- a/src/components/layout/main-layout/main-layout.component.tsx
+++ b/src/components/layout/main-layout/main-layout.component.tsx
@@ -9,10 +9,11 @@ import {
   BackgroundComponent,
   CardComponent,
   MainComponent,
-  LicenseComponent, HeaderComponent,
+  LicenseComponent,
+  HeaderComponent,
 } from "../../../components";
 import { cn } from "../../../utils";
-import {LayoutProvider} from "../../../hooks";
+import { LayoutProvider } from "../../../hooks";
 
 type Props = {
   navigatorChildren?: React.ReactNode;
diff --git a/src/components/layout/navigation/index.ts b/src/components/layout/navigation/index.ts
index d1b4308..960652f 100644
--- a/src/components/layout/navigation/index.ts
+++ b/src/components/layout/navigation/index.ts
@@ -1,2 +1,2 @@
-export * from './nav-item'
-export * from './navigator'
\ No newline at end of file
+export * from "./nav-item";
+export * from "./navigator";
diff --git a/src/components/layout/navigation/navigator/navigator.module.scss b/src/components/layout/navigation/navigator/navigator.module.scss
index c10c786..a8c4249 100644
--- a/src/components/layout/navigation/navigator/navigator.module.scss
+++ b/src/components/layout/navigation/navigator/navigator.module.scss
@@ -6,7 +6,6 @@
 
   padding: 1rem;
 
-
   &.open {
     display: flex !important;
   }