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

Improved on responsiveness for the header #5

Merged
ameye merged 1 commits from added-assets-and-new-folders into master 2024-03-06 16:32:09 +00:00
Conversation 0 Commits 1 Files Changed 6
+86 -41
6 changed files with 86 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
-1
View File
@@ -1,7 +1,6 @@
.btn-primary {
background: #5A2C82;
color: #FFFFFF;
padding: 6px 10px;
display: block;
text-decoration: none;
font-weight: 500;
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>
src/components/Header/TopHeader.tsx
+26 -9
View File
@@ -3,19 +3,36 @@ import styles from "./header.module.css";
const TopHeader = () => {
return (
<div className={styles.top_header}>
<div className="container flex justify-between w-full text-white font-medium">
<ul className="flex gap-8 items-center px-4">
{top_header_data.map(({ id, name }) => (
<li key={id}>{name}</li>
<>
<div className="flex flex-col sm:hidden bg-[#5c2684]">
<ul className="flex flex-col justify-center items-center py-[0.4rem] text-[13px] font-light">
{["Open An Account", "Internet Banking", "Contact Us"].map((text) => (
<li key={text}>
<a href="#" className={`p-[10px] cursor-pointer text-white`}>
{text}
</a>
</li>
))}
</ul>
<div className="flex gap-2">
<p className="uppercase">Today's Share price:</p>
<span className="text-[#F8B51F]">$ 4.00</span>
</div>
<div className={styles.top_header}>
<div className="containerMode flex justify-between w-full text-white font-medium text-[11px] md:text-[13px]">
<ul className="flex items-center py-[0.4rem]">
{top_header_data.map(({ id, name }) => (
<li key={id}>
<a href="#" className={`py-[11px] px-[15px]`}>
{name}
</a>
</li>
))}
</ul>
<div className="hidden sm:flex gap-2 items-center bg-[#74449E] px-2 text-[11px] md:text-[13px]">
<p className="uppercase">Today's Share price:</p>
<span className="text-[#F8B51F] text-base md:text-lg">$ 4.00</span>
</div>
</div>
</div>
</div>
</>
);
};
src/components/Header/header.module.css
+1 -1
View File
@@ -1,7 +1,7 @@
.top_header{
background: url(../../assets/images/topbar_back.jpg) no-repeat;
background-size: cover;
height: 2.535rem;
/* padding: 0.4rem 0; */
display: flex;
align-items: center;
justify-content: center;
src/components/shared/Button.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ type ButtonProps = {
};
const Button = ({ text, className }: ButtonProps) => {
return <button className={`btn-primary uppercase text-[13px] ${className}`}>{text}</button>;
return <button className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}>{text}</button>;
};
export default Button;
src/index.css
+17 -1
View File
@@ -1,3 +1,19 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
body {
line-height: 1.42857143;
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
@layer components {
.containerMode {
@apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px];
}
}