fix(header): add a header navigation on desktop

fix #16
ruddenchaux · Feb 12, 2022 · 2fcd7fd · 2fcd7fd
1 parent 687b9f0
commit 2fcd7fd
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 17 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,5 +4,8 @@
   "eslint.alwaysShowStatus": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/cypress/integration/layout.ts b/cypress/integration/layout.ts
@@ -38,6 +38,55 @@ context('Layout', () => {
     });
   });
 
+  describe('Header navigation', () => {
+    it('Not visible on mobile', () => {
+      cy.viewport('iphone-x');
+      cy.get('[data-cy=header-navigation]').should('not.exist');
+    });
+
+    it('Not visible on tablet', () => {
+      cy.viewport('ipad-2');
+      cy.get('[data-cy=header-navigation]').should('not.exist');
+    });
+
+    it('Visible on desktop', () => {
+      cy.viewport('macbook-16');
+      cy.get('[data-cy=header-navigation]').should('exist');
+    });
+
+    describe('Contains links', () => {
+      beforeEach(() => {
+        cy.viewport('macbook-16');
+      });
+
+      itemsMenu.forEach((item) => {
+        it(item.label, () => {
+          cy.get('[data-cy=header-navigation] [data-cy=header-navigation-item]').within(() => {
+            cy.contains(item.label);
+          });
+        });
+      });
+    });
+
+    describe('Navigate to routes', () => {
+      beforeEach(() => {
+        cy.viewport('macbook-16');
+      });
+
+      itemsMenu.forEach((item) => {
+        it(item.label, () => {
+          cy.get('[data-cy=header-navigation-item]').contains(item.label).click();
+
+          cy.get('[data-cy=header-navigation-item]').contains(item.label).parent().should('have.class', 'active');
+
+          cy.location().should((loc) => {
+            expect(loc.pathname).to.include(item.to);
+          });
+        });
+      });
+    });
+  });
+
   describe('Sidebar', () => {
     describe('Contains links', () => {
       before(() => {

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,27 +1,40 @@
-import { AppBar, Hidden, IconButton, makeStyles, Toolbar, Typography } from '@material-ui/core';
+import { AppBar, Button, Hidden, IconButton, makeStyles, Toolbar, Typography } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { useHeaderTitleSelector } from '../../hooks/store';
+import itemsMenu from '../../utils/itemsMenu';
 import Logo from '../Logo';
 
 // component style
-const useStyles = makeStyles((theme) => ({
-  appBar: {
-    backgroundColor: theme.palette.background.paper
-  },
-  title: {
-    flexGrow: 1,
-    marginLeft: theme.spacing(3),
-    backgroundColor: 'inherit',
-    [theme.breakpoints.down('sm')]: {
-      fontSize: '1.8rem'
+const useStyles = makeStyles((theme) => {
+  return {
+    appBar: {
+      backgroundColor: theme.palette.background.paper
     },
-    [theme.breakpoints.down('xs')]: {
-      fontSize: '1.2rem'
+    title: {
+      flexGrow: 1,
+      marginLeft: theme.spacing(3),
+      backgroundColor: 'inherit',
+      [theme.breakpoints.down('sm')]: {
+        fontSize: '1.8rem'
+      },
+      [theme.breakpoints.down('xs')]: {
+        fontSize: '1.2rem'
+      }
+    },
+    itemMenu: {
+      textDecoration: 'none',
+      '&.active': {
+        color: 'inherit',
+        backgroundColor: 'inherit',
+        '& .MuiButton-label': {
+          color: theme.palette.primary.main
+        }
+      }
     }
-  }
-}));
+  };
+});
 
 export default function Header({ openMenu }: { openMenu: React.Dispatch<React.SetStateAction<boolean>> }) {
   const classes = useStyles();
@@ -38,11 +51,27 @@ export default function Header({ openMenu }: { openMenu: React.Dispatch<React.Se
           Rick and Morty - {headerTitle}
         </Typography>
 
-        <Hidden smDown>
+        <Hidden smDown lgUp>
           <IconButton color="default" data-cy="button-menu" aria-label="open menu" onClick={() => openMenu(true)}>
             <MenuIcon />
           </IconButton>
         </Hidden>
+        <Hidden mdDown>
+          <div data-cy="header-navigation">
+            {itemsMenu.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                aria-label={item.label}
+                className={classes.itemMenu}
+                exact={item.exact}
+                data-cy="header-navigation-item"
+              >
+                <Button>{item.label}</Button>
+              </NavLink>
+            ))}
+          </div>
+        </Hidden>
       </Toolbar>
     </AppBar>
   );

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -55,7 +55,7 @@ export default function Layout() {
   return (
     <>
       <Header openMenu={setOpenMenu} />
-      <Hidden smDown>
+      <Hidden smDown lgUp>
         <Sidebar openMenu={openMenu} setOpenMenu={setOpenMenu} />
       </Hidden>
       <main className={classes.main}>