add color menu

src/components/Header/Header.astro

@@ -3,7 +3,7 @@
     import Stores from './LazyStores.astro';
     import MainMenu from '@components/MainMenu.astro';
 
-    const MENU_ID = 103245;
+    const MENU_ID = 3340; // 103246 (бургер 1).  103247 (бургер 2 )
     let menuItems = [];
 
 ---

src/components/MainMenu.astro

@@ -13,21 +13,135 @@ const menu = await fetchMenu({ id: menuId });
 if (!menu) {
     return;
 }
+
+// Создаем градиент для верхней линии
+const totalItems = menu.menuItems.nodes.length;
+const gradientStops = menu.menuItems.nodes.map((item, index) => {
+    const colorClass = item.menuItemColor || 'black';
+    const startPercent = (index / totalItems) * 100;
+    const endPercent = ((index + 1) / totalItems) * 100;
+    return `var(--color-${colorClass}) ${startPercent}%, var(--color-${colorClass}) ${endPercent}%`;
+}).join(', ');
 ---
 
-<nav class="simple-menu">
+<nav class="primary-nav" aria-label="Main navigation">
-    <ul class="simple-menu-list">
+    <div class="primary-nav__content">
-        {menu.menuItems.nodes.map(item => (
+        <button class="primary-nav__burger" aria-label="Toggle menu"></button>
-            <li class="simple-menu-item" key={item.id}>
+        <ul class="primary-nav__list">
+            {menu.menuItems.nodes.map(item => {
+                const colorClass = item.menuItemColor ? `color-${item.menuItemColor}` : '';
+                return (
+                    <li class="primary-nav__item" key={item.id}>
                         <a 
                             href={item.url} 
-                    class="simple-menu-link"
+                            class={`primary-nav__link ${colorClass}`}
                             target={item.target || '_self'}
                         >
                             {item.label}
                         </a>
                     </li>
-        ))}
+                );
+            })}
         </ul>
+    </div>
 </nav>
 
+<style>
+    .primary-nav {
+        margin: 12px 0;
+        position: relative;
+        border-bottom: 1px solid black; 
+    }
+
+    .primary-nav::before,
+    .primary-nav::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background-color: #000;
+    }
+
+
+    .primary-nav__content {
+        display: flex;
+        align-items: center;
+        position: relative;
+        z-index: 1;
+    }
+
+    .primary-nav__burger {
+        width: 60px;
+        height: 48px;
+        border-right: 1px solid silver;
+        margin: .4rem 0;
+        cursor: pointer;
+        flex-shrink: 0;
+        transition: opacity 0.2s ease;
+        background-image: url('data:image/svg+xml;utf8,<svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H23V2H0V0Z" fill="%23000000"/><path d="M0 7H23V9H0V7Z" fill="%23000000"/><path d="M0 14H23V16H0V14Z" fill="%23000000"/></svg>');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 23px 16px;
+    }
+
+    .primary-nav__burger:hover {
+        opacity: 0.7;
+    }
+
+    .primary-nav__list {
+        display: none;
+        flex: 1;
+        font-size: .875rem;
+        font-weight: bold;
+        text-transform: uppercase;
+        gap: 0;
+        margin: 0;
+        list-style: none;
+        align-items: center;
+    }
+
+    .primary-nav__item {
+        flex: 0 0 auto;
+        position: relative;
+        height: 100%;
+    }
+
+    .primary-nav__link {
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 0 1rem;
+        transition: border-top 0.2s ease;
+        border-top: 3px solid transparent;
+        position: relative;
+    }
+
+    .primary-nav__link:hover {
+        border-top-color: currentColor;
+    }
+
+    /* Десктоп */
+    @media (min-width: 768px) {
+        .primary-nav__list {
+            display: flex;
+        }
+        
+        .primary-nav__link::before {
+            content: '';
+            position: absolute;
+            top: -3px; /* Выровнено с верхней границей навигации */
+            left: 0;
+            right: 0;
+            height: 3px;
+            background-color: inherit;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+        
+        .primary-nav__link:hover::before {
+            opacity: 1;
+        }
+    }
+</style>

src/lib/api/menu.ts

@@ -13,6 +13,7 @@ export interface MenuItem {
     target: string;
     cssClasses: string[];
     description: string;
+    menuItemColor?: string | null;
     childItems?: {
         nodes: MenuItem[];
     };
@@ -85,6 +86,7 @@ async function fetchMenuById(id: number): Promise<Menu | null> {
                         target
                         cssClasses
                         description
+                        menuItemColor
                         childItems(first: 50) {
                             nodes {
                                 id
@@ -93,6 +95,7 @@ async function fetchMenuById(id: number): Promise<Menu | null> {
                                 uri
                                 url
                                 order
+                                menuItemColor
                             }
                         }
                     }
@@ -139,6 +142,7 @@ async function fetchMenuByLocation(location: string): Promise<Menu | null> {
                             target
                             cssClasses
                             description
+                            menuItemColor
                             childItems(first: 50) {
                                 nodes {
                                     id
@@ -147,6 +151,7 @@ async function fetchMenuByLocation(location: string): Promise<Menu | null> {
                                     uri
                                     url
                                     order
+                                    menuItemColor
                                 }
                             }
                         }
@@ -186,6 +191,7 @@ async function fetchMenuBySlug(slug: string): Promise<Menu | null> {
                             target
                             cssClasses
                             description
+                            menuItemColor
                         }
                     }
                 }
@@ -223,6 +229,7 @@ async function fetchMenuByName(name: string): Promise<Menu | null> {
                             target
                             cssClasses
                             description
+                            menuItemColor
                         }
                     }
                 }

