Casimir/enhancement/652 implement new figma design for collapsed navbar

frontend-next-migration/src/app/[lng]/(helper)/layout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Footer } from '@/widgets/Footer';
-import { Navbar } from '@/widgets/Navbar';
+import { Navbar } from '@/widgets/NavbarV3';
 import { ScrollTop } from '@/features/ScrollTop';
 import LayoutDefault from '../../../preparedPages/Layouts/ui/LayoutDefault/LayoutDefault';
 

frontend-next-migration/src/app/[lng]/(home)/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { ReactNode } from 'react';
-import { Navbar } from '@/widgets/Navbar';
+import { Navbar } from '@/widgets/NavbarV3';
 import { Footer } from '@/widgets/Footer';
 import { ScrollTop } from '@/features/ScrollTop';
 import cls from './homeLayout.module.scss';

frontend-next-migration/src/app/[lng]/(intro)/layout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Footer } from '@/widgets/Footer';
-import { Navbar } from '@/widgets/Navbar';
+import { Navbar } from '@/widgets/NavbarV3';
 
 type Props = {
     children: ReactNode;

frontend-next-migration/src/shared/i18n/locales/en/navbar.json

@@ -2,14 +2,14 @@
   "main": "Main page",
   "forum": "Forum",
   "heroes": "Heroes",
-  "team": "Team",
+  "team": "Contact us",
   "art": "Art",
   "artGame": "Game art",
   "teachingPackage": "Teaching package",
   "login": "Log in",
   "profile": "Profile",
   "logout": "Log out",
-  "community": "Community",
+  "community": "PRG",
   "feedback": "Feedback",
   "game": "Game",
   "clans": "Clans",
@@ -21,7 +21,7 @@
   "SignUpFirst!": "Sign up first!",
   "join": "Join us",
   "clanpage": "Clan Page",
-  "gameart": "Game Art",
+  "gameart": "Education",
   "gallery": "Gallery",
   "news": "News",
   "dlPackage": "Education package",
@@ -32,5 +32,8 @@
   "teachers": "Teachers",
   "furnituresets": "Furniture",
   "collections": "Collections",
-  "about": "About"
+  "about": "About",
+  "education": "Education",
+  "prg": "PRG",
+  "contactUs": "Contact us"
 }

frontend-next-migration/src/shared/i18n/locales/fi/navbar.json

@@ -2,14 +2,14 @@
   "main": "Pääsivu",
   "forum": "Foorumi",
   "heroes": "Hahmot",
-  "team": "Tiimi",
+  "team": "Ota yhteyttä",
   "art": "Taide",
   "artGame": "Pelitaide",
   "teachingPackage": "Opetuspaketti",
   "login": "Kirjaudu",
   "profile": "Profiili",
   "logout": "Kirjaudu ulos",
-  "community": "Yhteisö",
+  "community": "PRG",
   "feedback": "Palaute",
   "game": "Peli",
   "clans": "Klaanit",
@@ -19,7 +19,7 @@
   "SignUpFirst!": "Kirjadu ensin!",
   "join": "Tule mukaan",
   "clanpage": "Klaanisivu",
-  "gameart": "Pelitaide",
+  "gameart": "Opetus",
   "gallery": "Galleria",
   "news": "Uutiset",
   "dlPackage": "Opetuspaketti",
@@ -30,5 +30,8 @@
   "teachers": "Opettajat",
   "furnituresets": "Huonekalumallistot",
   "collections": "Kokoelmat",
-  "about": "Meistä"
+  "about": "Meistä",
+  "education": "Opetus",
+  "prg": "PRG",
+  "contactUs": "Ota yhteyttä"
 }

frontend-next-migration/src/shared/ui/DropdownWrapper/ui/DropdownWrapper.module.scss

@@ -57,7 +57,7 @@
 }
 .childrenWrapper {
     display: flex;
-    inline-size: 110px;
+    inline-size: fit-content;
     overflow-wrap: break-word;
 }
 

frontend-next-migration/src/widgets/NavbarV3/index.ts

@@ -0,0 +1 @@
+export { NavbarMain as Navbar } from './ui/NavbarMain/NavbarMain';

frontend-next-migration/src/widgets/NavbarV3/model/data/NavbarBuilder.ts

@@ -0,0 +1,46 @@
+import { ItemType, NamedMenu, NavbarBuild, NavbarMenuItem, NavLogoObject } from '../types';
+
+export class NavbarBuilder {
+    private menu: NavbarMenuItem[] = [];
+    private namedMenu: NamedMenu = {};
+
+    addLink(
+        name: string,
+        path: string,
+        isActive: boolean = true,
+        position?: string,
+        accessErrorMsg?: string,
+    ): void {
+        this.menu.push({
+            name,
+            path,
+            isActive: true,
+            type: ItemType.navLink,
+            position,
+            accessErrorMsg,
+        });
+    }
+
+    addLogo(
+        name: string,
+        src: string,
+        path: string,
+        position?: string,
+        accessErrorMsg?: string,
+    ): void {
+        const logoObject = {
+            name,
+            src,
+            path,
+            type: ItemType.navLogo,
+            position,
+            accessErrorMsg,
+        } as NavLogoObject;
+        this.namedMenu[ItemType.navLogo] = logoObject;
+        this.menu.push(logoObject);
+    }
+
+    build(): NavbarBuild {
+        return { menu: this.menu, namedMenu: this.namedMenu };
+    }
+}

frontend-next-migration/src/widgets/NavbarV3/model/data/navbarMenuDesktop.ts

