From 6fa1d6d7f5dca45edbc12154e8571e22f75a4f68 Mon Sep 17 00:00:00 2001
From: Yuvaraj2111 <64225422+Yuvaraj2111@users.noreply.github.com>
Date: Mon, 5 Jul 2021 13:48:48 +0530
Subject: [PATCH] smashed the bug in navbar and responsive

---
 src/components/utils/header/NavBar.js | 133 +++++++++++++-------------
 src/styles/pages/header.js            |  14 +--
 2 files changed, 73 insertions(+), 74 deletions(-)

diff --git a/src/components/utils/header/NavBar.js b/src/components/utils/header/NavBar.js
index d73fa76..f2f124f 100644
--- a/src/components/utils/header/NavBar.js
+++ b/src/components/utils/header/NavBar.js
@@ -5,7 +5,7 @@ import {
   // CartNum,
   BrandImg,
 } from "../../../styles/pages/header";
-import { Nav, Container } from "react-bootstrap";
+import { Nav, Container, Navbar } from "react-bootstrap";
 import { HiOutlineShoppingCart, HiLogout } from "react-icons/hi";
 import logo from "../../../assets/images/logo.png";
 import { FiHeart } from "react-icons/fi";
@@ -24,77 +24,74 @@ const NavBar = ({ func }) => {
   let logged = localStorage.getItem("isLogged")
 
   return (
-    <HeaderNav expand="lg" bg="light" variant="light" fixed="top">
-      <Container className="bg-light">
-        <Nav.Link href="#" className="j">
-          {/* <HeaderNav.Toggle aria-controls="search-nav" />
-          <HeaderNav.Collapse id="search-nav">
-            <Search />
-          </HeaderNav.Collapse> */}
-          <BrandImg src={logo} alt="Purple Marts" />
-        </Nav.Link>
-        <HeaderNav.Toggle aria-controls="basic-navbar-nav" />
-        <HeaderNav.Collapse id="basic-navbar-nav">
-          <Nav className="d-lg-none d-inline" style={{ marginTop: '3em !important' }}>
-            <Search className="" />
-          </Nav>
-          <Nav className="me-auto ms-auto">
-            <NavLink href="/" color="#FF005C">
-              Home
-            </NavLink>
-            <NavLink href="/category" color={DarkShade}>
-              Category
-            </NavLink>
-            <NavLink href="/custom" color="#45EFFF">
-              custom products
-            </NavLink>
+    <div className="w-100">
+      <HeaderNav expand="lg" bg="light" variant="light" fixed="top">
+        <Container fluid className="bg-light">
+          <Nav.Link href="#" className="j">
+            <BrandImg src={logo} alt="Purple Marts" />
+          </Nav.Link>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="d-lg-none d-inline" style={{ marginTop: '3em !important' }}>
+              <Search className="" />
+            </Nav>
+            <Nav className="me-auto ms-auto">
+              <NavLink href="/" color="#FF005C">
+                Home
+              </NavLink>
+              <NavLink href="/category" color={DarkShade}>
+                Category
+              </NavLink>
+              <NavLink href="/custom" color="#45EFFF">
+                custom products
+              </NavLink>
 
-            <NavLink href="/profile/order" color="#EDEC17">
-              my orders
-            </NavLink>
-          </Nav>
+              <NavLink href="/profile/order" color="#EDEC17">
+                my orders
+              </NavLink>
+            </Nav>
 
-          <Nav className="mt-2 me-auto d-none d-lg-inline">
-            <Search />
-          </Nav>
+            <Nav className="mt-2 me-auto d-none d-lg-inline">
+              <Search />
+            </Nav>
 
-          <Nav className="ml-2">
-            <NavLink icon="true" href="/profile/info">
-              <br className="d-none d-lg-inline" />
-              <BiUser size="21" className="d-none d-lg-inline" />
-              <p> profile</p>
-            </NavLink>
-            <NavLink icon="true" id="wishlist" className="" href="/wishlist">
-              <br className="d-none d-lg-inline" />
-              <FiHeart size="21" className="d-none d-lg-inline" />
-              <p>wishlist</p>
-            </NavLink>
-            <NavLink icon="true" id="cart" href="/cart">
-              <br className="d-none d-lg-inline" />
-              <HiOutlineShoppingCart size="21" className="d-none d-lg-inline" />
-              {/* <CartNum id="cartnum">2</CartNum> */}
-              <p>cart</p>
-            </NavLink>
-            {
-              logged ?
-
-                <NavLink icon="true" onClick={handleLogOut}>
-                  <br className="d-none d-lg-inline" />
-                  <HiLogout size="21" className="d-none d-lg-inline" />
-                  <p>Logout</p>
-                </NavLink >
-                :
-                <NavLink href="/login" icon="true" color="#F9FF00">
-                  <br className="d-none d-lg-inline" />
-                  <HiLogout size="21" className="d-none d-lg-inline" />
-                  <p>Login</p>
-                </NavLink>
-            }
-          </Nav>
-        </HeaderNav.Collapse>
-      </Container>
-    </HeaderNav>
+            <Nav className="ml-2">
+              <NavLink icon="true" href="/profile/info">
+                <br className="d-none d-lg-inline" />
+                <BiUser size="21" className="d-none d-lg-inline" />
+                <p> profile</p>
+              </NavLink>
+              <NavLink icon="true" id="wishlist" className="" href="/wishlist">
+                <br className="d-none d-lg-inline" />
+                <FiHeart size="21" className="d-none d-lg-inline" />
+                <p>wishlist</p>
+              </NavLink>
+              <NavLink icon="true" id="cart" href="/cart">
+                <br className="d-none d-lg-inline" />
+                <HiOutlineShoppingCart size="21" className="d-none d-lg-inline" />
+                {/* <CartNum id="cartnum">2</CartNum> */}
+                <p>cart</p>
+              </NavLink>
+              {
+                logged ?
 
+                  <NavLink icon="true" onClick={handleLogOut}>
+                    <br className="d-none d-lg-inline" />
+                    <HiLogout size="21" className="d-none d-lg-inline" />
+                    <p>Logout</p>
+                  </NavLink >
+                  :
+                  <NavLink href="/login" icon="true" color="#F9FF00">
+                    <br className="d-none d-lg-inline" />
+                    <HiLogout size="21" className="d-none d-lg-inline" />
+                    <p>Login</p>
+                  </NavLink>
+              }
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+      </HeaderNav>
+    </div >
   );
 };
 
diff --git a/src/styles/pages/header.js b/src/styles/pages/header.js
index ec40fa9..5d611c1 100644
--- a/src/styles/pages/header.js
+++ b/src/styles/pages/header.js
@@ -5,16 +5,18 @@ import { Navbar, Nav } from "react-bootstrap";
 // Nav bar styles
 export const HeaderNav = styled(Navbar)`
   border-bottom: 0.1rem solid ${LightShade};
-  height:4.5em;
-  overflow:hidden;
-  @media(min-width:0) and (max-width:800px){
-    height:3rem;
-    overflow:inherit;
+  overflow: hidden;
+  height:5em;
+  @media(min-width:0) and (max-width:992px){
+    overflow:visible;
+  }
+  @media(min-width:992px){
+    padding: 1em;
+    padding-right:3em;
   }
 `;
 
 export const BrandImg = styled.img`
-  margin-left: -5em;
   height: 3.5rem;
   @media(min-width:0) and (max-width:800px){
     height:3rem;