feat(RSS-ECOMM-3_33): implement burger menu (#221)

feat: implement burger menu

src/app/styles/variables.scss

@@ -48,5 +48,6 @@
     --small-br: 5px;
     --medium-br: 5px;
     --large-br: 10px;
+    --regular-font: 400 10px 'Cerapro', sans-serif;
   }
 }

src/entities/Navigation/view/NavigationView.ts

@@ -36,9 +36,9 @@ class NavigationView {
       tag: 'nav',
     });
     this.navigation.append(
-      this.toMainLink.getHTML(),
       this.toLoginLink.getHTML(),
       this.toRegisterLink.getHTML(),
+      this.toMainLink.getHTML(),
       this.toCatalogLink.getHTML(),
       this.toAboutLink.getHTML(),
     );

src/entities/Navigation/view/navigationView.module.scss

@@ -4,14 +4,15 @@
   align-self: center;
   justify-content: center;
   order: 2;
+  margin: 0 auto;
   height: 70px;
-  gap: var(--extra-small-offset);
 }
 
 .link {
   position: relative;
   display: flex;
   align-items: center;
+  padding: 0 calc(var(--extra-small-offset) / 2);
   height: 100%;
   font: var(--regular-font);
   letter-spacing: 1px;

src/pages/NotFoundPage/view/notFoundPageView.module.scss

@@ -2,9 +2,11 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  margin: 0 auto;
+  align-self: center;
+  margin: 0 var(--small-offset);
   border-bottom: calc(var(--extra-small-offset) / 2) solid var(--steam-green-800);
-  padding: calc(var(--extra-large-offset) / 2) var(--extra-large-offset);
+  border-radius: var(--medium-br);
+  padding: var(--small-offset);
   padding-bottom: calc(var(--extra-large-offset) / 2 + calc(var(--extra-small-offset) / 2));
   max-width: 500px;
   background-color: var(--white);
@@ -50,8 +52,10 @@
 }
 
 .toMainButton {
+  align-self: center;
   border-radius: var(--small-br);
   padding: calc(var(--extra-small-offset) / 2) var(--small-offset);
+  width: max-content;
   font: var(--bold-font);
   letter-spacing: 1px;
   color: var(--white);

src/widgets/Catalog/view/catalogView.module.scss

@@ -1,12 +1,12 @@
-.catalog {
-  display: flex;
-  width: 500px;
-  height: 500px;
-  background-color: var(--noble-gray-300);
-}
+// .catalog {
+//   display: flex;
+//   width: 500px;
+//   height: 500px;
+//   background-color: var(--noble-gray-300);
+// }
 
-.itemsList {
-  width: 500px;
-  height: 500px;
-  background-color: var(--noble-gray-800);
-}
+// .itemsList {
+//   width: 500px;
+//   height: 500px;
+//   background-color: var(--noble-gray-800);
+// }

src/widgets/Header/model/HeaderModel.ts

@@ -56,7 +56,6 @@ class HeaderModel {
 
   private init(): boolean {
     this.view.getWrapper().append(this.navigation.getHTML());
-    this.checkAuthUser();
     this.checkCurrentUser();
     this.setLogoHandler();
     this.observeCurrentUser();

src/widgets/Header/view/HeaderView.ts

@@ -13,6 +13,8 @@ import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts';
 import styles from './headerView.module.scss';
 
 class HeaderView {
+  private burgerButton: ButtonModel;
+
   private header: HTMLElement;
 
   private linkLogo: LinkModel;
@@ -36,8 +38,50 @@ class HeaderView {
     this.toProfileLink = this.createToProfileLink();
     this.switchLanguageButton = this.createSwitchLanguageButton();
     this.navigationWrapper = this.createNavigationWrapper();
+    this.burgerButton = this.createBurgerButton();
     this.wrapper = this.createWrapper();
     this.header = this.createHTML();
+
+    document.addEventListener('click', ({ target }) => {
+      if (
+        target !== this.navigationWrapper &&
+        this.burgerButton.getHTML().classList.contains(styles.open) &&
+        target !== this.burgerButton.getHTML()
+      ) {
+        this.burgerButton.getHTML().classList.toggle(styles.open);
+        this.navigationWrapper.classList.toggle(styles.open);
+        document.body.classList.toggle(styles.stopScroll);
+      }
+    });
+  }
+
+  private createBurgerButton(): ButtonModel {
+    this.burgerButton = new ButtonModel({
+      classes: [styles.burgerButton],
+    });
+
+    const burgerLine1 = createBaseElement({
+      cssClasses: [styles.burgerLine],
+      tag: 'span',
+    });
+    const burgerLine2 = createBaseElement({
+      cssClasses: [styles.burgerLine],
+      tag: 'span',
+    });
+    const burgerLine3 = createBaseElement({
+      cssClasses: [styles.burgerLine],
+      tag: 'span',
+    });
+
+    this.burgerButton.getHTML().addEventListener('click', () => {
+      this.burgerButton.getHTML().classList.toggle(styles.open);
+      this.navigationWrapper.classList.toggle(styles.open);
+      document.body.classList.toggle(styles.stopScroll);
+    });
+
+    this.burgerButton.getHTML().append(burgerLine1, burgerLine2, burgerLine3);
+
+    return this.burgerButton;
   }
 
   private createHTML(): HTMLElement {
@@ -92,6 +136,7 @@ class HeaderView {
       this.toCartLink.getHTML(),
       this.toProfileLink.getHTML(),
     );
+
     return this.navigationWrapper;
   }
 
@@ -174,10 +219,14 @@ class HeaderView {
       tag: 'div',
     });
 
-    this.wrapper.append(this.linkLogo.getHTML(), this.navigationWrapper);
+    this.wrapper.append(this.linkLogo.getHTML(), this.navigationWrapper, this.burgerButton.getHTML());
     return this.wrapper;
   }
 
+  public getBurgerButton(): ButtonModel {
+    return this.burgerButton;
+  }
+
   public getHTML(): HTMLElement {
     return this.header;
   }
@@ -205,6 +254,14 @@ class HeaderView {
   public getWrapper(): HTMLDivElement {
     return this.wrapper;
   }
+
+  public hideNavigationWrapper(): void {
+    this.navigationWrapper.classList.add(styles.hidden);
+  }
+
+  public showNavigationWrapper(): void {
+    this.navigationWrapper.classList.remove(styles.hidden);
+  }
 }
 
 export default HeaderView;