From 28f45533bca60d00e0acc7fe37b3a7c86038522f Mon Sep 17 00:00:00 2001
From: danielvaldivv <dvaldiviesomerino.drvm@gmail.com>
Date: Fri, 10 Dec 2021 12:11:44 -0500
Subject: [PATCH 1/7] feature-13: added react-router-dom like devDependencies

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 7574533..5ba72fd 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "prettier": "2.4.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-router-dom": "^6.0.2",
     "styled-components": "^5.3.3",
     "tsconfig-paths-webpack-plugin": "3.5.1",
     "typescript": "4.4.4",

From d180bb394de3b65610c4c0d05eac756ad66ef63a Mon Sep 17 00:00:00 2001
From: danielvaldivv <dvaldiviesomerino.drvm@gmail.com>
Date: Fri, 10 Dec 2021 12:16:10 -0500
Subject: [PATCH 2/7] feature-13: added Link wrapping GetHired Logo into Header
 component

---
 packages/components/src/Header/Header.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/Header/Header.js b/packages/components/src/Header/Header.js
index 3a88bed..7f778bb 100644
--- a/packages/components/src/Header/Header.js
+++ b/packages/components/src/Header/Header.js
@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 
+import { Link } from 'react-router-dom';
+
 import { Button, Container } from '@mui/material';
 
 import { Logotype } from '@master-c8/commons';
@@ -10,7 +12,9 @@ const Header = ({ onClickLogin, onClickSignup, isLogged, children }) => {
   return (
     <HeaderContent>
       <Container>
-        <Logotype width={140} />
+        <Link>
+          <Logotype width={140} />
+        </Link>
         {!isLogged && (
           <BtnGroup>
             <Button variant="outlined" size="large" onClick={onClickLogin} type="button">

From d8eeae9890d1338f8bf533e9fc948d11a57d0973 Mon Sep 17 00:00:00 2001
From: Yadurani Lopez <yadu-lopez@hotmail.com>
Date: Mon, 13 Dec 2021 17:06:58 -0500
Subject: [PATCH 3/7] feat: changes in theme and header

---
 .eslintrc.js                                  | 33 ++++++++-----------
 packages/components/package.json              |  2 +-
 .../components/src/Header/Header.styles.js    |  5 ++-
 packages/theme/package.json                   |  2 +-
 packages/theme/src/theme/theme.js             | 11 ++++---
 5 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6ac8438..5925128 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,7 +6,7 @@ module.exports = {
     browser: true,
     es2021: true,
     node: true,
-    'jest/globals': true
+    'jest/globals': true,
   },
   extends: [
     'plugin:react/recommended',
@@ -19,12 +19,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 7,
   },
-  plugins: [
-    'react',
-    '@typescript-eslint',
-    'jest',
-    'testing-library'
-  ],
+  plugins: ['react', '@typescript-eslint', 'jest', 'testing-library'],
   rules: {
     '@typescript-eslint/dot-notation': 'off',
     '@typescript-eslint/no-implied-eval': 'off',
@@ -34,10 +29,10 @@ module.exports = {
     'max-len': ['error', { code: 200, ignoreTemplateLiterals: true, ignoreStrings: true }],
     'import/no-extraneous-dependencies': 'off',
     'react/jsx-filename-extension': 'off',
-    'semi': 'error',
+    semi: 'error',
     'object-curly-spacing': 'error',
-    'indent': ['error', 2],
-    'quotes': ['error', 'single', { 'allowTemplateLiterals': true, 'avoidEscape': true }],
+    indent: ['error', 2],
+    quotes: ['error', 'single', { allowTemplateLiterals: true, avoidEscape: true }],
     'space-before-blocks': 'error',
     'no-param-reassign': 'off',
     'consistent-this': ['error', 'self'],
@@ -98,18 +93,18 @@ module.exports = {
       },
     },
     {
-      'files': ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
-      'extends': ['plugin:testing-library/react'],
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react'],
       rules: {
         'testing-library/prefer-screen-queries': 'off',
-        'testing-library/no-node-access': 'off'
-      }
+        'testing-library/no-node-access': 'off',
+      },
     },
     {
       files: ['./packages/**/src/**/index.js', './packages/**/src/**/index.d.ts'],
-      'rules': {
-        'no-restricted-exports': 'off'
-      }
-    }
-  ]
+      rules: {
+        'no-restricted-exports': 'off',
+      },
+    },
+  ],
 };
