astro_avtourist/frontend/src/layouts/Layout.astro
2026-04-17 18:27:15 +05:00

89 lines
2.4 KiB
Text

---
import "@styles/global.css";
import { SITE_TITLE_SUFFIX } from "@constants";
import Header from "@components/layout/header/Header.astro";
import Footer from "@components/layout/footer/Footer.astro";
import Breadcrumbs from "@components/base/Breadcrumbs.astro";
import ConsultationModal from "@components/base/ConsultationModal.astro";
import Toast from "@components/base/Toast.astro";
export interface Props {
title: string;
description: string;
canonicalLink?: string;
breadcrumbs?: Array<{ label: string; href?: string }>;
}
const { title, description, canonicalLink, breadcrumbs } = Astro.props;
---
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
<link rel="icon" href="/favicons/favicon.ico" />
<title>{title} {SITE_TITLE_SUFFIX}</title>
<meta name="description" content={description} />
{canonicalLink && <link rel="canonical" href={canonicalLink} />}
<link rel="sitemap" href="/sitemap-index.xml" />
<!-- Yandex верификация -->
<meta name="yandex-verification" content="be3edfd138348e43" />
</head>
<body>
<Toast />
<Header />
<main class="main-content">
{breadcrumbs && breadcrumbs.length > 0 && (
<div class="breadcrumbs-wrapper">
<Breadcrumbs items={breadcrumbs} />
</div>
)}
<slot />
</main>
<Footer />
<ConsultationModal />
</body>
</html>
<style>
.main-content {
padding-top: 0;
}
.breadcrumbs-wrapper {
padding-top: 4.5rem;
background: #f8fafc;
border-bottom: 1px solid rgba(30, 48, 80, 0.05);
}
</style>
<script>
// Клиентский скрипт для открытия модального окна
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("consultation-btn");
btn?.addEventListener("click", () => {
window.dispatchEvent(
new CustomEvent("open-modal", {
detail: "consultation-modal",
}),
);
});
});
// Для Astro View Transitions
document.addEventListener("astro:page-load", () => {
const btn = document.getElementById("consultation-btn");
btn?.addEventListener("click", () => {
window.dispatchEvent(
new CustomEvent("open-modal", {
detail: "consultation-modal",
}),
);
});
});
</script>