diff --git a/frontend-next-migration/src/app/[lng]/(helper)/layout.tsx b/frontend-next-migration/src/app/[lng]/(helper)/layout.tsx index eb9567c2f..dfbc8836f 100644 --- a/frontend-next-migration/src/app/[lng]/(helper)/layout.tsx +++ b/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'; diff --git a/frontend-next-migration/src/app/[lng]/(home)/layout.tsx b/frontend-next-migration/src/app/[lng]/(home)/layout.tsx index ce54256ce..237f82161 100644 --- a/frontend-next-migration/src/app/[lng]/(home)/layout.tsx +++ b/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'; diff --git a/frontend-next-migration/src/app/[lng]/(intro)/layout.tsx b/frontend-next-migration/src/app/[lng]/(intro)/layout.tsx index c1525286c..124b7ae93 100644 --- a/frontend-next-migration/src/app/[lng]/(intro)/layout.tsx +++ b/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; diff --git a/frontend-next-migration/src/shared/assets/icons/profileIcon.svg b/frontend-next-migration/src/shared/assets/icons/profileIcon.svg index a15d67c1e..64b7bc285 100644 --- a/frontend-next-migration/src/shared/assets/icons/profileIcon.svg +++ b/frontend-next-migration/src/shared/assets/icons/profileIcon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend-next-migration/src/shared/assets/icons/profileiconV3.png b/frontend-next-migration/src/shared/assets/icons/profileiconV3.png new file mode 100644 index 000000000..3a636adf0 Binary files /dev/null and b/frontend-next-migration/src/shared/assets/icons/profileiconV3.png differ diff --git a/frontend-next-migration/src/shared/assets/images/altLogo.png b/frontend-next-migration/src/shared/assets/images/altLogo.png index 388432320..3a636adf0 100644 Binary files a/frontend-next-migration/src/shared/assets/images/altLogo.png and b/frontend-next-migration/src/shared/assets/images/altLogo.png differ diff --git a/frontend-next-migration/src/shared/assets/images/altLogoOld.png b/frontend-next-migration/src/shared/assets/images/altLogoOld.png new file mode 100644 index 000000000..388432320 Binary files /dev/null and b/frontend-next-migration/src/shared/assets/images/altLogoOld.png differ diff --git a/frontend-next-migration/src/shared/i18n/locales/en/navbar.json b/frontend-next-migration/src/shared/i18n/locales/en/navbar.json index 1f5674411..0893727d4 100644 --- a/frontend-next-migration/src/shared/i18n/locales/en/navbar.json +++ b/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" } diff --git a/frontend-next-migration/src/shared/i18n/locales/fi/navbar.json b/frontend-next-migration/src/shared/i18n/locales/fi/navbar.json index 8de28b72a..8f22ccba6 100644 --- a/frontend-next-migration/src/shared/i18n/locales/fi/navbar.json +++ b/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ä" } diff --git a/frontend-next-migration/src/shared/ui/DropdownWrapper/ui/DropdownWrapper.module.scss b/frontend-next-migration/src/shared/ui/DropdownWrapper/ui/DropdownWrapper.module.scss index d65f2ace2..2cccd14f3 100644 --- a/frontend-next-migration/src/shared/ui/DropdownWrapper/ui/DropdownWrapper.module.scss +++ b/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; } diff --git a/frontend-next-migration/src/widgets/NavbarV3/index.ts b/frontend-next-migration/src/widgets/NavbarV3/index.ts new file mode 100644 index 000000000..fb26b4a9b --- /dev/null +++ b/frontend-next-migration/src/widgets/NavbarV3/index.ts @@ -0,0 +1 @@ +export { NavbarMain as Navbar } from './ui/NavbarMain/NavbarMain'; diff --git a/frontend-next-migration/src/widgets/NavbarV3/model/data/NavbarBuilder.ts b/frontend-next-migration/src/widgets/NavbarV3/model/data/NavbarBuilder.ts new file mode 100644 index 000000000..42da30870 --- /dev/null +++ b/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 }; + } +} diff --git a/frontend-next-migration/src/widgets/NavbarV3/model/data/navbarMenuDesktop.ts b/frontend-next-migration/src/widgets/NavbarV3/model/data/navbarMenuDesktop.ts new file mode 100644 index 000000000..0613c7300 --- /dev/null +++ b/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(); diff --git a/frontend-next-migration/src/widgets/NavbarV3/model/data/navbarMenuMobile.ts b/frontend-next-migration/src/widgets/NavbarV3/model/data/navbarMenuMobile.ts new file mode 100644 index 000000000..c4ee55c2a --- /dev/null +++ b/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(); diff --git a/frontend-next-migration/src/widgets/NavbarV3/model/getNavbarBuildBySize.ts b/frontend-next-migration/src/widgets/NavbarV3/model/getNavbarBuildBySize.ts new file mode 100644 index 000000000..7e909ef8c --- /dev/null +++ b/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; +}; diff --git a/frontend-next-migration/src/widgets/NavbarV3/model/types/index.ts b/frontend-next-migration/src/widgets/NavbarV3/model/types/index.ts new file mode 100644 index 000000000..0fc876aee --- /dev/null +++ b/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; +}; diff --git a/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarDesktopV3/NavItem.tsx b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarDesktopV3/NavItem.tsx new file mode 100644 index 000000000..2ca80e6d3 --- /dev/null +++ b/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 ( +
  • + + {t(`${item.name}`)} + {showChevron && ( + + )} + +
    • + ); + } + + if (itemType === 'navLogo') { + return ( + + {item.name + + ); + } + + return null; +}); + +NavItem.displayName = 'NavItemV3'; + +export default NavItem; diff --git a/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarDesktopV3/NavbarDesktop.module.scss b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarDesktopV3/NavbarDesktop.module.scss new file mode 100644 index 000000000..5f8135525 --- /dev/null +++ b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarDesktopV3/NavbarDesktop.module.scss @@ -0,0 +1,203 @@ +.navbar { + position: absolute; + top: 0; + left: -1px; + width: 100%; + height: 110px; + background: #1e3544; + border-bottom: 2px solid #121212; + z-index: var(--navbar-z-index); + user-select: none; + overflow-y: visible; + + &.collapsed { + overflow: hidden; + } +} + +.inner { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + padding: 0 0 0 32px; + gap: 20px; + width: 100%; + height: 110px; + transition: width 0.3s ease; + + &.collapsed { + width: 50px; + overflow: hidden; + } +} + +.logoSlot { + position: relative; + flex: none; + width: 90px; + height: 92px; + transition: opacity 0.3s ease, transform 0.3s ease; + + &.collapsed { + opacity: 0; + transform: scaleX(0); + pointer-events: none; + } + + a { + display: block; + position: absolute; + width: 109px; + height: 92px; + left: calc(50% - 109px / 2 - 1px); + top: calc(50% - 92px / 2); + } + + img { + width: 109px; + height: 92px; + object-fit: contain; + } +} + +.navLinks { + display: flex; + flex-direction: row; + align-items: center; + padding: 0; + gap: 0; + flex: 1; + height: 60px; + list-style: none; + margin: 0; + justify-content: flex-start; + + a, + .col { + font-family: 'DM Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 31px; + color: #faf9f6; + text-decoration: none; + white-space: nowrap; + } + + li { + display: flex; + flex-direction: row; + align-items: center; + padding: 0 24px; + gap: 10px; + height: 60px; + border-radius: 12px; + flex: none; + position: relative; + cursor: pointer; + transition: background 0.15s ease; + width: fit-content; + + &:hover { + background: rgba(255, 255, 255, 0.06); + } + } +} + +.col { + font-family: 'DM Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 31px; + color: #faf9f6; + text-decoration: none; + white-space: nowrap; +} + +.chevron { + margin-left: 6px; + font-size: 18px; + color: #faf9f6; +} + +.actions { + display: flex; + flex-direction: row; + align-items: center; + gap: 30px; + width: 250px; + height: 38px; + flex: none; + margin-left: auto; + transition: opacity 0.3s ease, transform 0.3s ease; + + &.collapsed { + opacity: 0; + transform: translateX(20px); + pointer-events: none; + } +} + +.iconBtn { + display: flex; + justify-content: center; + align-items: center; + padding: 4px; + width: 48px; + height: 38px; + background: none; + border: none; + cursor: pointer; + border-radius: 8px; + transition: background 0.15s ease; + + &:hover { + background: rgba(255, 255, 255, 0.08); + } + + img { + width: 30px; + height: 30px; + filter: brightness(0) invert(1); + } +} + +.authWrapper { + position: relative; + display: flex; + align-items: center; +} + +.authContainer { + position: relative; + display: flex; + align-items: center; +} + +.authTrigger { + cursor: pointer; +} + +.langSwitcher { + display: flex; + align-items: center; + gap: 8px; + + img { + width: 30px; + height: 30px; + filter: brightness(0) invert(1); + } + + span, + p { + font-family: 'DM Sans', sans-serif; + font-weight: 400; + font-size: 24px; + line-height: 31px; + letter-spacing: -0.04em; + color: #faf9f6; + } +} diff --git a/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarDesktopV3/NavbarDesktop.tsx b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarDesktopV3/NavbarDesktop.tsx new file mode 100644 index 000000000..f276fa431 --- /dev/null +++ b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarDesktopV3/NavbarDesktop.tsx @@ -0,0 +1,104 @@ +'use client'; +import { CSSProperties, memo } from 'react'; +import Image from 'next/image'; +import { classNames } from '@/shared/lib/classNames/classNames'; +import { NavbarBuild } from '../../model/types'; +import cls from './NavbarDesktop.module.scss'; +import NavItem from './NavItem'; +import profileIcon from '@/shared/assets/icons/profileIcon.svg'; +import searchIcon from '@/shared/assets/icons/search.png'; +import languageIcon from '@/shared/assets/icons/langIcon.svg'; + +export interface NavbarProps { + /** Space above the navbar in pixels */ + marginTop?: number; + /** Extra classes if you need to tweak the styling */ + className?: string; + /** The menu items and logo that show up in the navbar */ + navbarBuild: NavbarBuild; + /** When true the navbar shrinks down to a narrow collapsed state */ + isCollapsed?: boolean; +} + +/** + * The main nav bar for desktop users. + * + * Shows the logo, nav links, search, profile icon and language picker. + * None of the buttons do anything yet — the functionality comes later. + */ +const NavbarDesktop = memo((props: NavbarProps) => { + const { navbarBuild, marginTop, className = '', isCollapsed = false } = props; + + const style = marginTop ? ({ marginTop: `${marginTop}px` } as CSSProperties) : {}; + + return ( + + ); +}); + +NavbarDesktop.displayName = 'NavbarDesktopV3'; + +export default NavbarDesktop; diff --git a/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarMain/NavbarMain.tsx b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarMain/NavbarMain.tsx new file mode 100644 index 000000000..86144dd4f --- /dev/null +++ b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarMain/NavbarMain.tsx @@ -0,0 +1,38 @@ +'use client'; +import { memo, useMemo } from 'react'; +import useSizes from '@/shared/lib/hooks/useSizes'; +import { getNavbarBuildBySize } from '../../model/getNavbarBuildBySize'; +import NavbarDesktop from '../NavbarDesktopV3/NavbarDesktop'; +import NavbarMobile from '../NavbarMobileV3/NavbarMobile'; + +interface NavbarMainProps { + marginTop?: number; + className?: string; +} + +export const NavbarMain = memo((props: NavbarMainProps) => { + const { marginTop, className } = props; + + const { isMobileSize, isTabletSize } = useSizes(); + const isTouchSize = isMobileSize || isTabletSize; + + const size = useMemo(() => (isTouchSize ? 'mobile' : 'desktop'), [isTouchSize]); + + const navbarBuild = useMemo(() => getNavbarBuildBySize(size), [size]); + + return isTouchSize ? ( + + ) : ( + + ); +}); + +NavbarMain.displayName = 'NavbarMain'; diff --git a/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarMobileV3/NavbarMobile.module.scss b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarMobileV3/NavbarMobile.module.scss new file mode 100644 index 000000000..fd54dca04 --- /dev/null +++ b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarMobileV3/NavbarMobile.module.scss @@ -0,0 +1,73 @@ +.Navbar { + position: absolute; + font: var(--font-dm-bold-l); + background-color: var(--base-card-background); + border-radius: 0px; + width: 100%; + height: 66px; + left: 0px; + top: 0px; +} + +.NavbarContent { + display: flex; + height: 66px; + align-items: center; + justify-content: space-between; +} + +.NavbarDropdown { + display: flex; + justify-content: center; + transform: scaleY(0); + transform-origin: top; + max-height: 0; + transition: transform 0.3s ease, max-height 0.3s ease; +} + +.openDropdown { + padding: 10px; + transform: scaleY(1); + max-height: 450px; +} + +.HamurgerBtn { + position: absolute; + margin-right: 15px; + right: 0; +} + +.NavbarMobile__center { + margin-left: auto !important; + margin-right: auto !important; +} + +.navLogo { + height: 100%; + + img { + height: 100%; + width: auto; + } +} + +.buttonContainer { + display: flex; + margin-right: 15px; + text-align: center; + position: absolute; + justify-content: flex-end; + align-items: center; + flex-direction: row; + left: 15px; + width: fit-content; + gap: 5px; +} + +.navItem { + opacity: 1; + transform: translateX(0) scaleX(1); + transform-origin: right; + transition: transform 0.3s ease-out, opacity 0.3s ease-out; + visibility: visible; +} diff --git a/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarMobileV3/NavbarMobile.tsx b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarMobileV3/NavbarMobile.tsx new file mode 100644 index 000000000..5db655bc9 --- /dev/null +++ b/frontend-next-migration/src/widgets/NavbarV3/ui/NavbarMobileV3/NavbarMobile.tsx @@ -0,0 +1,102 @@ +'use client'; +import Image from 'next/image'; +import { CSSProperties, memo, useMemo, useState } from 'react'; +import { useClientTranslation } from '@/shared/i18n'; +import { classNames } from '@/shared/lib/classNames/classNames'; +import { AppLink, AppLinkTheme } from '@/shared/ui/AppLink/AppLink'; +import { NavMenu, INavMenuItem, NavMenuItemType } from '@/shared/ui/NavMenu'; +import { ItemType, NavbarBuild } from '../../model/types'; +import cls from './NavbarMobile.module.scss'; +import profileIcon from '@/shared/assets/icons/profileIcon.svg'; +import hamburgerIcon from '@/shared/assets/icons/hamburgerIcon.svg'; +import closeIcon from '@/shared/assets/icons/closeIcon.svg'; + +export interface NavbarTouchProps { + marginTop?: number; + navbarBuild?: NavbarBuild; + className?: string; +} + +const NavbarTouchComponent = (props: NavbarTouchProps) => { + const { marginTop, navbarBuild, className = '' } = props; + const { t } = useClientTranslation('navbar'); + + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const style: CSSProperties = marginTop ? { marginTop: `${marginTop}px` } : {}; + + const navManuItemsList: INavMenuItem[] = useMemo(() => { + return (navbarBuild?.menu || []) + .filter((item) => item.type === ItemType.navLink) + .map((item) => ({ + path: item.path, + name: t(`${item.name}`), + type: NavMenuItemType.Link, + active: false, + })); + }, [t, navbarBuild?.menu]); + + return ( + + ); +}; + +NavbarTouchComponent.displayName = 'NavbarTouch'; + +export default memo(NavbarTouchComponent);