24-2: navigation and footer — implemented, QA Review
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Naser Mansour
+1
-1
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
id: 24-2
|
id: 24-2
|
||||||
title: 24-2 Navigation and Footer
|
title: 24-2 Navigation and Footer
|
||||||
status: Ready for Dev
|
status: QA Review
|
||||||
date: 2026-10-31
|
date: 2026-10-31
|
||||||
parent: 24
|
parent: 24
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
# Manual tests — 24-2 Navigation and Footer
|
||||||
|
|
||||||
|
Automated (passed 2026-10-31, `tests/Feature/Design/PublicNavFooterTest.php`, 7 tests): sticky header markup, five links,
|
||||||
|
aria-current on /about and /posts, language pill target, Dashboard/logout for client and admin, footer four columns with
|
||||||
|
phone/email/legal links and no "Unsplash", all 18 site.* keys in ar and en, `language-toggle`, `navigation.php`, `footer.php`
|
||||||
|
untouched, `x-navigation` used only by the public layout. UI loop (libra.test `/`, 390 and 1440): no horizontal scroll.
|
||||||
|
|
||||||
|
- [ ] `/` at 1440px: nav 72px high, sticks while scrolling, brand + five links + EN pill + Client login + gold Book button; bottom border appears after scrolling a little.
|
||||||
|
- [ ] Hover a link: dashed gold underline slides in. Fail: no underline.
|
||||||
|
- [ ] At 1000px and 390px: links hidden, menu button opens a cream sheet with five links, login and Book; Escape closes it; no sideways scroll.
|
||||||
|
- [ ] Log in as a client: nav shows Dashboard and a working Log out; as admin, Dashboard opens `/admin/dashboard`.
|
||||||
|
- [ ] Click the EN / ع pill: language switches and the pill flips.
|
||||||
|
- [ ] Footer at 1440px: four columns, forest background, gold hairline on top, © year; at 390px one column.
|
||||||
|
- [ ] Known to check by eye: the Book button points to `/#book` and Services to `/#services`; those anchors exist only after 24-4/24-5.
|
||||||
@@ -138,7 +138,7 @@
|
|||||||
| 23 | 23 Fix AdminNotificationService Carbon TypeError Masking Exceptions | Done |
|
| 23 | 23 Fix AdminNotificationService Carbon TypeError Masking Exceptions | Done |
|
||||||
| 24 | 24 Public-Site Redesign (PRD 1.4) | Ready for Dev |
|
| 24 | 24 Public-Site Redesign (PRD 1.4) | Ready for Dev |
|
||||||
| 24-1 | 24-1 Public Design Foundation (Stylesheet, Script, Fonts, Layout) | QA Review |
|
| 24-1 | 24-1 Public Design Foundation (Stylesheet, Script, Fonts, Layout) | QA Review |
|
||||||
| 24-2 | 24-2 Navigation and Footer | Ready for Dev |
|
| 24-2 | 24-2 Navigation and Footer | QA Review |
|
||||||
| 24-3 | 24-3 Signature Balance Component | Ready for Dev |
|
| 24-3 | 24-3 Signature Balance Component | Ready for Dev |
|
||||||
| 24-4 | 24-4 Home Page Sections (Hero to Latest Articles) | Ready for Dev |
|
| 24-4 | 24-4 Home Page Sections (Hero to Latest Articles) | Ready for Dev |
|
||||||
| 24-5 | 24-5 Home Booking Card (Compact Booking and Day Strip) | Ready for Dev |
|
| 24-5 | 24-5 Home Booking Card (Compact Booking and Day Strip) | Ready for Dev |
|
||||||
|
|||||||
@@ -2,4 +2,22 @@
|
|||||||
|
|
||||||
return [
|
return [
|
||||||
'progress_label' => 'تقدّم القراءة',
|
'progress_label' => 'تقدّم القراءة',
|
||||||
|
'brand_name' => 'ليبرا',
|
||||||
|
'brand_sub' => 'للحقوق',
|
||||||
|
'brand_label' => 'ليبرا للحقوق',
|
||||||
|
'nav_main' => 'القائمة الرئيسية',
|
||||||
|
'nav_home' => 'الرئيسية',
|
||||||
|
'nav_about' => 'من نحن',
|
||||||
|
'nav_services' => 'الخدمات',
|
||||||
|
'nav_articles' => 'المقالات',
|
||||||
|
'nav_booking' => 'الحجز',
|
||||||
|
'nav_login' => 'دخول العملاء',
|
||||||
|
'nav_book' => 'احجز استشارة',
|
||||||
|
'nav_menu' => 'القائمة',
|
||||||
|
'lang_switch' => 'English',
|
||||||
|
'footer_explore' => 'تصفّح',
|
||||||
|
'footer_clients' => 'العملاء',
|
||||||
|
'footer_contact' => 'تواصل',
|
||||||
|
'footer_terms' => 'شروط الاستخدام',
|
||||||
|
'footer_privacy' => 'سياسة الخصوصية',
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -2,4 +2,22 @@
|
|||||||
|
|
||||||
return [
|
return [
|
||||||
'progress_label' => 'Reading progress',
|
'progress_label' => 'Reading progress',
|
||||||
|
'brand_name' => 'Libra',
|
||||||
|
'brand_sub' => 'FOR RIGHTS',
|
||||||
|
'brand_label' => 'Libra for Rights',
|
||||||
|
'nav_main' => 'Main',
|
||||||
|
'nav_home' => 'Home',
|
||||||
|
'nav_about' => 'About',
|
||||||
|
'nav_services' => 'Services',
|
||||||
|
'nav_articles' => 'Articles',
|
||||||
|
'nav_booking' => 'Booking',
|
||||||
|
'nav_login' => 'Client login',
|
||||||
|
'nav_book' => 'Book a consultation',
|
||||||
|
'nav_menu' => 'Menu',
|
||||||
|
'lang_switch' => 'العربية',
|
||||||
|
'footer_explore' => 'Explore',
|
||||||
|
'footer_clients' => 'Clients',
|
||||||
|
'footer_contact' => 'Contact',
|
||||||
|
'footer_terms' => 'Terms of use',
|
||||||
|
'footer_privacy' => 'Privacy policy',
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -66,6 +66,62 @@ body.site .sec-head h2{font-size:clamp(2rem,3.4vw,3rem);margin-top:12px}
|
|||||||
body.site .sec-head p{max-width:30em;color:var(--muted);margin:0}
|
body.site .sec-head p{max-width:30em;color:var(--muted);margin:0}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------- Navigation (24-2) ---------- */
|
||||||
|
body.site .nav{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
|
||||||
|
border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s}
|
||||||
|
body.site .nav.scrolled{border-color:var(--line);box-shadow:0 8px 24px -18px rgba(30,34,25,.5)}
|
||||||
|
body.site .nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
|
||||||
|
body.site .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
|
||||||
|
body.site .seal{width:46px;height:46px;border:2px solid #1A1A1A;box-shadow:3px 3px 5px rgba(26,26,26,.35);background:#fff center/cover no-repeat;flex:none}
|
||||||
|
body.site .brand b{font-family:var(--display);font-size:1.35rem;line-height:1;display:block}
|
||||||
|
body.site .brand small{display:block;font-size:.72rem;color:var(--muted)}
|
||||||
|
html[lang=en] body.site .brand small{letter-spacing:.12em}
|
||||||
|
body.site .links{display:flex;gap:4px;margin-inline-start:auto}
|
||||||
|
body.site .links a{position:relative;padding:10px 14px;text-decoration:none;font-weight:500;font-size:.95rem;border-radius:8px;transition:color .2s}
|
||||||
|
body.site .links a::after{content:"";position:absolute;inset-inline:14px;bottom:4px;height:2px;background:
|
||||||
|
repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 7px);transform:scaleX(0);transform-origin:var(--o,right);transition:transform .35s var(--ease)}
|
||||||
|
html[dir=ltr] body.site .links a::after{--o:left}
|
||||||
|
body.site .links a:hover{color:var(--olive)}
|
||||||
|
body.site .links a:hover::after,body.site .links a[aria-current]::after{transform:scaleX(1)}
|
||||||
|
body.site .nav-tools{display:flex;align-items:center;gap:10px}
|
||||||
|
body.site .lang{min-width:48px;min-height:44px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 .85rem var(--body);cursor:pointer;transition:border-color .2s, transform .2s}
|
||||||
|
body.site .lang:hover{border-color:var(--gold);transform:translateY(-1px)}
|
||||||
|
body.site .login{font-size:.92rem;font-weight:500;text-decoration:none;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center}
|
||||||
|
body.site .login:hover{color:var(--olive)}
|
||||||
|
body.site .nav .btn{min-height:44px;padding:10px 20px;font-size:.92rem}
|
||||||
|
body.site .menu-btn{display:none;width:44px;height:44px;border-radius:10px;border:1.5px solid var(--line);background:#fff;cursor:pointer}
|
||||||
|
body.site .nav .seal{background-color:#fff}
|
||||||
|
body.site .lang{display:inline-grid;place-items:center;text-decoration:none;color:var(--ink);padding:0 12px}
|
||||||
|
body.site .nav button.login{background:none;border:0;cursor:pointer;font-family:var(--body);color:inherit}
|
||||||
|
body.site .menu-sheet{position:absolute;inset-inline:0;top:100%;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:var(--shadow-2);padding:6px 18px 18px}
|
||||||
|
body.site .menu-sheet a:not(.btn),body.site .menu-sheet button{display:flex;align-items:center;width:100%;min-height:48px;padding:0 4px;border:0;border-bottom:1px solid var(--line);background:none;font:500 1rem var(--body);color:var(--ink);text-decoration:none;text-align:start;cursor:pointer}
|
||||||
|
body.site .menu-sheet a[aria-current]{color:var(--olive)}
|
||||||
|
body.site .menu-sheet .btn{width:100%;justify-content:center;margin-top:14px}
|
||||||
|
@media (min-width:1101px){body.site .menu-sheet{display:none!important}}
|
||||||
|
|
||||||
|
/* ---------- Footer (24-2) ---------- */
|
||||||
|
body.site .site-footer{background:var(--forest-2);color:var(--gold-lt);margin-top:120px;padding:72px 0 28px;font-size:.92rem;position:relative}
|
||||||
|
body.site .foot-band{position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(196,168,130,.7),transparent)}
|
||||||
|
body.site .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
|
||||||
|
body.site .foot h4{color:var(--cream);font-family:var(--display);font-size:1.15rem;margin:0 0 14px}
|
||||||
|
body.site .foot a{text-decoration:none;display:block;padding:10px 0;transition:color .2s, transform .2s}
|
||||||
|
body.site .foot a:hover{color:var(--cream);transform:translateX(-3px)}
|
||||||
|
html[dir=ltr] body.site .foot a:hover{transform:translateX(3px)}
|
||||||
|
body.site .foot .brand b{color:var(--cream)}
|
||||||
|
body.site .foot .brand small{color:var(--gold-lt)}
|
||||||
|
body.site .foot p{margin:16px 0 0;max-width:26em}
|
||||||
|
body.site .site-footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(244,241,234,.1);margin-top:48px;padding-top:22px;font-size:.8rem;color:rgba(196,168,130,.75)}
|
||||||
|
body.site .foot span{display:block;padding:10px 0}
|
||||||
|
@media (max-width:1100px){
|
||||||
|
body.site .links{display:none}
|
||||||
|
body.site .menu-btn{display:grid;place-items:center;margin-inline-start:auto}
|
||||||
|
body.site .foot{grid-template-columns:1fr 1fr}
|
||||||
|
}
|
||||||
|
@media (max-width:760px){
|
||||||
|
body.site .nav-tools .btn,body.site .nav-tools .login{display:none}
|
||||||
|
body.site .foot{grid-template-columns:1fr}
|
||||||
|
}
|
||||||
|
|
||||||
/* ---------- Reveal (hidden only when JavaScript runs) ---------- */
|
/* ---------- Reveal (hidden only when JavaScript runs) ---------- */
|
||||||
body.site.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
|
body.site.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
|
||||||
body.site.js [data-reveal].in{opacity:1;transform:none}
|
body.site.js [data-reveal].in{opacity:1;transform:none}
|
||||||
|
|||||||
@@ -1,68 +1,43 @@
|
|||||||
<footer class="bg-primary mt-auto" data-test="main-footer">
|
<footer class="site-footer" data-test="main-footer">
|
||||||
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
|
<span class="foot-band" aria-hidden="true"></span>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
|
<div class="wrap">
|
||||||
<!-- Logo & Description -->
|
<div class="foot">
|
||||||
<div class="text-center sm:text-start">
|
<div>
|
||||||
<x-logo size="lg" class="logo-badge" />
|
<a href="{{ route('home') }}" class="brand" aria-label="{{ __('site.brand_label') }}" wire:navigate>
|
||||||
<p class="mt-3 text-cta text-sm">
|
<span class="seal" style="background-image:url('{{ asset('images/logo.png') }}')"></span>
|
||||||
{{ __('footer.description') }}
|
<span>
|
||||||
</p>
|
<b>{{ __('site.brand_name') }}</b>
|
||||||
|
<small>{{ __('site.brand_sub') }}</small>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<p>{{ __('home.tagline') }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Contact Information -->
|
<div>
|
||||||
<div class="text-center sm:text-start">
|
<h4>{{ __('site.footer_explore') }}</h4>
|
||||||
<h3 class="text-off-white font-semibold mb-3">{{ __('footer.contact') }}</h3>
|
<a href="{{ route('about') }}" wire:navigate>{{ __('site.nav_about') }}</a>
|
||||||
<address class="text-cta text-sm not-italic space-y-2">
|
<a href="{{ route('home') }}#services" wire:navigate>{{ __('site.nav_services') }}</a>
|
||||||
<p class="flex items-center justify-center sm:justify-start gap-2">
|
<a href="{{ route('posts.index') }}" wire:navigate>{{ __('site.nav_articles') }}</a>
|
||||||
<flux:icon name="phone" class="w-4 h-4 text-cta flex-shrink-0" />
|
<a href="{{ route('booking') }}" wire:navigate>{{ __('site.nav_booking') }}</a>
|
||||||
<a href="tel:+970599353502" class="hover:text-cta-light transition-colors ltr-inline" data-test="footer-phone">
|
</div>
|
||||||
+970 599 353 502
|
|
||||||
</a>
|
<div>
|
||||||
</p>
|
<h4>{{ __('site.footer_clients') }}</h4>
|
||||||
<p class="flex items-start justify-center sm:justify-start gap-2">
|
<a href="{{ route('login') }}" wire:navigate>{{ __('site.nav_login') }}</a>
|
||||||
<flux:icon name="map-pin" class="w-4 h-4 text-cta flex-shrink-0 mt-0.5" />
|
<a href="{{ route('terms') }}" wire:navigate data-test="footer-terms">{{ __('site.footer_terms') }}</a>
|
||||||
|
<a href="{{ route('privacy') }}" wire:navigate data-test="footer-privacy">{{ __('site.footer_privacy') }}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4>{{ __('site.footer_contact') }}</h4>
|
||||||
|
<a href="tel:+970599353502" dir="ltr" data-test="footer-phone">{{ __('footer.phone') }}</a>
|
||||||
|
<a href="mailto:{{ __('footer.email') }}" data-test="footer-email">{{ __('footer.email') }}</a>
|
||||||
<span data-test="footer-address">{{ __('footer.address') }}</span>
|
<span data-test="footer-address">{{ __('footer.address') }}</span>
|
||||||
</p>
|
|
||||||
<p class="flex items-center justify-center sm:justify-start gap-2">
|
|
||||||
<flux:icon name="envelope" class="w-4 h-4 text-cta flex-shrink-0" />
|
|
||||||
<a href="mailto:{{ __('footer.email') }}" class="hover:text-cta-light transition-colors ltr-inline" data-test="footer-email">
|
|
||||||
{{ __('footer.email') }}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</address>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Legal Links -->
|
|
||||||
<div class="text-center sm:text-start sm:col-span-2 lg:col-span-1">
|
|
||||||
<h3 class="text-off-white font-semibold mb-3">{{ __('footer.legal') }}</h3>
|
|
||||||
<ul class="space-y-2 flex flex-row sm:flex-col gap-4 sm:gap-0 justify-center sm:justify-start">
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="{{ route('terms') }}"
|
|
||||||
class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
|
|
||||||
data-test="footer-terms"
|
|
||||||
>
|
|
||||||
{{ __('footer.terms') }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="{{ route('privacy') }}"
|
|
||||||
class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
|
|
||||||
data-test="footer-privacy"
|
|
||||||
>
|
|
||||||
{{ __('footer.privacy') }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Copyright -->
|
<div class="legal">
|
||||||
<div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-cta/20 text-center">
|
<span data-test="footer-copyright">© {{ date('Y') }} {{ __('footer.copyright') }}</span>
|
||||||
<p class="text-cta text-xs sm:text-sm" data-test="footer-copyright">
|
|
||||||
© {{ date('Y') }} {{ __('footer.copyright') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -1,141 +1,78 @@
|
|||||||
<nav
|
@php
|
||||||
|
$isAr = app()->getLocale() === 'ar';
|
||||||
|
$links = [
|
||||||
|
['key' => 'home', 'href' => route('home'), 'label' => __('site.nav_home'), 'current' => request()->routeIs('home')],
|
||||||
|
['key' => 'about', 'href' => route('about'), 'label' => __('site.nav_about'), 'current' => request()->routeIs('about')],
|
||||||
|
['key' => 'services', 'href' => route('home').'#services', 'label' => __('site.nav_services'), 'current' => false],
|
||||||
|
['key' => 'posts', 'href' => route('posts.index'), 'label' => __('site.nav_articles'), 'current' => request()->routeIs('posts*')],
|
||||||
|
['key' => 'booking', 'href' => route('booking'), 'label' => __('site.nav_booking'), 'current' => request()->routeIs('booking*')],
|
||||||
|
];
|
||||||
|
$langHref = url('/language/'.($isAr ? 'en' : 'ar'));
|
||||||
|
$langText = $isAr ? 'EN' : 'ع';
|
||||||
|
@endphp
|
||||||
|
<header
|
||||||
x-data="{ mobileMenuOpen: false }"
|
x-data="{ mobileMenuOpen: false }"
|
||||||
class="fixed top-0 inset-x-0 z-50 bg-primary"
|
class="nav"
|
||||||
|
id="site-nav"
|
||||||
data-test="main-navigation"
|
data-test="main-navigation"
|
||||||
>
|
>
|
||||||
<div class="max-w-[1200px] mx-auto px-4">
|
<div class="wrap">
|
||||||
<div class="flex items-center justify-between h-16">
|
<a href="{{ route('home') }}" class="brand" aria-label="{{ __('site.brand_label') }}" wire:navigate>
|
||||||
<!-- Logo - Left on desktop -->
|
<span class="seal" style="background-image:url('{{ asset('images/logo.png') }}')"></span>
|
||||||
<div class="shrink-0 hidden md:block">
|
<span>
|
||||||
<a href="{{ route('home') }}" class="flex items-center" wire:navigate>
|
<b>{{ __('site.brand_name') }}</b>
|
||||||
<x-logo size="md" class="logo-badge" />
|
<small>{{ __('site.brand_sub') }}</small>
|
||||||
</a>
|
</span>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mobile: Hamburger + Centered Logo + Language -->
|
|
||||||
<div class="flex items-center justify-between w-full md:hidden">
|
|
||||||
<!-- Hamburger Button -->
|
|
||||||
<button
|
|
||||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
|
||||||
class="p-2 text-off-white hover:text-cta focus:outline-none min-h-[44px] min-w-[44px] flex items-center justify-center"
|
|
||||||
:aria-expanded="mobileMenuOpen"
|
|
||||||
aria-label="{{ __('Toggle navigation menu') }}"
|
|
||||||
data-test="mobile-menu-button"
|
|
||||||
>
|
|
||||||
<svg x-show="!mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
||||||
</svg>
|
|
||||||
<svg x-show="mobileMenuOpen" x-cloak class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Centered Logo on Mobile -->
|
|
||||||
<a href="{{ route('home') }}" class="flex items-center" wire:navigate>
|
|
||||||
<x-logo size="sm" class="logo-badge" />
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Language Toggle on Mobile -->
|
<nav class="links" aria-label="{{ __('site.nav_main') }}">
|
||||||
<div class="min-w-[44px]">
|
@foreach ($links as $link)
|
||||||
<x-language-toggle />
|
<a
|
||||||
</div>
|
href="{{ $link['href'] }}"
|
||||||
</div>
|
@if ($link['current']) aria-current="page" @endif
|
||||||
|
wire:navigate
|
||||||
|
data-test="nav-{{ $link['key'] }}"
|
||||||
|
>{{ $link['label'] }}</a>
|
||||||
|
@endforeach
|
||||||
|
</nav>
|
||||||
|
|
||||||
<!-- Desktop Navigation Links -->
|
<div class="nav-tools">
|
||||||
<div class="hidden md:flex md:items-center md:gap-6">
|
<a class="lang" href="{{ $langHref }}" aria-label="{{ __('site.lang_switch') }}" data-test="nav-language">{{ $langText }}</a>
|
||||||
<a
|
|
||||||
href="{{ route('home') }}"
|
|
||||||
@class([
|
|
||||||
'text-off-white hover:text-cta transition-colors py-2',
|
|
||||||
'border-b-2 border-cta' => request()->routeIs('home'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
data-test="nav-home"
|
|
||||||
>
|
|
||||||
{{ __('navigation.home') }}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="{{ route('about') }}"
|
|
||||||
@class([
|
|
||||||
'text-off-white hover:text-cta transition-colors py-2',
|
|
||||||
'border-b-2 border-cta' => request()->routeIs('about'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
data-test="nav-about"
|
|
||||||
>
|
|
||||||
{{ __('navigation.about') }}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="{{ route('booking') }}"
|
|
||||||
@class([
|
|
||||||
'text-off-white hover:text-cta transition-colors py-2',
|
|
||||||
'border-b-2 border-cta' => request()->routeIs('booking*'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
data-test="nav-booking"
|
|
||||||
>
|
|
||||||
{{ __('navigation.booking') }}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="{{ route('posts.index') }}"
|
|
||||||
@class([
|
|
||||||
'text-off-white hover:text-cta transition-colors py-2',
|
|
||||||
'border-b-2 border-cta' => request()->routeIs('posts*'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
data-test="nav-posts"
|
|
||||||
>
|
|
||||||
{{ __('navigation.posts') }}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
@auth
|
@auth
|
||||||
@php
|
@php
|
||||||
$dashboardRoute = auth()->user()->isAdmin() ? route('admin.dashboard') : route('client.dashboard');
|
$dashboardRoute = auth()->user()->isAdmin() ? route('admin.dashboard') : route('client.dashboard');
|
||||||
@endphp
|
@endphp
|
||||||
<a
|
<a class="login" href="{{ $dashboardRoute }}" wire:navigate data-test="nav-dashboard">{{ __('navigation.dashboard') }}</a>
|
||||||
href="{{ $dashboardRoute }}"
|
|
||||||
@class([
|
|
||||||
'text-off-white hover:text-cta transition-colors py-2',
|
|
||||||
'border-b-2 border-cta' => request()->routeIs('*.dashboard'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
data-test="nav-dashboard"
|
|
||||||
>
|
|
||||||
{{ __('navigation.dashboard') }}
|
|
||||||
</a>
|
|
||||||
<form method="POST" action="{{ route('logout') }}" class="inline">
|
<form method="POST" action="{{ route('logout') }}" class="inline">
|
||||||
@csrf
|
@csrf
|
||||||
<button
|
<button type="submit" class="login" data-test="nav-logout">{{ __('navigation.logout') }}</button>
|
||||||
type="submit"
|
|
||||||
class="text-off-white hover:text-cta transition-colors py-2"
|
|
||||||
data-test="nav-logout"
|
|
||||||
>
|
|
||||||
{{ __('navigation.logout') }}
|
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
@else
|
@else
|
||||||
<a
|
<a class="login" href="{{ route('login') }}" wire:navigate data-test="nav-login">{{ __('site.nav_login') }}</a>
|
||||||
href="{{ route('login') }}"
|
|
||||||
@class([
|
|
||||||
'text-off-white hover:text-cta transition-colors py-2',
|
|
||||||
'border-b-2 border-cta' => request()->routeIs('login'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
data-test="nav-login"
|
|
||||||
>
|
|
||||||
{{ __('navigation.login') }}
|
|
||||||
</a>
|
|
||||||
@endauth
|
@endauth
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Desktop Language Toggle -->
|
<a class="btn btn-gold" href="{{ route('home') }}#book">{{ __('site.nav_book') }}</a>
|
||||||
<div class="hidden md:block">
|
|
||||||
<x-language-toggle />
|
<button
|
||||||
</div>
|
type="button"
|
||||||
|
class="menu-btn"
|
||||||
|
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||||
|
:aria-expanded="mobileMenuOpen"
|
||||||
|
aria-label="{{ __('site.nav_menu') }}"
|
||||||
|
data-test="mobile-menu-button"
|
||||||
|
>
|
||||||
|
<svg x-show="!mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
<svg x-show="mobileMenuOpen" x-cloak class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile Menu -->
|
<!-- Mobile menu sheet -->
|
||||||
<div
|
<div
|
||||||
x-show="mobileMenuOpen"
|
x-show="mobileMenuOpen"
|
||||||
x-trap.inert.noscroll="mobileMenuOpen"
|
x-trap.inert.noscroll="mobileMenuOpen"
|
||||||
@@ -148,102 +85,32 @@
|
|||||||
x-cloak
|
x-cloak
|
||||||
@click.away="mobileMenuOpen = false"
|
@click.away="mobileMenuOpen = false"
|
||||||
@keydown.escape.window="mobileMenuOpen = false"
|
@keydown.escape.window="mobileMenuOpen = false"
|
||||||
class="md:hidden bg-primary border-t border-cta/20"
|
class="menu-sheet"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-label="{{ __('Mobile navigation menu') }}"
|
aria-label="{{ __('site.nav_menu') }}"
|
||||||
data-test="mobile-menu"
|
data-test="mobile-menu"
|
||||||
>
|
>
|
||||||
<div class="px-4 py-3 space-y-1">
|
@foreach ($links as $link)
|
||||||
<a
|
<a
|
||||||
href="{{ route('home') }}"
|
href="{{ $link['href'] }}"
|
||||||
@class([
|
@if ($link['current']) aria-current="page" @endif
|
||||||
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
|
|
||||||
'bg-active border-s-2 border-cta' => request()->routeIs('home'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
wire:navigate
|
||||||
@click="mobileMenuOpen = false"
|
@click="mobileMenuOpen = false"
|
||||||
data-test="mobile-nav-home"
|
data-test="mobile-nav-{{ $link['key'] }}"
|
||||||
>
|
>{{ $link['label'] }}</a>
|
||||||
{{ __('navigation.home') }}
|
@endforeach
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="{{ route('about') }}"
|
|
||||||
@class([
|
|
||||||
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
|
|
||||||
'bg-active border-s-2 border-cta' => request()->routeIs('about'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
@click="mobileMenuOpen = false"
|
|
||||||
data-test="mobile-nav-about"
|
|
||||||
>
|
|
||||||
{{ __('navigation.about') }}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="{{ route('booking') }}"
|
|
||||||
@class([
|
|
||||||
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
|
|
||||||
'bg-active border-s-2 border-cta' => request()->routeIs('booking*'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
@click="mobileMenuOpen = false"
|
|
||||||
data-test="mobile-nav-booking"
|
|
||||||
>
|
|
||||||
{{ __('navigation.booking') }}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="{{ route('posts.index') }}"
|
|
||||||
@class([
|
|
||||||
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
|
|
||||||
'bg-active border-s-2 border-cta' => request()->routeIs('posts*'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
@click="mobileMenuOpen = false"
|
|
||||||
data-test="mobile-nav-posts"
|
|
||||||
>
|
|
||||||
{{ __('navigation.posts') }}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
@auth
|
@auth
|
||||||
@php
|
<a href="{{ $dashboardRoute }}" wire:navigate @click="mobileMenuOpen = false" data-test="mobile-nav-dashboard">{{ __('navigation.dashboard') }}</a>
|
||||||
$dashboardRoute = auth()->user()->isAdmin() ? route('admin.dashboard') : route('client.dashboard');
|
|
||||||
@endphp
|
|
||||||
<a
|
|
||||||
href="{{ $dashboardRoute }}"
|
|
||||||
@class([
|
|
||||||
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
|
|
||||||
'bg-active border-s-2 border-cta' => request()->routeIs('*.dashboard'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
@click="mobileMenuOpen = false"
|
|
||||||
data-test="mobile-nav-dashboard"
|
|
||||||
>
|
|
||||||
{{ __('navigation.dashboard') }}
|
|
||||||
</a>
|
|
||||||
<form method="POST" action="{{ route('logout') }}">
|
<form method="POST" action="{{ route('logout') }}">
|
||||||
@csrf
|
@csrf
|
||||||
<button
|
<button type="submit" data-test="mobile-nav-logout">{{ __('navigation.logout') }}</button>
|
||||||
type="submit"
|
|
||||||
class="w-full text-start px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center"
|
|
||||||
data-test="mobile-nav-logout"
|
|
||||||
>
|
|
||||||
{{ __('navigation.logout') }}
|
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
@else
|
@else
|
||||||
<a
|
<a href="{{ route('login') }}" wire:navigate @click="mobileMenuOpen = false" data-test="mobile-nav-login">{{ __('site.nav_login') }}</a>
|
||||||
href="{{ route('login') }}"
|
|
||||||
@class([
|
|
||||||
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
|
|
||||||
'bg-active border-s-2 border-cta' => request()->routeIs('login'),
|
|
||||||
])
|
|
||||||
wire:navigate
|
|
||||||
@click="mobileMenuOpen = false"
|
|
||||||
data-test="mobile-nav-login"
|
|
||||||
>
|
|
||||||
{{ __('navigation.login') }}
|
|
||||||
</a>
|
|
||||||
@endauth
|
@endauth
|
||||||
|
|
||||||
|
<a class="btn btn-gold" href="{{ route('home') }}#book" @click="mobileMenuOpen = false">{{ __('site.nav_book') }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
</nav>
|
|
||||||
|
|||||||
@@ -0,0 +1,78 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
use App\Models\User;
|
||||||
|
|
||||||
|
function siteKeys(): array
|
||||||
|
{
|
||||||
|
return ['brand_name', 'brand_sub', 'brand_label', 'nav_main', 'nav_home', 'nav_about', 'nav_services', 'nav_articles',
|
||||||
|
'nav_booking', 'nav_login', 'nav_book', 'nav_menu', 'lang_switch', 'footer_explore', 'footer_clients',
|
||||||
|
'footer_contact', 'footer_terms', 'footer_privacy'];
|
||||||
|
}
|
||||||
|
|
||||||
|
test('every nav and footer key exists in both languages', function () {
|
||||||
|
foreach (['ar', 'en'] as $locale) {
|
||||||
|
$table = require base_path("lang/$locale/site.php");
|
||||||
|
foreach (siteKeys() as $key) {
|
||||||
|
expect($table)->toHaveKey($key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test('navigation is the sticky site header', function () {
|
||||||
|
$html = $this->get('/')->assertOk()->getContent();
|
||||||
|
|
||||||
|
expect($html)
|
||||||
|
->toContain('class="nav"')
|
||||||
|
->toContain('id="site-nav"')
|
||||||
|
->toContain('class="seal"')
|
||||||
|
->toContain('class="links"')
|
||||||
|
->toContain('class="lang"')
|
||||||
|
->toContain('href="'.route('login').'"')
|
||||||
|
->toContain('btn btn-gold')
|
||||||
|
->toContain('class="menu-btn"')
|
||||||
|
->toContain('mobileMenuOpen');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('about link is current on about, articles on posts', function () {
|
||||||
|
$about = $this->get('/about')->assertOk()->getContent();
|
||||||
|
expect($about)->toMatch('~<a[^>]*href="'.preg_quote(route('about'), '~').'"[^>]*aria-current="page"~');
|
||||||
|
|
||||||
|
$posts = $this->get('/posts')->assertOk()->getContent();
|
||||||
|
expect($posts)->toMatch('~<a[^>]*href="'.preg_quote(route('posts.index'), '~').'"[^>]*aria-current="page"~');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('language pill reads EN on Arabic and the Arabic letter on English', function () {
|
||||||
|
$ar = $this->withSession(['locale' => 'ar'])->get('/')->getContent();
|
||||||
|
expect($ar)->toContain('href="'.url('/language/en').'"');
|
||||||
|
|
||||||
|
$en = $this->withSession(['locale' => 'en'])->get('/')->getContent();
|
||||||
|
expect($en)->toContain('href="'.url('/language/ar').'"');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('clients and admins see Dashboard and logout instead of login', function () {
|
||||||
|
$client = $this->actingAs(User::factory()->individual()->create())->get('/')->getContent();
|
||||||
|
expect($client)->toContain(route('client.dashboard'))->toContain('action="'.route('logout').'"');
|
||||||
|
|
||||||
|
auth()->logout();
|
||||||
|
$admin = $this->actingAs(User::factory()->admin()->create())->get('/')->getContent();
|
||||||
|
expect($admin)->toContain(route('admin.dashboard'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('footer has four columns, contact details, legal links and no photo credit', function () {
|
||||||
|
$html = $this->get('/')->assertOk()->getContent();
|
||||||
|
|
||||||
|
expect($html)
|
||||||
|
->toContain('class="site-footer"')
|
||||||
|
->toContain('class="foot-band"')
|
||||||
|
->toContain('tel:+970599353502')
|
||||||
|
->toContain(route('terms'))
|
||||||
|
->toContain(route('privacy'))
|
||||||
|
->toContain('© '.date('Y'))
|
||||||
|
->not->toContain('Unsplash');
|
||||||
|
expect(substr_count($html, '<h4'))->toBe(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('shared files stay untouched and navigation is only used by the public layout', function () {
|
||||||
|
$files = shell_exec('grep -rln "x-navigation" '.escapeshellarg(resource_path('views')));
|
||||||
|
expect(trim($files))->toEndWith('components/layouts/public.blade.php');
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user