From 23bcc46f3e9834db9aade4ae4ad78b7f279af112 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Wed, 6 Mar 2024 13:10:22 +0100
Subject: [PATCH] Improved on responsivness for the header

---
 src/App.css                             |  1 -
 src/components/Header/Header.tsx        | 69 +++++++++++++++----------
 src/components/Header/TopHeader.tsx     | 35 +++++++++----
 src/components/Header/header.module.css |  2 +-
 src/components/shared/Button.tsx        |  2 +-
 src/index.css                           | 18 ++++++-
 6 files changed, 86 insertions(+), 41 deletions(-)

diff --git a/src/App.css b/src/App.css
index 8b83cf1..1750e47 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,6 @@
 .btn-primary {
   background: #5A2C82;
   color: #FFFFFF;
-  padding: 6px 10px;
   display: block;
   text-decoration: none;
   font-weight: 500;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 225c2dc..0bb1add 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -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>
diff --git a/src/components/Header/TopHeader.tsx b/src/components/Header/TopHeader.tsx
index b6fc5e7..0f34c9e 100644
--- a/src/components/Header/TopHeader.tsx
+++ b/src/components/Header/TopHeader.tsx
@@ -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>
+    </>
   );
 };
 
diff --git a/src/components/Header/header.module.css b/src/components/Header/header.module.css
index f3f0e04..3da672e 100644
--- a/src/components/Header/header.module.css
+++ b/src/components/Header/header.module.css
@@ -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;
diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
index 54de6f9..3c22961 100644
--- a/src/components/shared/Button.tsx
+++ b/src/components/shared/Button.tsx
@@ -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;
diff --git a/src/index.css b/src/index.css
index bd6213e..8d31b54 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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;
\ No newline at end of file
+@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];
+  }
+}
\ No newline at end of file
-- 
2.34.1