Fix Header

seelentov · Jul 19, 2024 · 15027c2 · 15027c2
1 parent 1082dc9
commit 15027c2
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 10 deletions.
diff --git 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 (
     <BrowserView>
@@ -17,7 +17,7 @@ export const DesktopNav = ({serviceLinks}:{serviceLinks: MenuLink[]}) => {
             <a href="/">Главная</a>
           </li>
 
-          {serviceLinks.concat(ROUTING.menuLinks).map(({ id, href: mainHref, name, sublist }) =>
+          {serviceLinks.map(({ id, href: mainHref, name, sublist }) =>
             <li key={id} className={styles.navDesktopListItem}>
               <Link href={`/${mainHref}`}>{name}</Link>
               {
@@ -33,6 +33,26 @@ export const DesktopNav = ({serviceLinks}:{serviceLinks: MenuLink[]}) => {
                 </ul>
               }
             </li>)}
+
+          {ROUTING.menuLinks.map(({ id, href: mainHref, name, sublist }) =>
+            <li key={id} className={styles.navDesktopListItem}>
+              <Link href={`/${mainHref}`}>{name}</Link>
+              {
+                sublist &&
+                <ul className={styles.navDesktopSubList}>
+                  {
+                    sublist?.map(({ id, href, name }) =>
+                      <li className={styles.navDesktopSubListItem} key={id}>
+                        <Link href={`/${href}`}>{name}</Link>
+                      </li>
+                    )
+                  }
+                </ul>
+              }
+            </li>)}
+            <li className={cn(styles.navDesktopListItem, styles.specialLink)}>
+            <Link href="/specials">Акции</Link>
+          </li>
         </ul>
       </nav>
     </BrowserView>

diff --git 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
@@ -98,6 +98,8 @@ export const MobileNav = ({ serviceLinks }: { serviceLinks: MenuLink[] }) => {
             </li>
           )}
         </ul>
+
+
       </div>
     )
   }
@@ -143,6 +145,10 @@ export const MobileNav = ({ serviceLinks }: { serviceLinks: MenuLink[] }) => {
                 </button>
               </li>
             })}
+                    <li className={cn(styles.navMobileListItem, styles.specialLinkMobile)}>
+            <Link href="/specials">Акции</Link>
+          </li>
+
           </ul>
         </div>
         <MobileNavSub />

diff --git 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',
-Original file line number
+Diff line change
@@ Expand Up @@
                 </li>
               )}
             </ul>
           </div>
         )
       }
@@ Expand Down Expand Up @@
                     </button>
                   </li>
                 })}
+                        <li className={cn(styles.navMobileListItem, styles.specialLinkMobile)}>
+                <Link href="/specials">Акции</Link>
+              </li>
               </ul>
             </div>
             <MobileNavSub />
@@ Expand Down @@