8962fc5f0e
- Add scroll.js: data-scroll-to attribute drives smooth scrollIntoView; scroll-margin-top at md+ accounts for fixed header offset - Wire Services, FAQ, Book An Appointment, View Our Services nav/hero links to on-page anchors; don't close hamburger on scroll-link clicks - Refactor booking calendar: own the fetch (useEffect + dateRange state) instead of handing URL to FullCalendar; removes fetchedRef complexity; noSlotsInMonth derived cleanly from fetchLoading + fetchedEvents - Success state shows appointment summary (name, service, date/time); hides calendar/form on success; no "book another" button Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
3.3 KiB
Twig
67 lines
3.3 KiB
Twig
<header class="rpt-header relative md:fixed md:top-0 md:left-0 md:right-0 md:z-50 p-5 bg-white shadow-sm" role="banner">
|
|
<div class="flex flex-wrap items-center md:h-full max-w-[1200px] mx-auto px-6 gap-y-0 gap-x-8 md:gap-8">
|
|
|
|
<a class="text-lg font-bold text-pt-blue-500 no-underline whitespace-nowrap shrink-0 hover:text-[pt-blue-600]"
|
|
href="{{ home_url }}">{{ site_name }}</a>
|
|
|
|
<nav class="flex-1 min-w-0" id="rpt-main-nav" aria-label="Main navigation">
|
|
<ul class="flex items-center list-none my-3 md:my-0 md:m-0 p-0 gap-1">
|
|
{% for item in menu_items %}
|
|
{% if not item.is_cta %}
|
|
<li>
|
|
<a class="
|
|
block text-[15px] text-gray-700 no-underline md:px-3.5
|
|
py-3
|
|
md:py-1
|
|
hover:text-[blue-900]
|
|
hover:bg-gray-100
|
|
md:hover:bg-transparent
|
|
{% if current_path == item.url %}
|
|
text-[blue-900] font-medium
|
|
{% endif %}
|
|
"
|
|
href="{{ item.url }}"
|
|
{% if item.title == 'Services' %}data-scroll-to="#pt-services"{% endif %}
|
|
{% if item.title == 'FAQ' %}data-scroll-to="#pt-faq"{% endif %}
|
|
>{{ item.title }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% set has_cta = false %}
|
|
{% for item in menu_items %}
|
|
{% if item.is_cta %}{% set has_cta = true %}{% endif %}
|
|
{% endfor %}
|
|
{% if has_cta %}
|
|
<li class="ml-auto px-6">
|
|
<div class="flex items-center gap-4">
|
|
{% for item in menu_items %}
|
|
{% if item.is_cta %}
|
|
{% if item.title == 'Contact' %}
|
|
<a class="inline-block px-5 py-2 rounded-none bg-white text-pt-blue-500 text-sm font-medium no-underline rounded border-2 border-pt-blue-500 whitespace-nowrap transition-colors hover:bg-pt-blue-50 hover:text-[pt-blue-600]"
|
|
href="{{ item.url }}">{{ item.title }}</a>
|
|
{% else %}
|
|
<a class="inline-block px-5 py-2 rounded-none bg-pt-blue-500 text-white text-sm font-medium no-underline rounded border border-pt-navy whitespace-nowrap transition-colors hover:bg-pt-blue-600 hover:border-pt-blue-600 hover:text-white"
|
|
href="{{ item.url }}"
|
|
{% if item.title == 'Book An Appointment' %}data-scroll-to="#book-an-appointment"{% endif %}
|
|
>{{ item.title }}</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
|
|
<button class="rpt-header__hamburger flex md:hidden flex-col justify-center gap-1.5 w-11 h-11 p-2 bg-transparent border-0 cursor-pointer shrink-0 ml-auto"
|
|
aria-expanded="false"
|
|
aria-controls="rpt-main-nav"
|
|
aria-label="Toggle navigation">
|
|
<span class="block h-1 bg-pt-navy rounded-[3px] w-[45%] transition-transform duration-[250ms] ease-in-out"></span>
|
|
<span class="block h-1 bg-pt-navy rounded-[3px] w-full transition-[transform,opacity] duration-200 ease-in-out"></span>
|
|
<span class="block h-1 bg-pt-navy rounded-[3px] w-[45%] self-end transition-transform duration-[250ms] ease-in-out"></span>
|
|
</button>
|
|
|
|
</div>
|
|
</header>
|