ម៉ឺនុយក៏ដូចក្បាលទំព័រដែរ ត្រូវគេយកទៅប្រើប្រាស់ជាមួយគ្រប់ទំព័រទាំងអស់ ដូចនេះយើងចាំបាច់ត្រូវបង្កើតគំរូម៉ឺនុយមួយទុកយកទៅប្រើការជាមួយនឹងគ្រប់ទំព័រទាំងឡាយ។
<!--src/layouts/Menu.astro-->
---
const { pageURL="/" } = Astro.props
---
<div class="bg-teal-500">
<nav class="font-display max-w-5xl mx-auto flex items-center justify-between flex-wrap bg-teal-500 md:p-0 p-6">
<div class="text-white mr-6">
<a href="/"><img class="w-7 hover:opacity-75" src="/images/home.png" /></a>
</div>
<div id="menu-button" class="block md:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div id="menu" class="hidden w-full flex-grow md:flex md:items-center md:w-auto">
<div class="text-base md:flex-grow">
<a href="#responsive-header" class="block md:inline-block text-white hover:opacity-75 p-2">
ព័ត៌មាន
</a>
<a href="#responsive-header" class="block md:inline-block text-white hover:opacity-75 p-2">
សិល្បៈ
</a>
<a href="#responsive-header" class="block md:inline-block text-white hover:opacity-75 p-2">
វប្បធម៌
</a>
<a href="#responsive-header" class="block md:inline-block text-white hover:opacity-75 p-2">
ភាពយន្ត
</a>
<a href="#responsive-header" class="block md:inline-block text-white hover:opacity-75 p-2">
ទំនាក់ទំនង
</a>
<a href="#responsive-header" class="block md:inline-block text-white hover:opacity-75 p-2">
អំពីយើងខ្ញុំ
</a>
</div>
</div>
</nav>
</div>
<script>
const button = document.querySelector('#menu-button')
const menu = document.querySelector('#menu')
button.addEventListener('click', () => {
menu.classList.toggle('hidden')
})
</script>
<!--src/layouts/Base.astro-->
---
const { pageTitle="ទំព័រគ្រឹះ" } = Astro.props
import Header from "./Header.astro"
import Menu from "./Menu.astro"
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
<link rel="icon" href="/images/siteLogo.png" />
<link href="/fonts/setup.css" rel="stylesheet" />
<script is:inline src="/scripts/jquery.js"></script>
</head>
<body class="text-sm leading-normal">
<Header siteTitle="ទស្សនាវដ្តីយើង"/>
<Menu pageURL="/"/>
<slot/>
<p>ជើងទំព័រ</p>
</body>
</html>
