DigiFi/digifi-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Improved on responsivness for the header

Browse Source
This commit was merged in pull request #5.
This commit is contained in:
Ebube
2024-03-06 13:10:22 +01:00
parent af0faf1741
commit 23bcc46f3e
6 changed files with 86 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/Header.tsx
+41 -28
View File
@@ -4,40 +4,53 @@ import Button from "../shared/Button";
import { lowerMenuItems } from "../../utils/data";
const Header = () => {
const [searchValue, setSearchValue] = useState<string>("");
const [searchValue, setSearchValue] = useState("");
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
setSearchValue(e.target.value);
};
return (
<div className="relative my-2 items-center justify-center flex">
<div className="container px-8 flex justify-between">
<img src={Logo} alt="" />
{/* Right Part of the navbar */}
<div className="flex flex-col justify-between items-end">
<ul className={`flex gap-4 items-center`}>
<li>
<a href="#">
<Button className="btn-active" text="Open An Account" />
</a>
</li>
<li>
<a href="#">
<Button text="Internet Banking" />
</a>
</li>
<li>
<a href="#">
<Button text="Contact Us" />
</a>
</li>
<li>
<div className="relative my-2 flex items-center justify-center">
<div className="containerMode flex justify-between gap-1 xl:gap-8">
<img
src={Logo}
alt="Logo"
className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]"
/>
<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>
<ul className="flex gap-4 items-center">
<div className="flex lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-6 h-6"
>
<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) => (
<li
key={item.id}
@@ -63,7 +76,7 @@ const SearchInput = ({
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
}) => {
return (
<div className="flex items-center border border-[#5A2C82] overflow-hidden">
<div className="flex items-center border border-[#5A2C82] overflow-hidden w-full">
<input
type="text"
value={value}
@@ -73,7 +86,7 @@ const SearchInput = ({
/>
<button
type="button"
className="flex items-center justify-center bg-transparent text-[#5A2C82] p-2"
className="flex items-center justify-center bg-transparent text-[#5A2C82] py-[4px] px-[12px]"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -86,7 +99,7 @@ const SearchInput = ({
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
/>
</svg>
</button>