refactor(appmenu): small refactor (#1206)

Author: OggyKUN

src/components/appMenu/CircularMenu.module.scss renamed to src/components/appMenu/CircularMenu/CircularMenu.module.scss

@@ -1,11 +1,12 @@
 .circle {
   position: fixed;
   bottom: 0px;
-  z-index: -1;
   width: 220px;
   height: 220px;
   display: inline-flex;
   border-radius: 50%;
+  z-index: 4;
+  pointer-events: none;
 }
 
 .menu {
@@ -20,34 +21,35 @@
 
 .menu li {
   grid-area: 1/1;
-  transform: rotate(calc(var(--r) + var(--delta))) translateX(var(--diameter))
-    rotate(calc(-1 * (var(--r) + var(--delta))));
+  transform: rotate(calc(var(--rotation-angle) + var(--delta)))
+    translateX(var(--diameter))
+    rotate(calc(-1 * (var(--rotation-angle) + var(--delta))));
 }
 
 .menu li:nth-child(1) {
-  --r: calc(-5 * var(--i));
+  --rotation-angle: calc(-5 * var(--i));
 }
 
 .menu li:nth-child(2) {
-  --r: calc(-4 * var(--i));
+  --rotation-angle: calc(-4 * var(--i));
 }
 
 .menu li:nth-child(3) {
-  --r: calc(-3 * var(--i));
+  --rotation-angle: calc(-3 * var(--i));
 }
 
 .menu li:nth-child(4) {
-  --r: calc(-2 * var(--i));
+  --rotation-angle: calc(-2 * var(--i));
 }
 
 .menu li:nth-child(5) {
-  --r: calc(-1 * var(--i));
+  --rotation-angle: calc(-1 * var(--i));
 }
 
 .menu li:nth-child(6) {
-  --r: calc(0 * var(--i));
+  --rotation-angle: calc(0 * var(--i));
 }
 
 .menu li:nth-child(7) {
-  --r: calc(1 * var(--i));
+  --rotation-angle: calc(1 * var(--i));
 }

src/components/appMenu/CircularMenu.tsx renamed to src/components/appMenu/CircularMenu/CircularMenu.tsx

@@ -1,10 +1,8 @@
-import { useState, useEffect } from 'react';
-import itemsMenu from 'src/utils/appsMenu';
+import getMenuItems from 'src/utils/appsMenu';
 import styles from './CircularMenu.module.scss';
-import { MenuItem } from 'src/types/menu';
-import { useLocation } from 'react-router-dom';
 import _ from 'lodash';
 import CircularMenuItem from './CircularMenuItem';
+import { useActiveMenuItem } from 'src/hooks/useActiveMenuItem';
 
 declare module 'react' {
   interface CSSProperties {
@@ -15,43 +13,18 @@ declare module 'react' {
 }
 
 function CircularMenu({ circleSize }) {
-  const [activeItem, setActiveItem] = useState<MenuItem | null>(null);
   const chunkSize = 7;
-  const linkChunks = _.chunk(itemsMenu(), chunkSize);
-  const location = useLocation();
+  const linkChunks = _.chunk(getMenuItems(), chunkSize);
+
+  const { isActiveItem, activeItem } = useActiveMenuItem(getMenuItems());
 
   const calculateDiameter = (index, circleSize) => {
     const menuCircleDiameter = circleSize / 2 + 45 * (index + 1) - 10;
     const nextLevelMenuAngle = index === 1 ? -28 : 0; // decreases the angle of second menu layer
-    const menuItemsAngle = index === 1 ? 16 : 23; // angle in wich menu items spreads around brain
+    const menuItemsAngle = index === 1 ? 16 : 23; // angle in which menu items spread around the brain
     return { menuCircleDiameter, nextLevelMenuAngle, menuItemsAngle };
   };
 
-  const isActiveItem = (item: MenuItem) => {
-    if (location.pathname === item.to) {
-      return true;
-    }
-    if (
-      item.to === '/robot' &&
-      (location.pathname.includes('@') || location.pathname.includes('neuron/'))
-    ) {
-      return true;
-    }
-    if (item.to === '/senate' && location.pathname.startsWith('/senate/')) {
-      return true;
-    }
-    return item.subItems?.some((subItem) => location.pathname === subItem.to);
-  };
-
-  useEffect(() => {
-    const activeMenuItem = itemsMenu().find((item) => isActiveItem(item));
-    setActiveItem(activeMenuItem || null);
-  }, [location]);
-
-  const handleItemClick = (item: MenuItem) => {
-    setActiveItem(item);
-  };
-
   return (
     <div>
       {linkChunks.map((chunk, index) => {
@@ -77,7 +50,7 @@ function CircularMenu({ circleSize }) {
                   <li key={index}>
                     <CircularMenuItem
                       item={item}
-                      onClick={() => handleItemClick(item)}
+                      onClick={() => isActiveItem(item)}
                       selected={isSelected}
                     />
                   </li>

src/components/appMenu/CircularMenuItem.module.scss renamed to src/components/appMenu/CircularMenu/CircularMenuItem.module.scss

@@ -1,6 +1,6 @@
-@import '../../style/mixins.scss';
+@import '../../../style/mixins.scss';
 
-.menu_item {
+.menuItem {
   box-shadow: 0px 0px 13px #ffffff54;
   opacity: 1;
   background-color: #101010;
@@ -10,16 +10,17 @@
   justify-content: center;
   align-items: center;
   display: flex;
+  pointer-events: auto;
 }
 
-.menu_item.active {
+.menuItem.active {
   border: 1px solid #ffffff6b;
   box-shadow: 0px 0px 8px #ffffff98 inset, 0px 0px 13px #ffffff98;
   width: 100%;
   height: 100%;
 }
 
-.menu_item:hover {
+.menuItem:hover {
   border: 1px solid #4ed6ae;
   box-shadow: 0px 0px 8px #4ed6ae inset, 0px 0px 13px #4ed6ae;
 }

src/components/appMenu/CircularMenuItem.tsx renamed to src/components/appMenu/CircularMenu/CircularMenuItem.tsx

@@ -14,7 +14,7 @@ function CircularMenuItem({ item, onClick, selected }: Props) {
   const isExternal = item.to.startsWith('http');
 
   return (
-    <div className={cx(styles.menu_item, { [styles.active]: selected })}>
+    <div className={cx(styles.menuItem, { [styles.active]: selected })}>
       <AdviserHoverWrapper adviserContent={item.name}>
         <NavLink
           to={item.to}
@@ -26,7 +26,6 @@ function CircularMenuItem({ item, onClick, selected }: Props) {
           {isExternal && <span className={styles.external}></span>}
         </NavLink>
       </AdviserHoverWrapper>
-
     </div>
   );
 }

src/components/appMenu/MobileMenu.tsx

@@ -1,4 +1,4 @@
-@import '../../style/mixins.scss';
+@import '../../../style/mixins.scss';
 
 .mobileMenu {
   position: fixed;
@@ -10,14 +10,7 @@
   justify-content: center;
   display: flex;
   justify-content: space-between;
-
-  &.closed {
-    pointer-events: none;
-
-    .menuButton {
-      pointer-events: auto;
-    }
-  }
+  pointer-events: none;
 
   &.open {
     pointer-events: auto;
@@ -40,6 +33,8 @@
   align-items: center;
   box-shadow: 0px 0px 13px #ffffff54;
 
+  pointer-events: auto;
+
   &.active {
     border: 1px solid #ffffff6b;
     box-shadow: 0px 0px 8px #ffffff4d inset, 0px 0px 13px #ffffff4d;
@@ -59,6 +54,11 @@
   grid-template-rows: repeat(2, 1fr);
   grid-auto-flow: column;
   grid-gap: 20px;
+  visibility: hidden;
+}
+
+.visible {
+  visibility: visible;
 }
 
 .menuItem {
@@ -77,14 +77,6 @@
   }
 }
 
-.visible {
-  visibility: visible;
-}
-
-.hidden {
-  visibility: hidden;
-}
-
 .external {
   display: block;
   position: absolute;

src/components/appMenu/MobileMenu.module.scss renamed to src/components/appMenu/MobileMenu/MobileMenu.module.scss

@@ -0,0 +1,64 @@
+import { useState, useRef } from 'react';
+import { NavLink } from 'react-router-dom';
+import getMenuItems from 'src/utils/appsMenu';
+import styles from './MobileMenu.module.scss';
+import cx from 'classnames';
+import useOnClickOutside from 'src/hooks/useOnClickOutside';
+import { useActiveMenuItem } from 'src/hooks/useActiveMenuItem';
+
+const MobileMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const { isActiveItem, activeItem } = useActiveMenuItem(getMenuItems());
+
+  useOnClickOutside(menuRef, () => setIsOpen(false));
+
+  return (
+    <div
+      ref={menuRef}
+      className={cx(styles.mobileMenu, { [styles.open]: isOpen })}
+    >
+      <div className={cx(styles.menuContent, { [styles.visible]: isOpen })}>
+        <button
+          className={cx(styles.menuButton, { [styles.active]: isOpen })}
+          onClick={toggleMenu}
+        >
+          <img
+            src={activeItem?.icon}
+            className={styles.icon}
+            alt={`${activeItem?.name} menu active icon`}
+          />
+        </button>
+        {getMenuItems().map((item, index) => {
+          const isExternal = item.to.startsWith('http');
+          return (
+            !isActiveItem(item) && (
+              <NavLink
+                key={index}
+                to={item.to}
+                className={styles.menuItem}
+                onClick={toggleMenu}
+                {...(isExternal && {
+                  target: '_blank',
+                  rel: 'noreferrer noopener',
+                })}
+              >
+                <img
+                  src={item.icon}
+                  className={styles.icon}
+                  alt={`${item.name} menu icon`}
+                />
+                {isExternal && <span className={styles.external}></span>}
+              </NavLink>
+            )
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default MobileMenu;

src/components/appMenu/MobileMenu/MobileMenu.tsx

@@ -51,4 +51,4 @@ $icon-size: 30px;
       @include active-el();
     }
   }
-}
+}