Fix responsive on Header

Roophee · Jun 13, 2021 · 19ffa82 · 19ffa82
1 parent 2b9d03b
commit 19ffa82
Show file tree

Hide file tree

Showing 9 changed files with 10,072 additions and 10,398 deletions.
diff --git a/src/components/BasicSearch/index.js b/src/components/BasicSearch/index.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import Link from '../Common/Link';
-import { QueryParamsContext } from '../../hoc/QueryStateProvider';
+import { useNewsState } from '../../hoc/QueryStateProvider';
 import { BasicSearchWrapper } from './style';
 
 const hoverColor = '#c62828';
 
 export default function BasicSearch() {
-  const { queryState, dispatch, setSubmitWasClicked } = React.useContext(QueryParamsContext);
+  const { queryState, dispatch, setSubmitWasClicked } = useNewsState();
   const { lang } = queryState;
+
   const onClickHandler = (event, paramValue) => {
     event.preventDefault();
     if (lang === 'default') {

diff --git a/src/components/BasicSearch/style.js b/src/components/BasicSearch/style.js
@@ -2,8 +2,13 @@ import styled from 'styled-components';
 import Flex from '../Common/FlexContainer';
 
 export const BasicSearchWrapper = styled(Flex)`
-  width: 70%;
+  width: 100%;
   margin: 0 auto 10px;
+
+  @media (min-width: 800px) {
+    width: 70%;
+  }
+
   ul,
   li {
     display: inline-block;
@@ -13,8 +18,13 @@ export const BasicSearchWrapper = styled(Flex)`
     display: flex;
     justify-content: space-evenly;
     align-items: center;
+    flex-wrap: wrap;
     width: 100%;
     font-weight: 500;
+
+    @media (min-width: 800px) {
+      flex-wrap: nowrap;
+    }
   }
   li {
     margin-right: 10px;

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -4,7 +4,7 @@ import Flex from '../Common/FlexContainer';
 import { StyledHeader } from './style';
 import HeaderNav from '../HeaderNav';
 
-export default function Header(props) {
+export default function Header() {
   return (
     <StyledHeader>
       <div />

diff --git a/src/components/Header/style.js b/src/components/Header/style.js
@@ -10,6 +10,18 @@ export const StyledHeader = styled.header`
 
   div,
   nav {
-    width: 33%;
+    width: 50%;
+
+    @media (min-width: 800px) {
+      width: 33%;
+    }
+  }
+
+  div:first-child {
+    display: none;
+
+    @media (min-width: 800px) {
+      width: 33%;
+    }
   }
 `;
diff --git a/src/components/HeaderNav/index.js b/src/components/HeaderNav/index.js
@@ -1,14 +1,13 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import Link from '../Common/Link';
 import { StyledHeaderNav } from './style';
 import UserDataItem from '../UserDataItem';
-import {QueryParamsContext} from "../../hoc/QueryStateProvider";
+import { useNewsState } from '../../hoc/QueryStateProvider';
 
 const hoverColor = '#c62828';
 
-
-export default function HeaderNav(props) {
-  const {setAboutPage, setContactsPage, setNewsInStorage} = useContext(QueryParamsContext);
+export default function HeaderNav() {
+  const { setAboutPage, setContactsPage, setNewsInStorage } = useNewsState();
   return (
     <StyledHeaderNav>
       <ul>
@@ -18,7 +17,7 @@ export default function HeaderNav(props) {
             hoverColor={hoverColor}
             onClick={e => {
               e.preventDefault();
-                setNewsInStorage(null)
+              setNewsInStorage(null);
               setAboutPage(true);
             }}>
             About

diff --git a/src/components/HeaderNav/style.js b/src/components/HeaderNav/style.js
@@ -4,7 +4,7 @@ export const StyledHeaderNav = styled.nav`
   font-size: 0.9rem;
   color: #c62828;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
 
   ul {
@@ -13,7 +13,15 @@ export const StyledHeaderNav = styled.nav`
 
     li {
       font-weight: 600;
-      margin-right: 15px;
+      margin-left: 5px;
+    }
+  }
+
+  @media (min-width: 800px) {
+    justify-content: center;
+
+    li {
+      margin-left: 15px;
     }
   }
 `;
diff --git a/src/components/Logo/index.js b/src/components/Logo/index.js
@@ -3,10 +3,15 @@ import styled from 'styled-components';
 import Link from '../Common/Link';
 
 const LocalLink = styled(Link)`
-  font-size: 2rem;
+  font-size: 1.6rem;
   font-family: 'Ubuntu Mono', monospace;
   font-weight: 700;
   color: #c62828;
+  
+  
+  @media (min-width: 800px) {
+    font-size: 2rem;
+  }
 `;
 
 export default function Logo() {

diff --git a/src/components/UserDataItem/index.js b/src/components/UserDataItem/index.js
@@ -3,6 +3,7 @@ import { localStorageGetItem, localStorageSetItem } from '../../utils/localStora
 import { LOGIN_STATUS } from '../../constants/globals';
 import Link from '../Common/Link';
 import LoginModal from '../LoginModal';
+import { useNewsState } from '../../hoc/QueryStateProvider';
 
 const hoverColor = '#c62828';
 
@@ -12,6 +13,8 @@ export default function UserDataItem() {
   );
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const { setNewsInStorage, newsStorage } = useNewsState();
+
   const handleOnclickLogin = useCallback(() => setIsModalOpen(prev => !prev), []);
 
   const handleSubmit = useCallback(() => {