add color menu

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">
-    <ul class="simple-menu-list">
-        {menu.menuItems.nodes.map(item => (
-            <li class="simple-menu-item" key={item.id}>
-                <a 
-                    href={item.url} 
-                    class="simple-menu-link"
-                    target={item.target || '_self'}
-                >
-                    {item.label}
-                </a>
-            </li>
-        ))}
-    </ul>
+<nav class="primary-nav" aria-label="Main navigation">
+    <div class="primary-nav__content">
+        <button class="primary-nav__burger" aria-label="Toggle menu"></button>
+        <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={`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>