Merge remote-tracking branch 'origin/dev' into dev

frontend-next-migration/src/widgets/Navbar/model/getNavbarBuildByTypeAndSize.ts

@@ -1,3 +1,18 @@
+/**
+ * The function `getNavbarBuildByTypeAndSize` returns the appropriate navbar menu based on the type and
+ * size specified.
+ * @param {NavBarType} type - The `type` parameter in the `getNavbarBuildByTypeAndSize` function
+ * represents the type of navigation bar you want to retrieve. It can have the following values:
+ * 'Default', 'Clan', 'GameArt', 'Cookies', or 'Privacy'.
+ * @param {'mobile' | 'tablet' | 'desktop'} size - The `size` parameter in the
+ * `getNavbarBuildByTypeAndSize` function can have three possible values: 'mobile', 'tablet', or
+ * 'desktop'. This parameter is used to determine which set of navigation bar items to return based on
+ * the specified type and size.
+ * @returns The `getNavbarBuildByTypeAndSize` function returns the appropriate navbar menu based on the
+ * provided `type` and `size` parameters. If the `size` is 'desktop', it returns the corresponding
+ * desktop menu based on the `type`. If the `size` is 'mobile' or 'tablet', it returns the
+ * corresponding mobile menu based on the `type`. If the `type`
+ */
 import { NavBarType } from './types';
 import {
   navbarClanMobile,
@@ -16,37 +31,37 @@ import {
 
 export const getNavbarBuildByTypeAndSize = (
   type: NavBarType,
-  isMobileSize: boolean,
+  size: 'mobile' | 'tablet' | 'desktop',
 ) => {
-  if (isMobileSize) {
+  if (size === 'desktop') {
     switch (type) {
       case 'Default':
-        return navbarMenuMobile;
+        return navbarMenuDesktop2;
       case 'Clan':
-        return navbarClanMobile;
+        return navbarClanDesktop;
       case 'GameArt':
-        return navbarGameArtMobile;
+        return navbarGameArtDesktop;
       case 'Cookies':
-        return navbarCookiesMobile;
+        return navbarCookiesDesktop;
       case 'Privacy':
-        return navbarPrivacyMobile;
+        return navbarPrivacyDesktop;
       default:
-        return navbarMenuMobile;
+        return navbarMenuDesktop2;
     }
   } else {
     switch (type) {
       case 'Default':
-        return navbarMenuDesktop2;
+        return navbarMenuMobile;
       case 'Clan':
-        return navbarClanDesktop;
+        return navbarClanMobile;
       case 'GameArt':
-        return navbarGameArtDesktop;
+        return navbarGameArtMobile;
       case 'Cookies':
-        return navbarCookiesDesktop;
+        return navbarCookiesMobile;
       case 'Privacy':
-        return navbarPrivacyDesktop;
+        return navbarPrivacyMobile;
       default:
-        return navbarMenuDesktop2;
+        return navbarMenuMobile;
     }
   }
 };

frontend-next-migration/src/widgets/Navbar/ui/NavbarMain/NavbarMain.tsx

@@ -1,44 +1,51 @@
-'use client'
-import { memo } from "react";
-import useIsMobileSize from "@/shared/lib/hooks/useIsMobileSize";
-import NavbarDesktopV2 from "../NavbarDesktopV2/NavbarDesktopV2";
-import NavbarMobileV2 from "../NavbarMobileV2/NavbarMobileV2";
-import { FixedProvider } from "@/widgets/Navbar/model/FixedProvider";
-import { NavBarType } from "../../model/types";
-import { getNavbarBuildByTypeAndSize } from "../../model/getNavbarBuildByTypeAndSize";
-import useSizes from "@/shared/lib/hooks/useSizes";
-
-
+/* This code snippet is defining a React functional component called `NavbarMain`. It imports necessary
+dependencies such as `memo` from React, and components like `NavbarDesktopV2` and `NavbarMobileV2`.
+It also imports some types and functions related to the navbar. */
+'use client';
+import { memo } from 'react';
+import NavbarDesktopV2 from '../NavbarDesktopV2/NavbarDesktopV2';
+import NavbarMobileV2 from '../NavbarMobileV2/NavbarMobileV2';
+import { FixedProvider } from '@/widgets/Navbar/model/FixedProvider';
+import { NavBarType } from '../../model/types';
+import { getNavbarBuildByTypeAndSize } from '../../model/getNavbarBuildByTypeAndSize';
+import useSizes from '@/shared/lib/hooks/useSizes';
 
 interface NavbarMainProps {
-    overlaid?: boolean;
-    marginTop?: number;
-    className?: string;
-    navBarType?: NavBarType;
+  overlaid?: boolean;
+  marginTop?: number;
+  className?: string;
+  navBarType?: NavBarType;
 }
 
-
-
 export const NavbarMain = memo((props: NavbarMainProps) => {
-    const {
-        overlaid,
-        marginTop,
-        className,
-        navBarType = "Default" } = props;
-    // const { isMobileSize } = useIsMobileSize();
-    const { isMobileSize, isTabletSize} = useSizes();
-    const navbarBuild = getNavbarBuildByTypeAndSize(navBarType, isMobileSize);
-
-    return (
-        <FixedProvider>
-            {isMobileSize || isTabletSize ? (
-                <NavbarMobileV2 overlaid={overlaid} marginTop={marginTop} className={className} navbarBuild={navbarBuild}  navBarType={navBarType}/>
-            ) : (
-                <NavbarDesktopV2 overlaid={overlaid} marginTop={marginTop} className={className} navbarBuild={navbarBuild} navBarType={navBarType} />
-            )}
-        </FixedProvider>
-    );
+  const { overlaid, marginTop, className, navBarType = 'Default' } = props;
+  const { isMobileSize, isTabletSize } = useSizes();
+  /* The line `const size = isMobileSize || isTabletSize ? 'mobile' : 'desktop';` is determining the
+  size of the navbar based on the screen size. */
+  const size = isMobileSize || isTabletSize ? 'mobile' : 'desktop';
+  const navbarBuild = getNavbarBuildByTypeAndSize(navBarType, size);
+
+  return (
+    <FixedProvider>
+      {isMobileSize || isTabletSize ? (
+        <NavbarMobileV2
+          overlaid={overlaid}
+          marginTop={marginTop}
+          className={className}
+          navbarBuild={navbarBuild}
+          navBarType={navBarType}
+        />
+      ) : (
+        <NavbarDesktopV2
+          overlaid={overlaid}
+          marginTop={marginTop}
+          className={className}
+          navbarBuild={navbarBuild}
+          navBarType={navBarType}
+        />
+      )}
+    </FixedProvider>
+  );
 });
 
-NavbarMain.displayName = "NavbarMain";
-
+NavbarMain.displayName = 'NavbarMain';