diff --git a/src/components/Header/DesktopNav.tsx b/src/components/Header/DesktopNav.tsx index 84005e5..761b5a5 100644 --- a/src/components/Header/DesktopNav.tsx +++ b/src/components/Header/DesktopNav.tsx @@ -4,9 +4,9 @@ import { ROUTING } from "@/core/config/routing.config"; import Link from "next/link"; import { BrowserView } from "react-device-detect"; import styles from './Header.module.scss'; +import cn from 'classnames' - -export const DesktopNav = ({serviceLinks}:{serviceLinks: MenuLink[]}) => { +export const DesktopNav = ({ serviceLinks }: { serviceLinks: MenuLink[] }) => { return ( @@ -17,7 +17,7 @@ export const DesktopNav = ({serviceLinks}:{serviceLinks: MenuLink[]}) => { Главная - {serviceLinks.concat(ROUTING.menuLinks).map(({ id, href: mainHref, name, sublist }) => + {serviceLinks.map(({ id, href: mainHref, name, sublist }) =>
  • {name} { @@ -33,6 +33,26 @@ export const DesktopNav = ({serviceLinks}:{serviceLinks: MenuLink[]}) => { }
  • )} + + {ROUTING.menuLinks.map(({ id, href: mainHref, name, sublist }) => +
  • + {name} + { + sublist && + + } +
  • )} +
  • + Акции +
  • diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index 4f71bf3..ccb2d69 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -1,3 +1,71 @@ +.navDesktopListItem.specialLink{ + font-weight: bold; + text-transform: uppercase; + padding-left: 10px; + padding-right: 10px; + transition: background 0.5s ease-in-out; + transition: scale 0.2s ease-in-out; + &:hover{ + scale: 0.90; + a{ + animation: none; + + + background: red !important; + color: white !important; + } + } + + a{ + transition: color 0.5s ease-in-out, background 0.5s ease-in-out; + animation: none; + animation-duration: 2s; + animation-name: redblink; + animation-iteration-count: infinite; + color: inherit; + display: block; + padding: 13px; + border-radius: 10px; + } +} + +@keyframes redblink{ + 0%{ + background: red; + + color: white; + } + 50%{ + background: rgb(255, 255, 255); + + color: black; + + } + 100%{ + background: red; + + color: white; + + } +} + +.specialLinkMobile{ + padding-left: 0 !important; + a{ + padding-left: 15px !important; + + animation-duration: 2s; + animation-name: redblink; + animation-iteration-count: infinite; + + background-color: red; + + font-weight: bold; + text-transform: uppercase; + } +} + + .main { width: 100%; position: fixed; @@ -259,7 +327,6 @@ top: 0; left: -110%; width: 100%; - padding: 0 0 0 15px; height: 100vh; hr { @@ -279,7 +346,7 @@ position: absolute; top: 0; width: 100%; - padding: 0 0 0 15px; + height: 100vh; z-index: 900; max-width: 266px; @@ -350,6 +417,7 @@ .navMobileListItem { width: 100%; + padding-left: 15px; & a, button { diff --git a/src/components/Header/MobileNav.tsx b/src/components/Header/MobileNav.tsx index afb5d08..1a7c0db 100644 --- a/src/components/Header/MobileNav.tsx +++ b/src/components/Header/MobileNav.tsx @@ -98,6 +98,8 @@ export const MobileNav = ({ serviceLinks }: { serviceLinks: MenuLink[] }) => { )} + + ) } @@ -143,6 +145,10 @@ export const MobileNav = ({ serviceLinks }: { serviceLinks: MenuLink[] }) => { })} +
  • + Акции +
  • + diff --git a/src/core/config/routing.config.ts b/src/core/config/routing.config.ts index b315e3b..2395d91 100644 --- a/src/core/config/routing.config.ts +++ b/src/core/config/routing.config.ts @@ -7,11 +7,6 @@ export const ROUTING: ROUTING = { href: 'portfolio', name: 'Примеры работ' }, - { - id: 6, - href: 'specials', - name: 'АКЦИИ' - }, { id: 7, href: 'contacts',