th-267: Fix incorrect resize burger menu (#276)

* th-267: * resize burger menu

* th-267: * style for burger menu

---------

Co-authored-by: Alina Kupchyk <[email protected]>

Author: MaxHopaytsa

frontend/src/libs/components/burger-menu/burger-menu.tsx

@@ -1,4 +1,4 @@
-import { Breakpoint, IconName } from '~/libs/enums/enums.js';
+import { IconName } from '~/libs/enums/enums.js';
 import { getValidClassNames } from '~/libs/helpers/helpers.js';
 import {
   useCallback,
@@ -54,8 +54,6 @@ const BurgerMenu: React.FC<Properties> = ({ burgerItems }: Properties) => {
     };
   }, []);
 
-  const isMobile = window.innerWidth <= Breakpoint.MOBILE;
-
   return (
     <div
       ref={menuReference}
@@ -71,21 +69,18 @@ const BurgerMenu: React.FC<Properties> = ({ burgerItems }: Properties) => {
           <ul>
             {burgerItems.map((item, index) => (
               <li key={index}>
-                {isMobile ? (
-                  <Icon
-                    iconName={item.icon}
-                    onClick={handleNavigate(item.navigateTo)}
-                    className={styles.menuIcon}
-                  />
-                ) : (
-                  <Button
-                    frontIcon={item.icon}
-                    isFullWidth
-                    label={item.name}
-                    onClick={handleNavigate(item.navigateTo)}
-                    className={styles.btn}
-                  />
-                )}
+                <Icon
+                  iconName={item.icon}
+                  onClick={handleNavigate(item.navigateTo)}
+                  className={styles.menuIcon}
+                />
+                <Button
+                  frontIcon={item.icon}
+                  isFullWidth
+                  label={item.name}
+                  onClick={handleNavigate(item.navigateTo)}
+                  className={styles.btn}
+                />
               </li>
             ))}
           </ul>

frontend/src/libs/components/burger-menu/styles.module.scss

@@ -26,7 +26,6 @@
   border-radius: 16px;
 
   .btn {
-    display: inline-flex;
     justify-content: start;
     background-color: $blue-dark;
     border-radius: 0;
@@ -48,6 +47,10 @@
     width: 80px;
     background-color: $blue-dark;
 
+    .btn {
+      display: none;
+    }
+
     li {
       padding: 10px 20px;
 
@@ -57,3 +60,13 @@
     }
   }
 }
+
+@media (width > $screen-size-lg) {
+  .btn {
+    display: inline-flex;
+  }
+
+  .menuIcon {
+    display: none;
+  }
+}