dynamic-realty/dynamic-realty-next
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: header UI styling

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-04-28 05:11:33 +07:00
parent 3d90019289
commit eb78e44f1c
3 changed files with 130 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(main)/globals.css
View File

@ -39,6 +39,8 @@
--color-colorBtnPrimaryText: var(--color-colorExt20); --color-colorBtnPrimaryText: var(--color-colorExt20);
--color-colorBtnSecondary: var(--color-colorExt50); --color-colorBtnSecondary: var(--color-colorExt50);
--color-colorBtnSecondaryText: var(--color-colorExt20); --color-colorBtnSecondaryText: var(--color-colorExt20);
--color-colorLinkText1: var(--color-colorExt30);
--color-colorLinkText2: var(--color-colorext40);
} }
@layer components { @layer components {

315
src/components/layouts/Header.tsx
View File

@ -1,18 +1,7 @@
import { headers } from "next/headers";
import HeaderFeaturedHomes from "./HeaderFeaturedHomes";
import { HeaderDropdown, HeaderDropdownGroup, HeaderDropdownMenu } from "./HeaderDropdown"; import { HeaderDropdown, HeaderDropdownGroup, HeaderDropdownMenu } from "./HeaderDropdown";
import HeaderFeaturedHomes from "./HeaderFeaturedHomes";
export default async function Header() { export default 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" : "";
};
return ( return (
<header className="section page-header"> <header className="section page-header">
<div className="rd-navbar-wrap"> <div className="rd-navbar-wrap">
@ -113,6 +102,108 @@ export default async function Header() {
<a className="rd-nav-link rd-nav-link-custom" href="#"> <a className="rd-nav-link rd-nav-link-custom" href="#">
Buying / Selling Buying / Selling
</a> </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>
<li className="rd-nav-item"> <li className="rd-nav-item">
<a className="rd-nav-link rd-nav-link-custom" href="#"> <a className="rd-nav-link rd-nav-link-custom" href="#">
@ -139,22 +230,22 @@ export default async function Header() {
list={[ list={[
{ {
title: "Our Rentals", title: "Our Rentals",
href: "/#", href: "#",
}, },
{ {
title: "Application Process", title: "Application Process",
child: [ child: [
{ {
title: "Before You Apply", title: "Before You Apply",
href: "/#", href: "#",
}, },
{ {
title: "Rental Criteria", title: "Rental Criteria",
href: "/#", href: "#",
}, },
{ {
title: "Before You Apply", title: "Before You Apply",
href: "/#", href: "#",
}, },
], ],
}, },
@ -169,15 +260,15 @@ export default async function Header() {
child: [ child: [
{ {
title: "What To Be Done Prior", title: "What To Be Done Prior",
href: "/#", href: "#",
}, },
{ {
title: "Next Steps (keys, utilities, etc)", title: "Next Steps (keys, utilities, etc)",
href: "/#", href: "#",
}, },
{ {
title: "Common Questions", title: "Common Questions",
href: "/#", href: "#",
}, },
], ],
}, },
@ -203,15 +294,15 @@ export default async function Header() {
child: [ child: [
{ {
title: "What To Be Done Prior", title: "What To Be Done Prior",
href: "/#", href: "#",
}, },
{ {
title: "Next Steps (keys, utilities, etc)", title: "Next Steps (keys, utilities, etc)",
href: "/#", href: "#",
}, },
{ {
title: "Common Questions", title: "Common Questions",
href: "/#", href: "#",
}, },
], ],
}, },
@ -220,10 +311,10 @@ export default async function Header() {
</HeaderDropdownGroup> </HeaderDropdownGroup>
<HeaderDropdownGroup className="flex! pr-4!"> <HeaderDropdownGroup className="flex! pr-4!">
<div className="flex flex-col self-end!"> <div className="flex flex-col self-end!">
<a className="button button-secondary" href="/"> <a className="button button-secondary" href="#">
FAQ FAQ
</a> </a>
<a className="button button-primary mt-2!" href="/"> <a className="button button-primary mt-2!" href="#">
APPLY NOW APPLY NOW
</a> </a>
</div> </div>
@ -237,181 +328,9 @@ export default async function Header() {
</li> </li>
<li className="rd-nav-item block lg:hidden!"> <li className="rd-nav-item block lg:hidden!">
<a className="rd-nav-link rd-nav-link-custom" href="/login"> <a className="rd-nav-link rd-nav-link-custom" href="/login">
LOGIN Login
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>

17
src/components/layouts/HeaderDropdown.tsx
View File

@ -2,8 +2,12 @@ import { createSlug } from "@/utils/general";
import { cn } from "@/utils/style"; import { cn } from "@/utils/style";
import { FC, Fragment, PropsWithChildren } from "react"; import { FC, Fragment, PropsWithChildren } from "react";
export const HeaderDropdown: FC<PropsWithChildren> = ({ children }) => { type HeaderDropdownProps = {
return <ul className="rd-menu rd-navbar-megamenu">{children}</ul>; className?: string;
};
export const HeaderDropdown: FC<PropsWithChildren<HeaderDropdownProps>> = ({ children, className }) => {
return <ul className={cn("rd-menu rd-navbar-megamenu", className)}>{children}</ul>;
}; };
type HeaderDropdownGroupProps = { 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 HeaderDropdownMenuItemWithChild = { title: string; child: HeaderDropdownMenuItem[] };
type HeaderDropdownMenuProps = { type HeaderDropdownMenuProps = {
@ -37,13 +41,14 @@ export const HeaderDropdownMenu: FC<HeaderDropdownMenuProps> = ({ list = [] }) =
{list.map((item, idx) => { {list.map((item, idx) => {
const collapseId = createSlug(`collapse-${item.title}-${idx}`); const collapseId = createSlug(`collapse-${item.title}-${idx}`);
const hasChild = "child" in item; const hasChild = "child" in item;
const hrefClass = hasChild || !!item?.href ? "text-colorLinkText1! hover:text-colorLinkText2!" : "";
return ( return (
<Fragment key={idx}> <Fragment key={idx}>
{hasChild && ( {hasChild && (
<li className="rd-megamenu-list-item"> <li className="rd-megamenu-list-item">
<a <a
className="rd-megamenu-list-link cursor-pointer" className={`rd-megamenu-list-link cursor-pointer ${hrefClass}`}
data-toggle="collapse" data-toggle="collapse"
data-target={`#${collapseId}`} data-target={`#${collapseId}`}
aria-controls={collapseId} aria-controls={collapseId}
@ -53,7 +58,7 @@ export const HeaderDropdownMenu: FC<HeaderDropdownMenuProps> = ({ list = [] }) =
</a> </a>
<div className="pl-3 mt-2 space-y-2 collapse visible!" id={collapseId}> <div className="pl-3 mt-2 space-y-2 collapse visible!" id={collapseId}>
{item.child.map((itemChild, itemChildIdx) => ( {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} - {itemChild.title}
</a> </a>
))} ))}
@ -63,7 +68,7 @@ export const HeaderDropdownMenu: FC<HeaderDropdownMenuProps> = ({ list = [] }) =
{!hasChild && ( {!hasChild && (
<li className="rd-megamenu-list-item"> <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} {item.title}
</a> </a>
</li> </li>