diff --git a/packages/components/package.json b/packages/components/package.json
index 16ea624..0f93a91 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/commons",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": false,
   "description": "Platzi Master C8 commons",
   "main": "./dist/index",
diff --git a/packages/components/src/Header/Header.styles.js b/packages/components/src/Header/Header.styles.js
index 4e1e664..0d4f91e 100644
--- a/packages/components/src/Header/Header.styles.js
+++ b/packages/components/src/Header/Header.styles.js
@@ -9,7 +9,10 @@ export const HeaderContent = styled('header')(
     height: 80px;
     width: 100%;
     img {
-      width: 110px;
+      width: 160px;
+      @media (max-width: 560px) {
+        width: 110px;
+      }
     }
     .MuiContainer-root {
       align-items: center;
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 8745e43..378210d 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/theme",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
   "description": "Platzi Master C8 Theme",
   "main": "./dist/index",
diff --git a/packages/theme/src/theme/theme.js b/packages/theme/src/theme/theme.js
index 7caaa98..c0cf9c7 100644
--- a/packages/theme/src/theme/theme.js
+++ b/packages/theme/src/theme/theme.js
@@ -92,7 +92,10 @@ export const THEME = {
         root: {
           borderRadius: '6px',
           boxShadow: 'none',
-          textTransform: 'initial'
+          textTransform: 'initial',
+          '&.Mui-disabled': {
+            backgroundImage: 'none',
+          },
         },
         sizeSmall: {
           fontSize: '12px',
@@ -107,13 +110,13 @@ export const THEME = {
           padding: '11px 22px',
         },
         containedPrimary: {
-          background:
+          backgroundImage:
             'linear-gradient(90deg, rgba(95, 100, 255, 0.7) 0%, rgba(174, 78, 255, 0.85) 100%)',
         },
         outlinedPrimary: {
           color: COLORS.contrast1,
-          borderColor: COLORS.contrast1
-        }
+          borderColor: COLORS.contrast1,
+        },
       },
     },
   },

From 545714eb9fb001fafe8897e467fb2374228919b9 Mon Sep 17 00:00:00 2001
From: Yadurani Lopez <yadu-lopez@hotmail.com>
Date: Mon, 13 Dec 2021 17:35:14 -0500
Subject: [PATCH 4/7] feat: add wrapper for react router dom

---
 .storybook/preview.js                    | 24 +++++++++++++++---------
 packages/components/package.json         |  2 +-
 packages/components/src/Header/Header.js |  6 ++++--
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 08fee47..7d193eb 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,7 +1,8 @@
 import { ThemeProvider } from 'emotion-theming';
-import { createTheme } from "@mui/material/styles";
+import { createTheme } from '@mui/material/styles';
 
 import { THEME } from '@master-c8/theme';
+import { BrowserRouter } from 'react-router-dom';
 
 const getHiredTheme = createTheme(THEME);
 
@@ -14,25 +15,30 @@ const getStyles = ({ __sb } = {}) => ({
   flexWrap: 'wrap',
   height: '100%',
   gap: '10px 30px',
-  alignItems: 'center'
-})
+  alignItems: 'center',
+});
 
 export const parameters = {
-  actions: { 
-    argTypesRegex: "^on[A-Z].*" 
+  actions: {
+    argTypesRegex: '^on[A-Z].*',
   },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
-  }
-}
+  },
+};
 
 export const decorators = [
+  (Story) => (
+    <BrowserRouter>
+      <Story />
+    </BrowserRouter>
+  ),
   (Story) => (
     <ThemeProvider theme={getHiredTheme}>
-      <Story/>
+      <Story />
     </ThemeProvider>
   ),
   (Story, { parameters }) => (
@@ -40,4 +46,4 @@ export const decorators = [
       <Story />
     </div>
   ),
-];
\ No newline at end of file
+];
diff --git a/packages/components/package.json b/packages/components/package.json
index 0f93a91..87a0008 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/commons",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
   "description": "Platzi Master C8 commons",
   "main": "./dist/index",
