add color menu
This commit is contained in:
Profile Profile
@@ -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 = [];
|
||||
|
||||
---
|
||||
|
||||
@@ -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}>
|
||||
<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="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>
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
37
src/styles/components/theme-colors.css
Normal file
37
src/styles/components/theme-colors.css
Normal file
@@ -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; }
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user