corrected footer and linked the click to apply
This commit is contained in:
Ebube
@@ -1,4 +1,4 @@
|
||||
import { useState, ChangeEvent } from "react";
|
||||
import { useState, ChangeEvent, FC } from "react";
|
||||
import Logo from "../../assets/icons/logo.svg";
|
||||
import Button from "../shared/Button";
|
||||
import { lowerMenuItems } from "../../utils/data";
|
||||
@@ -10,7 +10,15 @@ type LowerMenuItem = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
const Header = () => {
|
||||
type HiddenMenuItems = {
|
||||
hideSidebar?: boolean;
|
||||
hideMenu?: boolean;
|
||||
};
|
||||
|
||||
const Header: FC<HiddenMenuItems> = ({
|
||||
hideSidebar = false,
|
||||
hideMenu = false,
|
||||
}) => {
|
||||
const [searchValue, setSearchValue] = useState<string>("");
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
|
||||
|
||||
@@ -23,10 +31,11 @@ const Header = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative my-2 flex items-center justify-center">
|
||||
{isSidebarOpen && (
|
||||
<div className="relative my-2 py-2 flex items-center justify-center border-b-2 border-[#E3DEDA]">
|
||||
{!hideSidebar && (
|
||||
<Sidebar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
|
||||
)}
|
||||
|
||||
<div className="containerMode flex justify-between gap-1 xl:gap-8">
|
||||
<Link to="/">
|
||||
<img
|
||||
@@ -35,54 +44,62 @@ const Header = () => {
|
||||
className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]"
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
|
||||
<ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
|
||||
{["Open An Account", "Internet Banking", "Contact Us"].map(
|
||||
(text: string) => (
|
||||
<li key={text} className="hidden sm:flex">
|
||||
<a href="#">
|
||||
<Button
|
||||
className={text === "Open An Account" ? "btn-active" : ""}
|
||||
text={text}
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<li className="w-full lg:w-fit">
|
||||
<SearchInput onChange={handleSearchChange} value={searchValue} />
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex lg:hidden">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
onClick={toggleSidebar}
|
||||
className="w-6 h-6 stroke-[#A6368C]"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap">
|
||||
{lowerMenuItems.map((item: LowerMenuItem) => (
|
||||
<li
|
||||
key={item.id}
|
||||
className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
|
||||
>
|
||||
{item.name}
|
||||
|
||||
{!hideMenu && (
|
||||
<div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
|
||||
<ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
|
||||
{["Open An Account", "Internet Banking", "Contact Us"].map(
|
||||
(text: string) => (
|
||||
<li key={text} className="hidden sm:flex">
|
||||
<a href="#">
|
||||
<Button
|
||||
className={
|
||||
text === "Open An Account" ? "btn-active" : ""
|
||||
}
|
||||
text={text}
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<li className="w-full lg:w-fit">
|
||||
<SearchInput
|
||||
onChange={handleSearchChange}
|
||||
value={searchValue}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
<div className="flex lg:hidden">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
onClick={toggleSidebar}
|
||||
className="w-6 h-6 stroke-[#A6368C]"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap">
|
||||
{lowerMenuItems.map((item: LowerMenuItem) => (
|
||||
<li
|
||||
key={item.id}
|
||||
className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
|
||||
>
|
||||
{item.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
const Sidebar = ({
|
||||
toggleSidebar,
|
||||
isSidebarOpen
|
||||
isSidebarOpen,
|
||||
}: {
|
||||
toggleSidebar: () => void;
|
||||
isSidebarOpen: boolean;
|
||||
}) => {
|
||||
const isActive = isSidebarOpen ? "sidebar-close" : "sidebar-open";
|
||||
|
||||
return (
|
||||
<div className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
|
||||
// <div className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
|
||||
<div className={`${isActive} sidebar`}>
|
||||
{/* Sidebar content goes here */}
|
||||
<button onClick={toggleSidebar}>Close Sidebar</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar
|
||||
export default Sidebar;
|
||||
|
||||
Reference in New Issue
Block a user