Naser Mansour
147 lines
9.1 KiB
Markdown
147 lines
9.1 KiB
Markdown
---
|
||
id: 24-2
|
||
title: 24-2 Navigation and Footer
|
||
status: Ready for Dev
|
||
date: 2026-10-31
|
||
parent: 24
|
||
---
|
||
|
||
## Description
|
||
|
||
Restyle the public navigation and footer to the approved redesign. Both components are used only
|
||
by `resources/views/components/layouts/public.blade.php`, so they are restyled in place. Keep all
|
||
existing behaviour: the Alpine `x-data="{ mobileMenuOpen: false }"` menu with its
|
||
`x-trap.inert.noscroll`, `@click.away` and `@keydown.escape.window` handling, the `@auth` branch
|
||
(Dashboard link to `route('admin.dashboard')` or `route('client.dashboard')` by
|
||
`auth()->user()->isAdmin()`, and the logout `<form method="POST" action="{{ route('logout') }}">`),
|
||
the language toggle's `/language/{locale}` links, and `wire:navigate` on internal links.
|
||
|
||
All CSS goes in `resources/css/public.css` (created in 24-1), every selector prefixed with
|
||
`body.site `. Port the CSS from `docs/ux-mockup.html`: navigation lines 75–98, footer lines
|
||
273–284, and the responsive nav/footer rules inside lines 293–323 (`.links` hidden and
|
||
`.menu-btn` shown at ≤1100px; `.nav .btn` and `.login` hidden at ≤760px; footer grid 2 columns at
|
||
≤1100px and 1 column at ≤760px).
|
||
|
||
### Navigation — `resources/views/components/navigation.blade.php`
|
||
|
||
- Root: `<header class="nav" id="site-nav">` — sticky (`position:sticky; top:0; z-index:50`),
|
||
height 72px, background `rgba(244,241,234,.82)`, `backdrop-filter: blur(14px) saturate(1.2)`
|
||
(with `-webkit-` prefix), bottom border transparent; with class `scrolled` (toggled by
|
||
`resources/js/site/progress.js` from 24-1 when `scrollY > 8`) the border becomes
|
||
`1px solid var(--line)` and the shadow `0 8px 24px -18px rgba(30,34,25,.5)`. Remove the old
|
||
fixed positioning and forest background.
|
||
- Inner `<div class="wrap">` laid out as flex, `align-items:center; gap:28px; height:72px`:
|
||
1. Brand link to `route('home')`: `<span class="seal">` (46×46px, background
|
||
`#fff url('/images/logo.png') center/cover no-repeat`, `border:2px solid #1A1A1A`,
|
||
`box-shadow:3px 3px 5px rgba(26,26,26,.35)`) then a two-line wordmark: `<b>` =
|
||
`__('site.brand_name')` (display font, 1.35rem, line-height 1) and `<small>` =
|
||
`__('site.brand_sub')` (.72rem, `--muted`; letter-spacing .12em in English).
|
||
`aria-label="{{ __('site.brand_label') }}"`.
|
||
2. `<nav class="links" aria-label="{{ __('site.nav_main') }}">` with links: Home →
|
||
`route('home')`, About → `route('about')`, Services → `route('home').'#services'`,
|
||
Articles → `route('posts.index')`, Booking → `route('booking')`. Labels from `site.nav_*`.
|
||
The current route's link gets `aria-current="page"` (home for `home`, about for `about`,
|
||
articles for `posts.*`, booking for `booking*`). Link style: padding 10px 14px, weight 500,
|
||
.95rem, radius 8px; hover colour `--olive`; `::after` underline — `inset-inline:14px;
|
||
bottom:4px; height:2px; background:repeating-linear-gradient(90deg,var(--gold) 0 4px,
|
||
transparent 4px 7px); transform:scaleX(0)`, origin right (left in LTR), transition
|
||
`.35s var(--ease)`; `scaleX(1)` on hover and on `[aria-current]`.
|
||
3. `.nav-tools` (flex, gap 10px): replace both `<x-language-toggle />` usages in this file
|
||
(desktop and mobile) with a plain link
|
||
`<a class="lang" href="{{ url('/language/'.(app()->getLocale() === 'ar' ? 'en' : 'ar')) }}" aria-label="{{ __('site.lang_switch') }}">`
|
||
— a pill (min 48×44px, inline-grid centred, radius 999px, `1.5px solid var(--line)`, white,
|
||
weight 600 .85rem, no underline; hover gold border and lift 1px) whose text is `EN` when the
|
||
locale is `ar` and `ع` when it is `en`. Do not edit
|
||
`resources/views/components/language-toggle.blade.php` (the auth layouts and the dashboard
|
||
sidebar use it); for guests a `.login` link (`__('site.nav_login')` →
|
||
`route('login')`, .92rem, min-height 44px, hover olive); for authenticated users the
|
||
existing Dashboard link and logout button styled like `.login`; then
|
||
`<a class="btn btn-gold" href="{{ route('home') }}#book">{{ __('site.nav_book') }}</a>`
|
||
(in the nav: min-height 44px, padding 10px 20px, .92rem); then the mobile menu button
|
||
`.menu-btn` (44×44px, radius 10px, `1.5px solid var(--line)`, white, hidden above 1100px)
|
||
carrying the existing Alpine toggle, `:aria-expanded`, and
|
||
`aria-label="{{ __('site.nav_menu') }}"`.
|
||
- Mobile menu sheet (the existing `x-show="mobileMenuOpen"` panel): cream background
|
||
(`var(--cream)`), directly under the nav, full width, each link a 48px-high row with a
|
||
`1px solid var(--line)` bottom border; contains the five links, the login (or Dashboard and
|
||
logout) and the gold Book button full width.
|
||
|
||
### Footer — `resources/views/components/footer.blade.php`
|
||
|
||
- `<footer class="site-footer">`: background `var(--forest-2)`, colour `var(--gold-lt)`,
|
||
margin-top 120px, padding 72px 0 28px, .92rem, position relative. First child
|
||
`<span class="foot-band" aria-hidden="true">` — absolute, top 0, full width, height 1px,
|
||
`linear-gradient(90deg,transparent,rgba(196,168,130,.7),transparent)`.
|
||
- `<div class="wrap"><div class="foot">` grid `1.4fr 1fr 1fr 1fr`, gap 40px:
|
||
1. The brand mark (same seal + wordmark as the nav; wordmark `<b>` cream, `<small>` gold-lt)
|
||
and `<p>` = `__('home.tagline')` (margin-top 16px, max-width 26em).
|
||
2. `<h4>{{ __('site.footer_explore') }}</h4>` then links About → `route('about')`, Services →
|
||
`route('home').'#services'`, Articles → `route('posts.index')`, Booking → `route('booking')`.
|
||
3. `<h4>{{ __('site.footer_clients') }}</h4>` then Client login → `route('login')`, Terms →
|
||
`route('terms')` with `__('site.footer_terms')`, Privacy → `route('privacy')` with
|
||
`__('site.footer_privacy')`.
|
||
4. `<h4>{{ __('site.footer_contact') }}</h4>` then `<a href="tel:+970599353502" dir="ltr">`
|
||
`{{ __('footer.phone') }}`, `<a href="mailto:{{ __('footer.email') }}">`, and the address
|
||
`{{ __('footer.address') }}` as plain text.
|
||
- `h4`: display font, 1.15rem, cream, margin 0 0 14px. Links: block, padding 10px 0, hover
|
||
colour cream and `translateX(-3px)` (RTL) / `translateX(3px)` (LTR).
|
||
- `.legal` row: flex, space-between, wrap, `border-top:1px solid rgba(244,241,234,.1)`,
|
||
margin-top 48px, padding-top 22px, .8rem, colour `rgba(196,168,130,.75)`; content
|
||
`© {{ date('Y') }} {{ __('footer.copyright') }}`. No photography credit.
|
||
|
||
### Language keys — add to `lang/ar/site.php` and `lang/en/site.php`
|
||
|
||
| Key | ar | en |
|
||
|---|---|---|
|
||
| `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` | English | العربية |
|
||
| `footer_explore` | تصفّح | Explore |
|
||
| `footer_clients` | العملاء | Clients |
|
||
| `footer_contact` | تواصل | Contact |
|
||
| `footer_terms` | شروط الاستخدام | Terms of use |
|
||
| `footer_privacy` | سياسة الخصوصية | Privacy policy |
|
||
|
||
Do not edit `lang/*/navigation.php` or `lang/*/footer.php` (the dashboards use `navigation.php`).
|
||
|
||
### Files
|
||
|
||
- Modify: `resources/views/components/navigation.blade.php`,
|
||
`resources/views/components/footer.blade.php`, `resources/css/public.css`,
|
||
`lang/ar/site.php`, `lang/en/site.php`.
|
||
|
||
## Acceptance Criteria
|
||
|
||
- [ ] On `/` at 1440px the navigation is 72px high, stays at the top of the viewport while
|
||
scrolling, shows brand, five links, language pill, Client login and the gold Book button,
|
||
and gains a bottom border once the page is scrolled past 8px.
|
||
- [ ] On `/about` the About link has `aria-current="page"`; on `/posts` the Articles link does.
|
||
- [ ] At ≤1100px the five links are hidden and the menu button opens a sheet containing all five
|
||
links, login and Book; Escape closes it; at 390px there is no horizontal scroll.
|
||
- [ ] Logged in as a client, the navigation shows Dashboard (to `/client/dashboard`) and a working
|
||
Log out instead of Client login; logged in as admin, Dashboard goes to `/admin/dashboard`.
|
||
- [ ] The language pill reads `EN` on Arabic pages and `ع` on English pages and switches locale;
|
||
`resources/views/components/language-toggle.blade.php` is unchanged against BASE.
|
||
- [ ] The footer shows four columns at 1440px with the phone, email and address from
|
||
`lang/*/footer.php`, links to `/terms` and `/privacy`, and `© <current year>`; it contains no
|
||
"Unsplash" text.
|
||
- [ ] Every key in the table exists in both `lang/ar/site.php` and `lang/en/site.php`, and
|
||
`lang/*/navigation.php` and `lang/*/footer.php` are unchanged against BASE.
|
||
- [ ] The admin and client dashboards' navigation is unchanged (they do not render
|
||
`components/navigation.blade.php`): verify `grep -rn "x-navigation" resources/views` lists
|
||
only `components/layouts/public.blade.php`.
|
||
|
||
## Sub-tasks
|
||
|
||
None.
|