feat: make responsive layout - fix #106

.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,7 @@ export default preview;
 export const decorators = [
   (renderStory) => (
     <BackgroundComponent className="storybook-background">
-      {renderStory()}
+      <LayoutProvider>{renderStory()}</LayoutProvider>
     </BackgroundComponent>
   ),
   (renderStory) => (

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>
+);

src/components/icons/burger-cross-icon.component.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { IconComponent } from "./icon.component";
+import type { IconProps } from "./icon.component";
+
+export const BurgerCrossIconComponent: 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}
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </IconComponent>
+);

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}
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill={fill}
+    />
+  </IconComponent>
+);

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 />;

src/components/icons/index.ts

@@ -18,6 +18,9 @@ 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 "./burger-cross-icon.component";
+export * from "./burger-arrow-icon.component";
 
 export * from "./cc";
 export * from "./signal";

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;

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 { BurgerArrowIconComponent, BurgerIconComponent } 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 ? <BurgerArrowIconComponent /> : <BurgerIconComponent />}
+      </div>
+      {children}
+    </header>
+  );
 };

src/components/layout/header/header.module.scss

@@ -1,8 +1,20 @@
+@use "../../../styles/all.module.scss" as *;
+
 .header {
   display: flex;
 
   justify-content: space-between;
   align-items: center;
 
   padding: 1rem 1rem 1rem 0;
+
+  .burger {
+    display: none;
+    cursor: pointer;
+    margin-left: 2rem;
+
+    @include phone-only() {
+      display: inherit;
+    }
+  }
 }

src/components/layout/main-layout/main-layout.component.tsx

@@ -10,8 +10,10 @@ import {
   CardComponent,
   MainComponent,
   LicenseComponent,
+  HeaderComponent,
 } from "../../../components";
 import { cn } from "../../../utils";
+import { LayoutProvider } from "../../../hooks";
 
 type Props = {
   navigatorChildren?: React.ReactNode;
@@ -26,26 +28,28 @@ export const MainLayoutComponent: React.FC<Props> = ({
   footerChildren,
 }) => {
   return (
-    <BackgroundComponent>
-      <CardComponent className={styles.bigCard}>
-        <div className={styles.container}>
-          <NavigatorComponent children={navigatorChildren} />
-          <div className={styles.bigContainer}>
-            {/*{headerChildren && <HeaderComponent children={headerChildren} />}*/}
-            <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>
   );
 };

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: (
       <>
@@ -96,3 +96,76 @@ export const Primary = {
     ),
   },
 };
+
+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>
+      </>
+    ),
+  },
+};

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>

src/components/layout/navigation/navigator/navigator.component.tsx

@@ -1,15 +1,22 @@
 import * as React from "react";
 
 // @ts-ignore
-import styles from "./navigation.module.scss";
+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={styles.navigator}>
+    <nav
+      className={cn(styles.navigator, {
+        [styles.open]: openNavigator,
+      })}
+    >
       <div className={styles.logo}>
         <img alt="logo" src={image} />
       </div>

src/components/layout/navigation/navigator/navigation.module.scss → src/components/layout/navigation/navigator/navigator.module.scss

@@ -1,9 +1,18 @@
+@use "../../../../styles/all.module" as *;
+
 .navigator {
   display: flex;
   flex-direction: column;
 
   padding: 1rem;
 
+  &.open {
+    display: flex !important;
+  }
+  @include phone-only() {
+    display: none;
+  }
+
   .logo {
     margin: 0 auto;
 

src/components/layout/navigation/navigator/navigator.stories.ts

@@ -1,10 +1,10 @@
 import { NavigatorComponent } from "./navigator.component";
 
 export default {
-  title: "Components/Layout/Navigation/Navigator",
+  title: "Components/Layout/Navigator",
   component: NavigatorComponent,
 };
 
-export const Primary = {
+export const Navigator = {
   args: {},
 };

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";