src/styles/components/theme-colors.css

@@ -0,0 +1,37 @@
+/* styles/colors.css */
+
+/* Классы для цвета текста */
+.color-black { color: #000000; }
+.color-yellow { color: #ffc107; }
+.color-blue { color: #2196f3; }
+.color-green { color: #4caf50; }
+.color-red { color: #f44336; }
+.color-orange { color: #ff9800; }
+.color-gray { color: #9e9e9e; }
+.color-indigo { color: #3f51b5; }
+.color-purple { color: #9c27b0; }
+.color-pink { color: #e91e63; }
+.color-teal { color: #009688; }
+.color-cyan { color: #00bcd4; }
+.color-white { color: #ffffff; }
+.color-gray-dark { color: #424242; }
+.color-light { color: #f5f5f5; }
+.color-dark { color: #212121; }
+
+/* Классы для фонов */
+.bg-black { background-color: #000000; }
+.bg-yellow { background-color: #ffc107; }
+.bg-blue { background-color: #2196f3; }
+.bg-green { background-color: #4caf50; }
+.bg-red { background-color: #f44336; }
+.bg-orange { background-color: #ff9800; }
+.bg-gray { background-color: #9e9e9e; }
+.bg-indigo { background-color: #3f51b5; }
+.bg-purple { background-color: #9c27b0; }
+.bg-pink { background-color: #e91e63; }
+.bg-teal { background-color: #009688; }
+.bg-cyan { background-color: #00bcd4; }
+.bg-white { background-color: #ffffff; }
+.bg-gray-dark { background-color: #424242; }
+.bg-light { background-color: #f5f5f5; }
+.bg-dark { background-color: #212121; }

src/styles/global.css

@@ -1,5 +1,8 @@
 @import './reset.css';
 @import './components/ContentGrid.css';
+@import './components/theme-colors.css';
+
+
 
 html{
     font-family: Roboto,sans-serif;
@@ -11,6 +14,14 @@ body {
 	font-size: 18px;
 }
 
+a {
+    text-decoration: none; 
+}
+
+    a:hover {
+    text-decoration: none; 
+    }
+
 .container{
     margin: 0 auto;
     width: 1200px;