@@ -0,0 +1,22 @@
+import img from '@/shared/assets/images/altLogo.png';
+import {
+    getRouteTeamPage,
+    getRouteMainPage,
+    getRouteAllNewsPage,
+    getRouteDefenseGalleryPage,
+    getRouteGalleryPage,
+    getRouteGameArtPage,
+    getRouteAboutPage,
+} from '@/shared/appLinks/RoutePaths';
+import { NavbarBuilder } from './NavbarBuilder';
+
+const navbarBuilder = new NavbarBuilder();
+navbarBuilder.addLogo('Nav logo', img as unknown as string, getRouteMainPage());
+navbarBuilder.addLink('news', getRouteAllNewsPage(), true);
+navbarBuilder.addLink('game', getRouteDefenseGalleryPage(), true);
+navbarBuilder.addLink('gallery', getRouteGalleryPage(), true);
+navbarBuilder.addLink('education', getRouteGameArtPage(), true);
+navbarBuilder.addLink('prg', getRouteAboutPage(), true);
+navbarBuilder.addLink('contactUs', getRouteTeamPage(), true);
+
+export const navbarMenuDesktop = navbarBuilder.build();

frontend-next-migration/src/widgets/NavbarV3/model/data/navbarMenuMobile.ts

@@ -0,0 +1,22 @@
+import { NavbarBuilder } from './NavbarBuilder';
+import {
+    getRouteMainPage,
+    getRouteAllNewsPage,
+    getRouteDefenseGalleryPage,
+    getRouteGalleryPage,
+    getRouteGameArtPage,
+    getRouteAboutPage,
+    getRouteTeamPage,
+} from '@/shared/appLinks/RoutePaths';
+import img from '@/shared/assets/images/altLogo.png';
+
+const navbarBuilder = new NavbarBuilder();
+navbarBuilder.addLink('news', getRouteAllNewsPage(), true);
+navbarBuilder.addLink('game', getRouteDefenseGalleryPage(), true);
+navbarBuilder.addLink('gallery', getRouteGalleryPage(), true);
+navbarBuilder.addLink('education', getRouteGameArtPage(), true);
+navbarBuilder.addLink('prg', getRouteAboutPage(), true);
+navbarBuilder.addLink('contactUs', getRouteTeamPage(), true);
+navbarBuilder.addLogo('main', img as unknown as string, getRouteMainPage());
+
+export const navbarMenuMobile = navbarBuilder.build();

frontend-next-migration/src/widgets/NavbarV3/model/getNavbarBuildBySize.ts

@@ -0,0 +1,9 @@
+import { navbarMenuDesktop } from './data/navbarMenuDesktop';
+import { navbarMenuMobile } from './data/navbarMenuMobile';
+
+export const getNavbarBuildBySize = (size: 'mobile' | 'tablet' | 'desktop') => {
+    if (size === 'desktop') {
+        return navbarMenuDesktop;
+    }
+    return navbarMenuMobile;
+};

frontend-next-migration/src/widgets/NavbarV3/model/types/index.ts

@@ -0,0 +1,35 @@
+export enum ItemType {
+    navLink = 'navLink',
+    navLogo = 'navLogo',
+}
+
+export type NavbarLinkObject = {
+    name: string;
+    path: string;
+    isActive: boolean;
+    type: ItemType.navLink;
+    position?: string;
+    accessErrorMsg?: string;
+};
+
+export type NavLogoObject = {
+    name: string;
+    src: string;
+    path: string;
+    type: ItemType.navLogo;
+    position?: string;
+    accessErrorMsg?: string;
+};
+
+export type NavbarMenuItem = NavbarLinkObject | NavLogoObject;
+
+export type NavbarMenu = NavbarMenuItem[];
+
+export type NamedMenu = {
+    [ItemType.navLogo]?: NavLogoObject;
+};
+
+export type NavbarBuild = {
+    menu: NavbarMenu;
+    namedMenu: NamedMenu;
+};

frontend-next-migration/src/widgets/NavbarV3/ui/NavbarDesktopV3/NavItem.tsx

@@ -0,0 +1,66 @@
+'use client';
+import Image from 'next/image';
+import { memo } from 'react';
+import { useClientTranslation } from '@/shared/i18n';
+import { AppLink, AppLinkTheme } from '@/shared/ui/AppLink/AppLink';
+import { NavbarMenuItem } from '../../model/types';
+import cls from './NavbarDesktop.module.scss';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+type NavItemProps = {
+    item: NavbarMenuItem;
+};
+
+const CHEVRON_ITEMS = new Set(['game', 'gallery', 'gameart', 'community']);
+
+const NavItem = memo((props: NavItemProps) => {
+    const { item } = props;
+    const { type: itemType } = item;
+    const { t } = useClientTranslation('navbar');
+
+    if (itemType === 'navLink') {
+        const showChevron = 'name' in item && CHEVRON_ITEMS.has(item.name);
+        return (
+            <li>
+                <AppLink
+                    theme={AppLinkTheme.PRIMARY}
+                    to={item.path}
+                >
+                    <span className={cls.col}>{t(`${item.name}`)}</span>
+                    {showChevron && (
+                        <FontAwesomeIcon
+                            icon={faChevronDown}
+                            className={cls.chevron}
+                        />
+                    )}
+                </AppLink>
+            </li>
+        );
+    }
+
+    if (itemType === 'navLogo') {
+        return (
+            <AppLink
+                theme={AppLinkTheme.PRIMARY}
+                to={item.path}
+            >
+                <Image
+                    priority
+                    loading="eager"
+                    alt={item.name || ''}
+                    src={item.src || ''}
+                    width={109}
+                    height={92}
+                    style={{ objectFit: 'contain' }}
+                />
+            </AppLink>
+        );
+    }
+
+    return null;
+});
+
+NavItem.displayName = 'NavItemV3';
+
+export default NavItem;