Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

navbar algin

Browse Source
This commit is contained in:
Aravind
2026-07-08 19:29:42 +05:30
parent d639415d89
commit 0fc09a934c
2 changed files with 117 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/globals.css
View File

@@ -184,7 +184,11 @@ body {
} }
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled { #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
top: 0 !important; top: 15px !important;
left: 20px !important;
right: 20px !important;
border-radius: 24px !important;
width: auto !important;
} }
} }

190
src/components/layout/Header.tsx
View File

@@ -30,11 +30,13 @@ const CURRENT_PAGE_ALIASES: Record<string, string[]> = {
home: ["home"], home: ["home"],
"how-it-works": ["how-it-works", "how-its-works"], "how-it-works": ["how-it-works", "how-its-works"],
miletruth: ["miletruth"], miletruth: ["miletruth"],
// Solutions is a normal nav page and also owns the Wings/Express dropdown. // Solutions is now a plain top-level link — no child pages own its active state.
solutions: ["solutions", "doormile-wings", "express"], solutions: ["solutions"],
"doormile-wings": ["doormile-wings"], "doormile-wings": ["doormile-wings"],
about: ["about", "about-us", "women"], about: ["about", "about-us", "women"],
blogs: ["blogs"], blogs: ["blogs"],
// Company is the dropdown parent for Blogs + How It Works — active if either is.
company: ["blogs", "how-it-works"],
}; };
export default function Header() { export default function Header() {
@@ -82,20 +84,20 @@ export default function Header() {
const [visibleScrolled, setVisibleScrolled] = useState(false); const [visibleScrolled, setVisibleScrolled] = useState(false);
const [isScrolled, setIsScrolled] = useState(false); const [isScrolled, setIsScrolled] = useState(false);
// Solutions dropdown (desktop) / accordion (mobile). Local to Header — // Company dropdown (desktop) / accordion (mobile). Local to Header —
// unlike isMenuOpen/isSidebarOpen (HeaderUIProvider), no sibling component // unlike isMenuOpen/isSidebarOpen (HeaderUIProvider), no sibling component
// needs to read this. // needs to read this.
const [isDesktopSolutionsOpen, setDesktopSolutionsOpen] = useState(false); const [isDesktopCompanyOpen, setDesktopCompanyOpen] = useState(false);
const [isMobileSolutionsOpen, setMobileSolutionsOpen] = useState(false); const [isMobileCompanyOpen, setMobileCompanyOpen] = useState(false);
// Collapse the accordion whenever the off-canvas menu closes, so it isn't // Collapse the accordion whenever the off-canvas menu closes, so it isn't
// left expanded the next time the menu opens. // left expanded the next time the menu opens.
const closeMobileMenu = () => { const closeMobileMenu = () => {
setMobileSolutionsOpen(false); setMobileCompanyOpen(false);
closeAll(); closeAll();
}; };
const toggleMobileMenu = () => { const toggleMobileMenu = () => {
setMobileSolutionsOpen(false); setMobileCompanyOpen(false);
toggleMenu(); toggleMenu();
}; };
@@ -457,56 +459,70 @@ export default function Header() {
<li id="menu-item-10508" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}> <li id="menu-item-10508" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
<Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home")}>Home</Link> <Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home")}>Home</Link>
</li> </li>
<li id="menu-item-10509" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("how-it-works")}`}> <li id="menu-item-10509" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("doormile-wings")}`}>
<Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works")}>How It Works</Link> <Link href="/doormile-wings" prefetch>Doormile Wings</Link>
</li> </li>
<li id="menu-item-10510" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}> <li id="menu-item-10510" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
<Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth")}>MileTruth&trade; AI</Link> <Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth")}>MileTruth&trade; AI</Link>
</li> </li>
<li <li id="menu-item-10511" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10511${dmHeaderActive("solutions")}`}>
id="menu-item-10511" <Link href="/solutions" prefetch>Solutions</Link>
className={`menu-item menu-item-type-custom menu-item-has-children menu-item-10511${dmHeaderActive("solutions")}`}
onMouseEnter={() => setDesktopSolutionsOpen(true)}
onMouseLeave={() => setDesktopSolutionsOpen(false)}
onKeyDown={(event: KeyboardEvent<HTMLLIElement>) => {
if (event.key !== "Escape") return;
setDesktopSolutionsOpen(false);
event.currentTarget.querySelector<HTMLAnchorElement>(":scope > a")?.focus();
}}
onBlur={(event: FocusEvent<HTMLLIElement>) => {
if (!event.currentTarget.contains(event.relatedTarget as Node)) {
setDesktopSolutionsOpen(false);
}
}}
>
<Link
href="/solutions"
prefetch
aria-haspopup="true"
aria-expanded={isDesktopSolutionsOpen}
onFocus={() => setDesktopSolutionsOpen(true)}
onClick={() => setDesktopSolutionsOpen(false)}
>
Solutions
</Link>
<ul className="dm-solutions-dropdown">
<li className={currentPage === "doormile-wings" ? "dm-child-active" : ""}>
<Link href="/doormile-wings" prefetch onClick={() => setDesktopSolutionsOpen(false)}>
Doormile Wings
</Link>
</li>
<li className={currentPage === "express" ? "dm-child-active" : ""}>
<Link href="/express" prefetch onClick={() => setDesktopSolutionsOpen(false)}>
Express
</Link>
</li>
</ul>
</li> </li>
<li id="menu-item-10512" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10512${dmHeaderActive("about")}`}> <li id="menu-item-10512" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10512${dmHeaderActive("about")}`}>
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about")}>About</Link> <Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about")}>About</Link>
</li> </li>
<li id="menu-item-10535" className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}> <li
<Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs")}>Blogs</Link> id="menu-item-10535"
className={`menu-item menu-item-type-custom menu-item-has-children menu-item-10535${dmHeaderActive("company")}`}
onMouseEnter={() => setDesktopCompanyOpen(true)}
onMouseLeave={() => setDesktopCompanyOpen(false)}
onKeyDown={(event: KeyboardEvent<HTMLLIElement>) => {
if (event.key !== "Escape") return;
setDesktopCompanyOpen(false);
event.currentTarget.querySelector<HTMLAnchorElement>(":scope > a")?.focus();
}}
onBlur={(event: FocusEvent<HTMLLIElement>) => {
if (!event.currentTarget.contains(event.relatedTarget as Node)) {
setDesktopCompanyOpen(false);
}
}}
>
<a
href="#"
aria-haspopup="true"
aria-expanded={isDesktopCompanyOpen}
onFocus={() => setDesktopCompanyOpen(true)}
onClick={(event) => {
event.preventDefault();
setDesktopCompanyOpen((open) => !open);
}}
>
Company
</a>
<ul className="dm-solutions-dropdown">
<li className={currentPage === "blogs" ? "dm-child-active" : ""}>
<Link
href="/blog#blogs"
onClick={(event) => {
setDesktopCompanyOpen(false);
handleNavClick(event, "/blog", "blogs");
}}
>
Blogs
</Link>
</li>
<li className={currentPage === "how-it-works" ? "dm-child-active" : ""}>
<Link
href="/how-it-works#how-it-works"
onClick={(event) => {
setDesktopCompanyOpen(false);
handleNavClick(event, "/how-it-works", "how-it-works");
}}
>
How It Works
</Link>
</li>
</ul>
</li> </li>
</ul> </ul>
</nav> </nav>
@@ -541,45 +557,51 @@ export default function Header() {
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}> <li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
<Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home", true)}>Home</Link> <Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home", true)}>Home</Link>
</li> </li>
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("how-it-works")}`}> <li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("doormile-wings")}`}>
<Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works", true)}>How It Works</Link> <Link href="/doormile-wings" prefetch onClick={closeMobileMenu}>Doormile Wings</Link>
</li> </li>
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}> <li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
<Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth", true)}>MileTruth&trade; AI</Link> <Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth", true)}>MileTruth&trade; AI</Link>
</li> </li>
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10511${dmHeaderActive("solutions")}`}>
<Link href="/solutions" prefetch onClick={closeMobileMenu}>Solutions</Link>
</li>
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512${dmHeaderActive("about")}`}>
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about", true)}>About</Link>
</li>
<li <li
className={`menu-item menu-item-type-custom menu-item-10511 dm-mobile-solutions${dmHeaderActive("solutions")}${isMobileSolutionsOpen ? " dm-accordion-open" : ""}`} className={`menu-item menu-item-type-custom menu-item-10535 dm-mobile-solutions${dmHeaderActive("company")}${isMobileCompanyOpen ? " dm-accordion-open" : ""}`}
> >
<div className="dm-mobile-solutions-row"> <div className="dm-mobile-solutions-row">
<Link href="/solutions" prefetch onClick={closeMobileMenu}> <a
Solutions href="#"
</Link> onClick={(event) => {
event.preventDefault();
setMobileCompanyOpen((open) => !open);
}}
>
Company
</a>
<button <button
type="button" type="button"
className="dm-mobile-solutions-toggle" className="dm-mobile-solutions-toggle"
aria-label={isMobileSolutionsOpen ? "Close Solutions menu" : "Open Solutions menu"} aria-label={isMobileCompanyOpen ? "Close Company menu" : "Open Company menu"}
aria-haspopup="true" aria-haspopup="true"
aria-expanded={isMobileSolutionsOpen} aria-expanded={isMobileCompanyOpen}
onClick={() => setMobileSolutionsOpen((open) => !open)} onClick={() => setMobileCompanyOpen((open) => !open)}
> >
<span className="dm-accordion-chevron" aria-hidden="true"></span> <span className="dm-accordion-chevron" aria-hidden="true"></span>
</button> </button>
</div> </div>
<ul className="dm-mobile-solutions-panel"> <ul className="dm-mobile-solutions-panel">
<li className={currentPage === "doormile-wings" ? "dm-child-active" : ""}> <li className={currentPage === "blogs" ? "dm-child-active" : ""}>
<Link href="/doormile-wings" prefetch onClick={closeMobileMenu}>Doormile Wings</Link> <Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs", true)}>Blogs</Link>
</li> </li>
<li className={currentPage === "express" ? "dm-child-active" : ""}> <li className={currentPage === "how-it-works" ? "dm-child-active" : ""}>
<Link href="/express" prefetch onClick={closeMobileMenu}>Express</Link> <Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works", true)}>How It Works</Link>
</li> </li>
</ul> </ul>
</li> </li>
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512${dmHeaderActive("about")}`}>
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about", true)}>About</Link>
</li>
<li className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
<Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs", true)}>Blogs</Link>
</li>
</ul> </ul>
</nav> </nav>
<div className="header-mobile-contacts"> <div className="header-mobile-contacts">
@@ -768,7 +790,10 @@ export default function Header() {
-webkit-backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
top: 0 !important; top: 15px !important;
left: 20px !important;
right: 20px !important;
border-radius: 24px !important;
} }
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled .elementor-element.elementor-element-e052838 { #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled .elementor-element.elementor-element-e052838 {
@@ -899,9 +924,15 @@ export default function Header() {
to the top once scrolled past 50px, matching desktop behaviour. */ to the top once scrolled past 50px, matching desktop behaviour. */
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled { #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
position: fixed !important; position: fixed !important;
top: 18px !important; background: rgba(26, 26, 26, 0.92) !important;
left: 0 !important; -webkit-backdrop-filter: blur(14px) !important;
right: 0 !important; backdrop-filter: blur(14px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
top: 15px !important;
left: 20px !important;
right: 20px !important;
border-radius: 20px !important;
width: auto !important;
} }
#masthead .elementor-element.elementor-element-e052838 { #masthead .elementor-element.elementor-element-e052838 {
@@ -959,12 +990,15 @@ export default function Header() {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
} }
/* ── Solutions dropdown (desktop) / accordion (mobile) ── /* ── Company dropdown (desktop) / accordion (mobile) ──
Solutions remains linked to /solutions while the nested menu opens Company (Blogs + How It Works) is a non-navigating parent —
independently. It reuses site.css's dead .menu-item-has-children chevron (fontello its trigger is a plain anchor with no href target, only a
glyph, already coloured white for this exact header widget) instead dropdown toggle. Class names below (.dm-solutions-dropdown,
of inventing a new arrow, so it matches the site's existing premium .dm-mobile-solutions*) are unchanged from when this same
nav styling. Desktop opens on hover/focus; mobile is a component/markup belonged to Solutions, reusing site.css's dead
.menu-item-has-children chevron (fontello glyph, already
coloured white for this exact header widget) instead of
inventing a new arrow. Desktop opens on hover/focus; mobile is a
height-collapsing accordion controlled by the chevron button. */ height-collapsing accordion controlled by the chevron button. */
@media (min-width: 1025px) { @media (min-width: 1025px) {
#masthead .header-menu-container nav { #masthead .header-menu-container nav {