diff --git a/packages/components/src/Header/Header.js b/packages/components/src/Header/Header.js
index 7f778bb..85a9b46 100644
--- a/packages/components/src/Header/Header.js
+++ b/packages/components/src/Header/Header.js
@@ -8,11 +8,11 @@ import { Logotype } from '@master-c8/commons';
 
 import { HeaderContent, BtnGroup } from './Header.styles';
 
-const Header = ({ onClickLogin, onClickSignup, isLogged, children }) => {
+const Header = ({ onClickLogin, onClickSignup, isLogged, children, route }) => {
   return (
     <HeaderContent>
       <Container>
-        <Link>
+        <Link to={route}>
           <Logotype width={140} />
         </Link>
         {!isLogged && (
@@ -36,11 +36,13 @@ Header.propTypes = {
   isLogged: PropTypes.bool,
   onClickLogin: PropTypes.func.isRequired,
   onClickSignup: PropTypes.func.isRequired,
+  route: PropTypes.string,
 };
 
 Header.defaultProps = {
   isLogged: false,
   children: null,
+  route: '',
 };
 
 export default Header;

From cf340b10b5572effc2dddb1f30ce379f85000f89 Mon Sep 17 00:00:00 2001
From: Yadurani Lopez <yadurani.lopez@autodesk.com>
Date: Tue, 4 Jan 2022 15:49:35 -0500
Subject: [PATCH 5/7] feat: create header for cell job placement

---
 packages/components/package.json              |  6 +-
 .../components/src/Header/Header.stories.js   |  3 +
 packages/components/src/Header/HeaderJob.js   | 65 +++++++++++++++++++
 packages/components/src/Header/index.js       |  3 +-
 packages/components/src/index.js              |  1 +
 5 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 packages/components/src/Header/HeaderJob.js

diff --git a/packages/components/package.json b/packages/components/package.json
index 87a0008..94b152b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/commons",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "private": false,
   "description": "Platzi Master C8 commons",
   "main": "./dist/index",
@@ -45,8 +45,8 @@
     }
   },
   "dependencies": {
-    "@master-c8/theme": "0.1.3",
-    "@master-c8/icons": "0.1.0",
+    "@master-c8/theme": "0.1.9",
+    "@master-c8/icons": "0.1.2",
     "prop-types": "15.7.2"
   },
   "publishConfig": {
diff --git a/packages/components/src/Header/Header.stories.js b/packages/components/src/Header/Header.stories.js
index 86717a0..8f5ab0a 100644
--- a/packages/components/src/Header/Header.stories.js
+++ b/packages/components/src/Header/Header.stories.js
@@ -1,4 +1,5 @@
 import Header from './Header';
+import HeaderJob from './HeaderJob';
 
 export default {
   title: 'Design System/Commons/Header',
@@ -25,3 +26,5 @@ export const HeaderLogged = () => (
     <div>Children</div>
   </Header>
 );
+
+export const HeaderJobs = () => <HeaderJob />;
diff --git a/packages/components/src/Header/HeaderJob.js b/packages/components/src/Header/HeaderJob.js
new file mode 100644
index 0000000..7c32e90
--- /dev/null
+++ b/packages/components/src/Header/HeaderJob.js
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Avatar from '@mui/material/Avatar';
+
+import { Currency, BriefCase, Blog } from '@master-c8/icons';
+import { COLORS } from '@master-c8/theme';
+
+import Header from './Header';
+
+const HeaderJob = () => {
+  return (
+    <Header isLogged>
+      <MenuList sx={{ display: 'flex' }}>
+        <a
+          style={{ textDecoration: 'none' }}
+          href="https://platzi-master-c8.github.io/gethired-jobplacement-salaries-frontend/"
+        >
+          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
+            <ListItemIcon>
+              <Currency color="secondary" />
+            </ListItemIcon>
+            <Typography color="secondary" sx={{ fontSize: '13px' }}>
+              Salary Calculator
+            </Typography>
+          </MenuItem>
+        </a>
+        <a
+          style={{ textDecoration: 'none' }}
+          href="https://platzi-master-c8.github.io/gethired-jobplacement-ratings/"
+        >
+          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
+            <ListItemIcon sx={{ color: '#000' }}>
+              <Blog />
+            </ListItemIcon>
+            <Typography color="text" sx={{ fontSize: '13px', color: '#000' }}>
+              Raitings
+            </Typography>
+          </MenuItem>
+        </a>
+        <a
+          style={{ textDecoration: 'none' }}
+          href="https://platzi-master-c8.github.io/gethired-jobplacement-enterprise-Frontend/"
+        >
+          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
+            <ListItemIcon sx={{ color: '#000' }}>
+              <BriefCase />
+            </ListItemIcon>
+            <Typography color="text" sx={{ fontSize: '13px', color: '#000' }}>
+              Company
+            </Typography>
+          </MenuItem>
+        </a>
+        <MenuItem>
+          <Avatar sx={{ bgcolor: COLORS.secondary }}>J</Avatar>
+        </MenuItem>
+      </MenuList>
+    </Header>
+  );
+};
+
+export default HeaderJob;
diff --git a/packages/components/src/Header/index.js b/packages/components/src/Header/index.js
index ee33bb8..924205a 100644
--- a/packages/components/src/Header/index.js
+++ b/packages/components/src/Header/index.js
@@ -1 +1,2 @@
-export { default } from './Header';
\ No newline at end of file
+export { default } from './Header';
+export { default as HeaderJob } from './HeaderJob';
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 0929061..42e7fbb 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -1,2 +1,3 @@
 export { default as Logotype } from './Logotype';
 export { default as Header } from './Header';
+export { default as HeaderJob } from './Header/HeaderJob';

From f09953de31d7b96abb68087b6ccc26ba090c1148 Mon Sep 17 00:00:00 2001
From: Yadurani Lopez <yadurani.lopez@autodesk.com>
Date: Wed, 5 Jan 2022 23:04:20 -0500
Subject: [PATCH 6/7] feat: add new icon close

---
 packages/icons/package.json            |  2 +-
 packages/icons/src/Close/Close.d.ts    |  5 +++++
 packages/icons/src/Close/Close.js      | 12 ++++++++++++
 packages/icons/src/Close/Close.spec.js | 13 +++++++++++++
 packages/icons/src/Close/index.d.ts    |  2 ++
 packages/icons/src/Close/index.js      |  1 +
 packages/icons/src/index.d.ts          |  3 +++
 packages/icons/src/index.js            |  1 +
 8 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 packages/icons/src/Close/Close.d.ts
 create mode 100644 packages/icons/src/Close/Close.js
 create mode 100644 packages/icons/src/Close/Close.spec.js
 create mode 100644 packages/icons/src/Close/index.d.ts
 create mode 100644 packages/icons/src/Close/index.js

diff --git a/packages/icons/package.json b/packages/icons/package.json
index a93b187..2469226 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/icons",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "description": "Platzi Master C8 Icons",
   "main": "./dist/index",
diff --git a/packages/icons/src/Close/Close.d.ts b/packages/icons/src/Close/Close.d.ts
new file mode 100644
index 0000000..0859827
--- /dev/null
+++ b/packages/icons/src/Close/Close.d.ts
@@ -0,0 +1,5 @@
+import { HTMLProps } from 'react';
+
+export interface CloseProps extends HTMLProps<SVGAElement> {}
+
+export default function Close(props: CloseProps): JSX.Element;
diff --git a/packages/icons/src/Close/Close.js b/packages/icons/src/Close/Close.js
new file mode 100644
index 0000000..45f34a1
--- /dev/null
+++ b/packages/icons/src/Close/Close.js
@@ -0,0 +1,12 @@
+import { forwardRef } from 'react';
+import { SvgIcon } from '@mui/material';
+
+const Close = forwardRef(function Close(props, ref) {
+  return (
+    <SvgIcon {...props} {...ref}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </SvgIcon>
+  );
+});
+
+export default Close;
diff --git a/packages/icons/src/Close/Close.spec.js b/packages/icons/src/Close/Close.spec.js
new file mode 100644
index 0000000..30d60b1
--- /dev/null
+++ b/packages/icons/src/Close/Close.spec.js
@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import Close from './Close';
+
+describe('@icons/Close', () => {
+  it('Given a normal call it should render properly', () => {
+    // arrange
+    const { getByTitle } = render(<Close title="Close" />);
+    // act
+    const icon = getByTitle(/Close/i);
+    // assert
+    expect(icon).toBeInTheDocument();
+  });
+});
diff --git a/packages/icons/src/Close/index.d.ts b/packages/icons/src/Close/index.d.ts
new file mode 100644
index 0000000..0e2e4ac
--- /dev/null
+++ b/packages/icons/src/Close/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './Close';
+export * from './Close';
diff --git a/packages/icons/src/Close/index.js b/packages/icons/src/Close/index.js
new file mode 100644
index 0000000..d94eb84
--- /dev/null
+++ b/packages/icons/src/Close/index.js
@@ -0,0 +1 @@
+export { default } from './Close';
diff --git a/packages/icons/src/index.d.ts b/packages/icons/src/index.d.ts
index d580112..dd817de 100644
--- a/packages/icons/src/index.d.ts
+++ b/packages/icons/src/index.d.ts
@@ -39,3 +39,6 @@ export * from './Currency';
 
 export { default as Switch } from './Switch';
 export * from './Switch';
+
+export { default as Close } from './Close';
+export * from './Close';
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index a62c663..252e54c 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -12,3 +12,4 @@ export { default as ChevronUp } from './ChevronUp';
 export { default as ChevronDown } from './ChevronDown';
 export { default as Currency } from './Currency';
 export { default as Switch } from './Switch';
+export { default as Close } from './Close';

From 1a50989d33d908aa40d5a8fad3b9f929e6c641fd Mon Sep 17 00:00:00 2001
From: Yadurani Lopez <yadurani.lopez@autodesk.com>
Date: Wed, 5 Jan 2022 23:04:55 -0500
Subject: [PATCH 7/7] feat: add menu repsonsive

---
 packages/components/package.json              |   4 +-
 packages/components/src/Header/Header.js      |   4 +-
 .../components/src/Header/Header.styles.js    |  15 +++
 packages/components/src/Header/HeaderJob.js   | 121 +++++++++++-------
 4 files changed, 97 insertions(+), 47 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 94b152b..4f2b29b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/commons",
-  "version": "0.1.0",
+  "version": "0.1.8",
   "private": false,
   "description": "Platzi Master C8 commons",
   "main": "./dist/index",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@master-c8/theme": "0.1.9",
-    "@master-c8/icons": "0.1.2",
+    "@master-c8/icons": "0.1.3",
     "prop-types": "15.7.2"
   },
   "publishConfig": {
diff --git a/packages/components/src/Header/Header.js b/packages/components/src/Header/Header.js
index 85a9b46..b9816fd 100644
--- a/packages/components/src/Header/Header.js
+++ b/packages/components/src/Header/Header.js
@@ -34,8 +34,8 @@ const Header = ({ onClickLogin, onClickSignup, isLogged, children, route }) => {
 Header.propTypes = {
   children: PropTypes.node,
   isLogged: PropTypes.bool,
-  onClickLogin: PropTypes.func.isRequired,
-  onClickSignup: PropTypes.func.isRequired,
+  onClickLogin: PropTypes.func,
+  onClickSignup: PropTypes.func,
   route: PropTypes.string,
 };
 
diff --git a/packages/components/src/Header/Header.styles.js b/packages/components/src/Header/Header.styles.js
index 0d4f91e..7576d06 100644
--- a/packages/components/src/Header/Header.styles.js
+++ b/packages/components/src/Header/Header.styles.js
@@ -29,3 +29,18 @@ export const BtnGroup = styled('div')`
     display: none;
   }
 `;
+
+export const WrapperMenu = styled('div')`
+  @media (max-width: 900px) {
+    transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
+    transition: transform ease 0.3s;
+    background: white;
+    position: fixed;
+    top: 81px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0 16px;
+    z-index: 2;
+  }
+`;
diff --git a/packages/components/src/Header/HeaderJob.js b/packages/components/src/Header/HeaderJob.js
index 7c32e90..75f7dac 100644
--- a/packages/components/src/Header/HeaderJob.js
+++ b/packages/components/src/Header/HeaderJob.js
@@ -1,63 +1,98 @@
-import React from 'react';
+import React, { useState } from 'react';
 
+import Link from '@mui/material/Link';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Avatar from '@mui/material/Avatar';
+import IconButton from '@mui/material/IconButton';
 
-import { Currency, BriefCase, Blog } from '@master-c8/icons';
+import { Currency, BriefCase, Blog, Menu, Close } from '@master-c8/icons';
 import { COLORS } from '@master-c8/theme';
 
 import Header from './Header';
 
+import { WrapperMenu } from './Header.styles';
+
 const HeaderJob = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => setOpen(!open);
+
   return (
     <Header isLogged>
-      <MenuList sx={{ display: 'flex' }}>
-        <a
-          style={{ textDecoration: 'none' }}
-          href="https://platzi-master-c8.github.io/gethired-jobplacement-salaries-frontend/"
-        >
-          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
-            <ListItemIcon>
-              <Currency color="secondary" />
-            </ListItemIcon>
-            <Typography color="secondary" sx={{ fontSize: '13px' }}>
-              Salary Calculator
-            </Typography>
+      <IconButton
+        aria-label="menu"
+        sx={{ display: { sm: 'inherit', md: 'none' } }}
+        onClick={handleOpen}
+      >
+        {!open ? <Menu color="secondary" size="large" /> : <Close color="secondary" size="large" />}
+      </IconButton>
+      <WrapperMenu open={open}>
+        <MenuList sx={{ display: { sm: 'initial', md: 'flex' } }}>
+          <MenuItem>
+            <Link
+              sx={{
+                flexDirection: { sm: 'row', md: 'column' },
+                alignItems: 'center',
+                gap: '5px',
+                display: 'flex',
+                textDecoration: 'none',
+              }}
+              href="https://platzi-master-c8.github.io/gethired-jobplacement-salaries-frontend/"
+            >
+              <ListItemIcon>
+                <Currency color="secondary" />
+              </ListItemIcon>
+              <Typography color="secondary" sx={{ fontSize: { sm: '16px', md: '13px' } }}>
+                Salary Calculator
+              </Typography>
+            </Link>
+          </MenuItem>
+          <MenuItem>
+            <Link
+              sx={{
+                flexDirection: { sm: 'row', md: 'column' },
+                alignItems: 'center',
+                gap: '5px',
+                display: 'flex',
+                textDecoration: 'none',
+              }}
+              href="https://platzi-master-c8.github.io/gethired-jobplacement-ratings/"
+            >
+              <ListItemIcon sx={{ color: '#000' }}>
+                <Blog />
+              </ListItemIcon>
+              <Typography color="text" sx={{ fontSize: { sm: '16px', md: '13px' }, color: '#000' }}>
+                Raitings
+              </Typography>
+            </Link>
           </MenuItem>
-        </a>
-        <a
-          style={{ textDecoration: 'none' }}
-          href="https://platzi-master-c8.github.io/gethired-jobplacement-ratings/"
-        >
-          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
-            <ListItemIcon sx={{ color: '#000' }}>
-              <Blog />
-            </ListItemIcon>
-            <Typography color="text" sx={{ fontSize: '13px', color: '#000' }}>
-              Raitings
-            </Typography>
+          <MenuItem>
+            <Link
+              sx={{
+                flexDirection: { sm: 'row', md: 'column' },
+                alignItems: 'center',
+                gap: '5px',
+                display: 'flex',
+                textDecoration: 'none',
+              }}
+              href="https://platzi-master-c8.github.io/gethired-jobplacement-enterprise-Frontend/"
+            >
+              <ListItemIcon sx={{ color: '#000' }}>
+                <BriefCase />
+              </ListItemIcon>
+              <Typography color="text" sx={{ fontSize: { sm: '16px', md: '13px' }, color: '#000' }}>
+                Company
+              </Typography>
+            </Link>
           </MenuItem>
-        </a>
-        <a
-          style={{ textDecoration: 'none' }}
-          href="https://platzi-master-c8.github.io/gethired-jobplacement-enterprise-Frontend/"
-        >
-          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
-            <ListItemIcon sx={{ color: '#000' }}>
-              <BriefCase />
-            </ListItemIcon>
-            <Typography color="text" sx={{ fontSize: '13px', color: '#000' }}>
-              Company
-            </Typography>
+          <MenuItem sx={{ display: { xs: 'none', md: 'initial' } }}>
+            <Avatar sx={{ bgcolor: COLORS.secondary }}>J</Avatar>
           </MenuItem>
-        </a>
-        <MenuItem>
-          <Avatar sx={{ bgcolor: COLORS.secondary }}>J</Avatar>
-        </MenuItem>
-      </MenuList>
+        </MenuList>
+      </WrapperMenu>
     </Header>
   );
 };