---
id: 24-2
title: 24-2 Navigation and Footer
status: Done
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.