Jelajahi Sumber

Add report link to menu in mobile view

poeti8 7 tahun lalu
induk
melakukan
4a417b5b35

+ 1 - 0
client/components/Header/Header.js

@@ -30,6 +30,7 @@ const LeftMenuWrapper = styled.div`
 
   @media only screen and (max-width: 488px) {
     flex-direction: column;
+    align-items: flex-start;
   }
 `;
 

+ 13 - 1
client/components/Header/HeaderRightMenu.js

@@ -18,6 +18,13 @@ const List = styled.ul`
   list-style: none;
 `;
 
+const ReportLink = styled.a`
+  display: none;
+  @media only screen and (max-width: 488px) {
+    display: block;
+  }
+`;
+
 const HeaderMenu = props => {
   const goTo = e => {
     e.preventDefault();
@@ -30,7 +37,7 @@ const HeaderMenu = props => {
   const login = !props.auth.isAuthenticated && (
     <HeaderMenuItem>
       <a href="/login" title="login / signup" onClick={goTo}>
-        <Button>Login / Signup</Button>
+        <Button>Login / Sign up</Button>
       </a>
     </HeaderMenuItem>
   );
@@ -50,6 +57,11 @@ const HeaderMenu = props => {
   );
   return (
     <List>
+      <HeaderMenuItem>
+        <ReportLink href="/report" title="Report" onClick={goTo}>
+          Report
+        </ReportLink>
+      </HeaderMenuItem>
       {logout}
       {settings}
       {login}