<?php
if (!isset($pageTitle)) {
$pageTitle = 'Seven O\'Clock Dinner';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></title>
<link rel="stylesheet" href="<?= url('css/app.css') ?>">
</head>
<body>
<div class="page-shell">
<header class="site-header">
<a href="<?= url('/') ?>" class="brand-link" style="color: inherit; text-decoration: none;">
<div>
<div class="brand-mark">A Comminity of GDS Enjoyers</div>
<div class="brand-title">Seven O'Clock Dinner</div>
</div>
</a>
<nav class="site-nav">
<button type="button" class="site-nav-toggle" aria-label="Toggle navigation">
<span class="site-nav-toggle-bar"></span>
</button>
<div class="site-nav-panel">
<div class="site-nav-primary">
<a href="<?= url('schedule') ?>">RSVP</a>
<a href="<?= url('members') ?>">Members</a>
<?php if (isLoggedIn()): ?>
<a href="<?= url('upload') ?>">Upload</a>
<a href="<?= url('profile') ?>">Profile</a>
<?php endif; ?>
<?php if (isAdmin()): ?>
<a href="<?= url('admin') ?>">Admin</a>
<?php endif; ?>
</div>
<div class="site-nav-secondary">
<?php if (!isLoggedIn()): ?>
<div class="nav-dropdown">
<a href="javascript:void(0)" class="pill pill-accent join-dropdown-toggle">
Join the Club
</a>
<div class="nav-dropdown-menu" data-join-dropdown>
<a href="<?= url('signin') ?>">Sign in</a>
<a href="<?= url('register') ?>">Register</a>
<a href="<?= url('contact') ?>">Contact</a>
</div>
</div>
<?php endif; ?>
</div>
</div>
</nav>
</header>
<main>
<script>
(function () {
const joinToggle = document.querySelector('.join-dropdown-toggle');
const joinMenu = document.querySelector('[data-join-dropdown]');
const navToggle = document.querySelector('.site-nav-toggle');
const navPanel = document.querySelector('.site-nav-panel');
if (joinToggle && joinMenu) {
joinToggle.addEventListener('click', function (event) {
event.stopPropagation();
joinMenu.classList.toggle('is-open');
});
document.addEventListener('click', function () {
joinMenu.classList.remove('is-open');
});
}
if (navToggle && navPanel) {
navToggle.addEventListener('click', function () {
navPanel.classList.toggle('is-open');
});
// Close nav when clicking outside or on any link
document.addEventListener('click', function (event) {
if (!navPanel.classList.contains('is-open')) return;
const target = event.target;
if (!navPanel.contains(target) && target !== navToggle) {
navPanel.classList.remove('is-open');
}
});
navPanel.addEventListener('click', function (event) {
const target = event.target;
if (target.tagName === 'A') {
navPanel.classList.remove('is-open');
}
});
}
})();
</script>