add color category

src/components/ContentGrid.astro

@@ -8,8 +8,48 @@ const {
   items = [],
   showCount =  false,
 } = Astro.props;
+
+// Функция для извлечения класса цвета из строки
+function extractColorClass(colorString: string): string {
+  if (!colorString) return 'bg-blue';
+  
+  // Если строка содержит "фон меню:" - извлекаем часть после двоеточия
+  if (colorString.includes('фон меню:')) {
+    const parts = colorString.split(':');
+    const color = parts[1]?.trim();
+    
+    // Проверяем существование CSS класса
+    const validColors = [
+      'black', 'yellow', 'blue', 'green', 'red', 'orange', 'gray',
+      'indigo', 'purple', 'pink', 'teal', 'cyan', 'white',
+      'gray-dark', 'light', 'dark'
+    ];
+    
+    if (color && validColors.includes(color)) {
+      return `bg-${color}`;
+    }
+  }
+  
+  // Если строка уже содержит "bg-"
+  if (colorString.startsWith('bg-')) {
+    return colorString;
+  }
+  
+  // Если это просто название цвета без префикса
+  const simpleColor = colorString.toLowerCase();
+  switch(simpleColor) {
+    case 'black': case 'yellow': case 'blue': case 'green': 
+    case 'red': case 'orange': case 'gray': case 'indigo':
+    case 'purple': case 'pink': case 'teal': case 'cyan':
+    case 'white': case 'dark': case 'light':
+      return `bg-${simpleColor}`;
+    case 'gray-dark': return 'bg-gray-dark';
+    default: return 'bg-blue';
+  }
+}
 ---
 
+
 <section class="posts-section" id="posts-section">
   <h2>
     {showCount && items.length > 0 && (
@@ -22,6 +62,10 @@ const {
       const postUrl = item.uri || `/blog/${item.databaseId}`;
       const postDate = new Date(item.date);
 
+      // Получаем цвет категории и преобразуем в CSS класс
+      const rawColor = item.categories?.nodes?.[0]?.color || '';
+      const categoryBgClass = extractColorClass(rawColor);
+      
       // Логика для больших плиток на десктопе
       let isLarge = false;
       let largePosition = '';
@@ -62,9 +106,9 @@ const {
                 <div class="post-image-placeholder"></div>
               )}
               
-              {/* Рубрика в верхнем правом углу */}
+              {/* Рубрика в верхнем правом углу с цветом */}
               {item.categories?.nodes?.[0]?.name && (
-                <div class="post-category-badge">
+                <div class={`post-category-badge ${categoryBgClass}`}>
                   {item.categories.nodes[0].name}
                 </div>
               )}

src/components/MainMenu.astro

@@ -1,5 +1,6 @@
 ---
 import { fetchMenu } from '@api/menu';
+import BurgerMenu from '@components/BurgerMenu.astro';
 
 interface Props {
     menuId: number;
@@ -13,15 +14,6 @@ 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="primary-nav" aria-label="Main navigation">
@@ -29,7 +21,7 @@ const gradientStops = menu.menuItems.nodes.map((item, index) => {
         <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}` : '';
+                const colorClass = item.menuItemColor ? `color-${item.menuItemColor}` : 'color-black';
                 return (
                     <li class="primary-nav__item" key={item.id}>
                         <a 
@@ -46,36 +38,27 @@ const gradientStops = menu.menuItems.nodes.map((item, index) => {
     </div>
 </nav>
 
+<BurgerMenu colorMenuId={103246} standardMenuId={103247} submenuId={3341} />
+
 <style>
     .primary-nav {
         margin: 12px 0;
         position: relative;
+        border-top: 1px solid black;
         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;
+        align-items: stretch;
         position: relative;
-        z-index: 1;
+        min-height: 48px;
     }
 
     .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;
@@ -97,51 +80,35 @@ const gradientStops = menu.menuItems.nodes.map((item, index) => {
         text-transform: uppercase;
         gap: 0;
         margin: 0;
+        padding: 0;
         list-style: none;
-        align-items: center;
+        align-items: stretch;
     }
 
     .primary-nav__item {
         flex: 0 0 auto;
         position: relative;
-        height: 100%;
+        display: flex;
     }
 
     .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;
+        border-top: 1px solid currentColor;
+        transition: padding-top 0.2s ease, border-top-width 0.2s ease;
     }
 
     .primary-nav__link:hover {
-        border-top-color: currentColor;
+        border-top-width: 4px;
+        padding-top: 3px;
     }
 
-    /* Десктоп */
     @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/posts.ts

@@ -59,6 +59,7 @@ export async function getLatestPosts(first = 12, after = null) {
                   nodes {
                       id
                       name
+                      color
                       slug
                       uri
                       databaseId