Responsive header design

woobaik · Jun 24, 2020 · 573d304 · 573d304
1 parent e9cd868
commit 573d304
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 28 deletions.
diff --git a/src/components/layouts/header/Header.component.jsx b/src/components/layouts/header/Header.component.jsx
@@ -3,9 +3,10 @@ import { Link } from "react-router-dom"
 import "./Header.styles.scss"
 
 import MovieNavigation from "../../movies/movieNavBar/MovieNavigationBar.component"
-
 import MovieSearchBar from "../../movies/movieSearchBar/MovieSearchBar.component"
 
+import { GiHamburgerMenu } from "react-icons/gi"
+
 const Header = () => {
  const [scrollY, setScrollY] = useState(window.pageYOffset)
  const [visible, setVisible] = useState(true)
@@ -31,9 +32,10 @@ const Header = () => {
  <div className="logo-name">WHAT TO WATCH?</div>
  <div className="logo-pill"></div>
  </Link>
- <div className="header-search"></div>
+ <div className="header-burger">
+ <GiHamburgerMenu />
+ </div>
  </div>
-
  <MovieNavigation
  toggleSearch={() => setSearchVisible(!searchVisible)}
  />

diff --git a/src/components/layouts/header/Header.styles.scss b/src/components/layouts/header/Header.styles.scss
@@ -20,18 +20,19 @@
  font-family: "Work Sans", sans-serif;
  font-weight: bold;
  display: flex;
-
  align-items: center;
+ justify-content: space-around;
  top: 0;
  width: 100%;
 }
 
 .header-left {
- width: fit-content;
+ display: flex;
 }
+
 .logo-and-text {
  display: flex;
- padding: 1rem;
+ padding: 1rem 0rem 1rem 4rem;
 }
 
 .logo-name {
@@ -50,18 +51,6 @@
  -webkit-text-fill-color: transparent;
 }
 
-.logo-pill {
- background: linear-gradient(to right, rgb(45, 187, 207), rgb(8, 181, 226));
- border-radius: 10px;
-
- width: 70px;
- height: 25px;
-}
-
-.header-search {
- width: 45vw;
-}
-
 .user-authenticate {
  display: flex;
  align-items: center;
@@ -74,16 +63,6 @@
  color: white;
 }
 
-@media (max-width: 700px) {
- .logo-name {
- display: none;
- }
-
- .header-search {
- display: none;
- }
-}
-
 // custom bootstrap button
 
 .btn-outline-primary {
@@ -98,3 +77,13 @@
 .logo-and-text:hover {
  text-decoration: none;
 }
+
+@media (max-width: 700px) {
+ .header-burger {
+ color: white;
+ font-size: 2rem;
+ position: absolute;
+ top: 4px;
+ left: 20px;
+ }
+}
diff --git a/src/components/movies/movieNavBar/MovieNavigationBar.style.scss b/src/components/movies/movieNavBar/MovieNavigationBar.style.scss
@@ -67,3 +67,9 @@
  }
  }
 }
+
+@media (max-width: 700px) {
+ .Movie-navigation {
+ display: none;
+ }
+}