feat(appmenu): add circular menu adaptivity (#1201)

Author: dimakorzhovnik

src/components/appMenu/CircularMenu.tsx

@@ -10,6 +10,8 @@ declare module 'react' {
   interface CSSProperties {
     '--diameter'?: string;
     '--delta'?: string;
+    '--icon-size'?: string;
+    '--button-size'?: string;
   }
 }
 
@@ -19,6 +21,9 @@ function CircularMenu({ circleSize }) {
   const linkChunks = _.chunk(itemsMenu(), chunkSize);
   const location = useLocation();
 
+  const buttonSize = Math.min(circleSize * 0.15, 38);
+  const iconSize = buttonSize - 8;
+
   const calculateDiameter = (index, circleSize) => {
     const menuCircleDiameter = circleSize / 2 + 40 * (index + 1) - 10;
     const nextLevelMenuAngle = index === 1 ? 11 : 0;
@@ -68,6 +73,8 @@ function CircularMenu({ circleSize }) {
               style={{
                 '--diameter': `${menuCircleDiameter}px`,
                 '--delta': `${nextLevelMenuAngle}deg`,
+                '--icon-size': `${iconSize}px`,
+                '--button-size': `${buttonSize}px`,
               }}
             >
               {chunk.map((item, index) => {

src/components/appMenu/CircularMenuItem.module.scss

@@ -5,8 +5,8 @@
   opacity: 1;
   background-color: #101010;
   border-radius: 50%;
-  width: 38px;
-  height: 38px;
+  width: var(--button-size, 38px);
+  height: var(--button-size, 38px);
   justify-content: center;
   align-items: center;
   display: flex;
@@ -30,8 +30,8 @@
 }
 
 .icon {
-  width: 30px;
-  height: 30px;
+  width: var(--icon-size, 30px);
+  height: var(--icon-size, 30px);
   object-fit: fill;
   border-radius: 50%;
   justify-content: center;

src/layouts/Main.tsx

@@ -28,7 +28,7 @@ function MainLayout({ children }: { children: JSX.Element }) {
   const dispatch = useAppDispatch();
   const [isRenderGraph, setIsRenderGraph] = useState(false);
 
-  const graphSize = 220;
+  const graphSize = Math.min(viewportWidth * 0.13, 220);
   const isMobile =
     viewportWidth <= Number(stylesOracle.mobileBreakpoint.replace('px', ''));