feat: header UI styling
This commit is contained in:
parent
3d90019289
commit
eb78e44f1c
@ -39,6 +39,8 @@
|
||||
--color-colorBtnPrimaryText: var(--color-colorExt20);
|
||||
--color-colorBtnSecondary: var(--color-colorExt50);
|
||||
--color-colorBtnSecondaryText: var(--color-colorExt20);
|
||||
--color-colorLinkText1: var(--color-colorExt30);
|
||||
--color-colorLinkText2: var(--color-colorext40);
|
||||
}
|
||||
|
||||
@layer components {
|
||||
|
||||
@ -1,18 +1,7 @@
|
||||
import { headers } from "next/headers";
|
||||
import HeaderFeaturedHomes from "./HeaderFeaturedHomes";
|
||||
import { HeaderDropdown, HeaderDropdownGroup, HeaderDropdownMenu } from "./HeaderDropdown";
|
||||
import HeaderFeaturedHomes from "./HeaderFeaturedHomes";
|
||||
|
||||
export default async function Header() {
|
||||
const headerList = await headers();
|
||||
const fullUrl = headerList.get("x-full-url");
|
||||
|
||||
const headerActive = (pathName: string) => {
|
||||
if (!fullUrl) return "";
|
||||
const splittedUrl = fullUrl.split("/");
|
||||
|
||||
return splittedUrl[3] === pathName ? "active" : "";
|
||||
};
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="section page-header">
|
||||
<div className="rd-navbar-wrap">
|
||||
@ -113,6 +102,108 @@ export default async function Header() {
|
||||
<a className="rd-nav-link rd-nav-link-custom" href="#">
|
||||
Buying / Selling
|
||||
</a>
|
||||
<HeaderDropdown>
|
||||
<HeaderDropdownGroup>
|
||||
<div className="pr-2">
|
||||
<form>
|
||||
<div className="form-wrap">
|
||||
<input type="text" id="search" className="form-input" />
|
||||
<label className="form-label" htmlFor="search">
|
||||
Search
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<HeaderFeaturedHomes />
|
||||
</div>
|
||||
</HeaderDropdownGroup>
|
||||
<HeaderDropdownGroup title="Why Dynamic?">
|
||||
<HeaderDropdownMenu
|
||||
list={[
|
||||
{
|
||||
title:
|
||||
"Committed to providing a personalized structure to each client, with on-site management & a robust property management",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"We strive to provide a service that meets the needs of all our customers & are proud to have been helping people with their real estate needs for the past 20 years",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"We understand the real estate sector inside out & are committed to providing a professional service to our clients. We strive to make the process of reaching your real estate goals as easy & stress-free as possible",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</HeaderDropdownGroup>
|
||||
<HeaderDropdownGroup title="Future Owners">
|
||||
<HeaderDropdownMenu
|
||||
list={[
|
||||
{
|
||||
title: "Moving In",
|
||||
child: [
|
||||
{
|
||||
title: "What To Be Done Prior",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Next Steps (keys, utilities, etc)",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Common Questions",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Welcome home",
|
||||
child: [
|
||||
{
|
||||
title: "Payment",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Utilities",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Maintenance",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Moving Out",
|
||||
child: [
|
||||
{
|
||||
title: "What To Be Done Prior",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Next Steps (keys, utilities, etc)",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Common Questions",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</HeaderDropdownGroup>
|
||||
<HeaderDropdownGroup className="flex! pr-4!">
|
||||
<div className="flex flex-col self-end!">
|
||||
<a className="button button-secondary" href="/">
|
||||
FAQ
|
||||
</a>
|
||||
<a className="button button-primary mt-2!" href="/">
|
||||
LOOKING FOR SELL
|
||||
</a>
|
||||
</div>
|
||||
</HeaderDropdownGroup>
|
||||
</HeaderDropdown>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link rd-nav-link-custom" href="#">
|
||||
@ -139,22 +230,22 @@ export default async function Header() {
|
||||
list={[
|
||||
{
|
||||
title: "Our Rentals",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Application Process",
|
||||
child: [
|
||||
{
|
||||
title: "Before You Apply",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Rental Criteria",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Before You Apply",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -169,15 +260,15 @@ export default async function Header() {
|
||||
child: [
|
||||
{
|
||||
title: "What To Be Done Prior",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Next Steps (keys, utilities, etc)",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Common Questions",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -203,15 +294,15 @@ export default async function Header() {
|
||||
child: [
|
||||
{
|
||||
title: "What To Be Done Prior",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Next Steps (keys, utilities, etc)",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Common Questions",
|
||||
href: "/#",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -220,10 +311,10 @@ export default async function Header() {
|
||||
</HeaderDropdownGroup>
|
||||
<HeaderDropdownGroup className="flex! pr-4!">
|
||||
<div className="flex flex-col self-end!">
|
||||
<a className="button button-secondary" href="/">
|
||||
<a className="button button-secondary" href="#">
|
||||
FAQ
|
||||
</a>
|
||||
<a className="button button-primary mt-2!" href="/">
|
||||
<a className="button button-primary mt-2!" href="#">
|
||||
APPLY NOW
|
||||
</a>
|
||||
</div>
|
||||
@ -237,181 +328,9 @@ export default async function Header() {
|
||||
</li>
|
||||
<li className="rd-nav-item block lg:hidden!">
|
||||
<a className="rd-nav-link rd-nav-link-custom" href="/login">
|
||||
LOGIN
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
{/* <li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="#">
|
||||
Properties
|
||||
</a>
|
||||
|
||||
<ul className="rd-menu rd-navbar-dropdown">
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="properties-grid.html">
|
||||
Properties Grid
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="properties-grid-2.html">
|
||||
Properties Grid 2
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="properties-list.html">
|
||||
Properties List
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="submit-property.html">
|
||||
Submit property
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="single-property.html">
|
||||
Single Property
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="about-us.html">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="blog.html">
|
||||
Blog
|
||||
</a>
|
||||
|
||||
<ul className="rd-menu rd-navbar-dropdown">
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="blog-post.html">
|
||||
Blog post
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="#">
|
||||
Pages
|
||||
</a>
|
||||
<HeaderDropdown>
|
||||
<HeaderDropdownGroup>
|
||||
<div>
|
||||
<form>
|
||||
<div className="form-wrap">
|
||||
<input type="text" id="search" className="form-input" />
|
||||
<label className="form-label" htmlFor="search">
|
||||
Search
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<HeaderFeaturedHomes />
|
||||
</div>
|
||||
</HeaderDropdownGroup>
|
||||
<HeaderDropdownGroup title="Future Residents">
|
||||
<HeaderDropdownMenu
|
||||
list={[
|
||||
{
|
||||
title: "Our Rentals",
|
||||
href: "/#",
|
||||
},
|
||||
{
|
||||
title: "Application Process",
|
||||
child: [
|
||||
{
|
||||
title: "Before You Apply",
|
||||
href: "/#",
|
||||
},
|
||||
{
|
||||
title: "Rental Criteria",
|
||||
href: "/#",
|
||||
},
|
||||
{
|
||||
title: "Before You Apply",
|
||||
href: "/#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</HeaderDropdownGroup>
|
||||
<HeaderDropdownGroup title="Current Residents">
|
||||
<HeaderDropdownMenu
|
||||
list={[
|
||||
{
|
||||
title: "Moving In",
|
||||
child: [
|
||||
{
|
||||
title: "What To Be Done Prior",
|
||||
href: "/#",
|
||||
},
|
||||
{
|
||||
title: "Next Steps (keys, utilities, etc)",
|
||||
href: "/#",
|
||||
},
|
||||
{
|
||||
title: "Common Questions",
|
||||
href: "/#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Welcome home",
|
||||
child: [
|
||||
{
|
||||
title: "Payment",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Utilities",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
title: "Maintenance",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Moving Out",
|
||||
child: [
|
||||
{
|
||||
title: "What To Be Done Prior",
|
||||
href: "/#",
|
||||
},
|
||||
{
|
||||
title: "Next Steps (keys, utilities, etc)",
|
||||
href: "/#",
|
||||
},
|
||||
{
|
||||
title: "Common Questions",
|
||||
href: "/#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</HeaderDropdownGroup>
|
||||
<HeaderDropdownGroup className="flex! pr-4!">
|
||||
<div className="flex flex-col self-end!">
|
||||
<a className="button button-secondary" href="/">
|
||||
FAQ
|
||||
</a>
|
||||
<a className="button button-primary mt-2!" href="/">
|
||||
APPLY NOW
|
||||
</a>
|
||||
</div>
|
||||
</HeaderDropdownGroup>
|
||||
</HeaderDropdown>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="contact-us.html">
|
||||
Contact Us
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,12 @@ import { createSlug } from "@/utils/general";
|
||||
import { cn } from "@/utils/style";
|
||||
import { FC, Fragment, PropsWithChildren } from "react";
|
||||
|
||||
export const HeaderDropdown: FC<PropsWithChildren> = ({ children }) => {
|
||||
return <ul className="rd-menu rd-navbar-megamenu">{children}</ul>;
|
||||
type HeaderDropdownProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const HeaderDropdown: FC<PropsWithChildren<HeaderDropdownProps>> = ({ children, className }) => {
|
||||
return <ul className={cn("rd-menu rd-navbar-megamenu", className)}>{children}</ul>;
|
||||
};
|
||||
|
||||
type HeaderDropdownGroupProps = {
|
||||
@ -24,7 +28,7 @@ export const HeaderDropdownGroup: FC<PropsWithChildren<HeaderDropdownGroupProps>
|
||||
);
|
||||
};
|
||||
|
||||
type HeaderDropdownMenuItem = { title: string; href: string };
|
||||
type HeaderDropdownMenuItem = { title: string; href?: string };
|
||||
type HeaderDropdownMenuItemWithChild = { title: string; child: HeaderDropdownMenuItem[] };
|
||||
|
||||
type HeaderDropdownMenuProps = {
|
||||
@ -37,13 +41,14 @@ export const HeaderDropdownMenu: FC<HeaderDropdownMenuProps> = ({ list = [] }) =
|
||||
{list.map((item, idx) => {
|
||||
const collapseId = createSlug(`collapse-${item.title}-${idx}`);
|
||||
const hasChild = "child" in item;
|
||||
const hrefClass = hasChild || !!item?.href ? "text-colorLinkText1! hover:text-colorLinkText2!" : "";
|
||||
|
||||
return (
|
||||
<Fragment key={idx}>
|
||||
{hasChild && (
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a
|
||||
className="rd-megamenu-list-link cursor-pointer"
|
||||
className={`rd-megamenu-list-link cursor-pointer ${hrefClass}`}
|
||||
data-toggle="collapse"
|
||||
data-target={`#${collapseId}`}
|
||||
aria-controls={collapseId}
|
||||
@ -53,7 +58,7 @@ export const HeaderDropdownMenu: FC<HeaderDropdownMenuProps> = ({ list = [] }) =
|
||||
</a>
|
||||
<div className="pl-3 mt-2 space-y-2 collapse visible!" id={collapseId}>
|
||||
{item.child.map((itemChild, itemChildIdx) => (
|
||||
<a key={itemChildIdx} className="rd-megamenu-list-link" href={itemChild.href}>
|
||||
<a key={itemChildIdx} className={`rd-megamenu-list-link ${hrefClass}`} href={itemChild.href}>
|
||||
- {itemChild.title}
|
||||
</a>
|
||||
))}
|
||||
@ -63,7 +68,7 @@ export const HeaderDropdownMenu: FC<HeaderDropdownMenuProps> = ({ list = [] }) =
|
||||
|
||||
{!hasChild && (
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href={item.href}>
|
||||
<a className={`rd-megamenu-list-link ${hrefClass}`} href={item.href}>
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user