Merge pull request #59 from Purple-books-company/yuvaraj-dev

Navbar minor change
Purple-books-company · Jul 3, 2021 · 0be3a42 · 0be3a42
2 parents 435b803 + 9c8840b
commit 0be3a42
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 67 deletions.
diff --git a/src/components/utils/header/NavBar.js b/src/components/utils/header/NavBar.js
@@ -20,81 +20,81 @@ const NavBar = ({ func }) => {
     clearStorage();
     func();
   };
+
   let logged = localStorage.getItem("isLogged")
 
   return (
-    <div className="container-fluid sticky-top w-100 bg-light">
-      <HeaderNav expand="lg" bg="light" variant="light" fixed="top">
-        <Container>
-          <Nav.Link href="#" className="j">
-            {/* <HeaderNav.Toggle aria-controls="search-nav" />
+    <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">
-              <Search />
-            </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>
+          <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>
+
+            <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 ?
 
-            <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>
 
-                  <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>
-    </div>
   );
 };
 

diff --git a/src/styles/pages/header.js b/src/styles/pages/header.js
@@ -5,6 +5,12 @@ 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;
+  }
 `;
 
 export const BrandImg = styled.img`
@@ -34,8 +40,7 @@ export const NavLink = styled(Nav.Link)`
   color: #535252 !important;
   cursor: pointer;
   text-transform: uppercase;
-  border-bottom: 0.2rem solid;
-  border-bottom-color: white;
+  padding-top: 1.5em;
   ${(props) =>
     props.icon &&
     css`