Skip to content

Commit

Permalink
update the navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahmadhassoun366
ahmadhassoun366 committed Jan 23, 2024
1 parent 121c076 commit 57e0c06
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 25 deletions.
45 changes: 32 additions & 13 deletions src/layout/header/header.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,11 @@ export default function HeaderComponent() {

const navigation = [
{
label: 'Explore',
label: 'Transactions',
href: '#',
},
{
label: 'Blocks',
href: '#',
},
{
Expand Down Expand Up @@ -162,15 +166,26 @@ export default function HeaderComponent() {
<div className="hidden md:flex items-center gap-x-14 h-full">
<div className="h-full grid place-items-center">
<Link
href={ROUTES.root}
className={`navbar-link ${pathname === ROUTES.root ? 'active' : ''}`}
href={ROUTES.transactions}
className={`navbar-link ${
pathname === ROUTES.transactions ? 'active' : ''
}`}
>
Transactions
</Link>
</div>

<div className="h-full grid place-items-center">
<Link
href={ROUTES.blocks}
className={`navbar-link ${pathname === ROUTES.blocks ? 'active' : ''}`}
>
Explore
Blocks
</Link>
</div>

{/* dropdown */}
<div className="navbar-dropdown relative h-full grid place-items-center cursor-pointer">
{/* <div className="navbar-dropdown relative h-full grid place-items-center cursor-pointer">
<button className="text-sm font-medium text-agrey-900 dark:text-white flex items-center justify-center gap-x-2 ">
<h1>Blockchain</h1>
<i className="fa-lg far fa-angle-down mt-2"></i>
Expand All @@ -195,9 +210,7 @@ export default function HeaderComponent() {
))}
</ul>
</div>
</div>


</div> */}

{/* <Button className="secondary medium w-[106px]">Connect</Button> */}
<Button
Expand Down Expand Up @@ -243,7 +256,7 @@ export default function HeaderComponent() {

{/* Mobile navigation menu */}
{mobileNavOpen && (
<div className="fixed top-0 left-0 w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-72 p-4 mt-header space-y-6">
<div className="fixed top-0 left-0 w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-auto p-4 mt-header space-y-6">
{/* Search */}
<form onSubmit={handleSubmit} className="w-full lg:w-[800px]">
<div className="field">
Expand Down Expand Up @@ -298,13 +311,19 @@ export default function HeaderComponent() {
{/* links */}
<div className="space-y-2">
<Link
href={ROUTES.root}
href={ROUTES.transactions}
className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
>
<div>Explore</div>
<div>Transactions</div>
</Link>
<Link
href={ROUTES.blocks}
className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
>
<div>Blocks</div>
</Link>

<div>
{/* <div>
<button
className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 justify-between w-full"
onClick={toggleBlockchain}
Expand Down Expand Up @@ -334,7 +353,7 @@ export default function HeaderComponent() {
))}
</ul>
)}
</div>
</div> */}
</div>

{/* buttons */}
Expand Down
40 changes: 28 additions & 12 deletions src/layout/header/searchbar-header.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export default function SearchBarHeaderComponent() {
const { values, touched, dirty, errors, handleChange, handleBlur, handleSubmit } = formik;

return (
<nav className="dark:bg-abrandc-dark-blackish bg-white shadow ">
<nav className="dark:bg-abrandc-dark-blackish bg-white dark:drop-shadow-white drop-shadow">
<div className="container-2 mx-auto flex items-center justify-between h-[80px]">
{/* brand */}
<Link href={ROUTES.root} className="brand">
Expand All @@ -160,17 +160,27 @@ export default function SearchBarHeaderComponent() {

{/* desktop menu */}
<div className="hidden md:flex items-center gap-x-6 h-full">
<div className="h-full grid place-items-center">
<Link
href={ROUTES.transactions}
className={`navbar-link ${pathname === ROUTES.transactions ? 'active' : ''}`}
>
Transactions
</Link>
</div>

<div className="h-full grid place-items-center">
<Link
href={ROUTES.root}
className={`navbar-link ${pathname === ROUTES.root ? 'active' : ''}`}
href={ROUTES.blocks}
className={`navbar-link ${pathname === ROUTES.blocks ? 'active' : ''}`}
>
Explore
Blocks
</Link>
</div>


{/* dropdown */}
<div className="navbar-dropdown relative h-full grid place-items-center cursor-pointer">
{/* <div className="navbar-dropdown relative h-full grid place-items-center cursor-pointer">
<button className="text-sm font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 ">
<div>Blockchain</div>
<i className="fa-lg far fa-angle-down"></i>
Expand All @@ -195,7 +205,7 @@ export default function SearchBarHeaderComponent() {
))}
</ul>
</div>
</div>
</div> */}

<div>
<form onSubmit={handleSubmit} className="w-full lg:w-[325px]">
Expand Down Expand Up @@ -271,7 +281,7 @@ export default function SearchBarHeaderComponent() {

{/* Mobile navigation menu */}
{mobileNavOpen && (
<div className="fixed top-0 left-0 w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-50 p-4 mt-header space-y-6">
<div className="fixed top-0 left-0 w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-72 p-4 mt-header space-y-6">
{/* Search */}
<form onSubmit={handleSubmit} className="w-full lg:w-[800px]">
<div className="field">
Expand Down Expand Up @@ -304,13 +314,19 @@ export default function SearchBarHeaderComponent() {
{/* links */}
<div className="space-y-2">
<Link
href={ROUTES.root}
href={ROUTES.transactions}
className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
>
<div>Explore</div>
<div>Transactions</div>
</Link>

<div>
<Link
href={ROUTES.blocks}
className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
>
<div>Blocks</div>
</Link>

{/* <div>
<button
className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 justify-between w-full"
onClick={toggleBlockchain}
Expand Down Expand Up @@ -340,7 +356,7 @@ export default function SearchBarHeaderComponent() {
))}
</ul>
)}
</div>
</div> */}
</div>

{/* buttons */}
Expand Down

0 comments on commit 57e0c06

Please sign in to comment.