add color category

2026-01-25 21:13:05 +03:00
parent 72ea28179f
commit c01845bb39
3 changed files with 63 additions and 51 deletions
--- a/src/components/ContentGrid.astro
+++ b/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 && (
@@ -21,6 +61,10 @@ const {
    {items.map((item, index) => {
      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;
@@ -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>
              )}
--- a/src/components/MainMenu.astro
+++ b/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-bottom: 1px solid black; 
+        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>
+</style>
--- a/src/lib/api/posts.ts
+++ b/src/lib/api/posts.ts
@@ -59,6 +59,7 @@ export async function getLatestPosts(first = 12, after = null) {
                  nodes {
                      id
                      name
+                      color
                      slug
                      uri
                      databaseId