|
1 | | -import { Typography } from '@mui/material'; |
| 1 | +import { useState } from 'react'; |
2 | 2 | import { makeStyles } from '@mui/styles'; |
3 | 3 |
|
4 | 4 | const useStyles = makeStyles(theme => ({ |
5 | | - embeddedHeader: { |
6 | | - display: 'flex', |
7 | | - alignItems: 'center', |
8 | | - height: '64px', |
9 | | - padding: '0px 20px', |
10 | | - backgroundColor: theme.palette.primary.main, |
11 | | - color: theme.palette.primary.contrastText |
| 5 | + header: { |
| 6 | + backgroundColor: theme.headerNav.backgroundColor, |
| 7 | + borderBottom: `1px solid ${theme.palette.divider}`, |
| 8 | + padding: '1rem 0' |
12 | 9 | }, |
13 | 10 | embedTopIcon: { |
14 | 11 | width: '40px', |
15 | | - filter: 'invert(100%)' |
| 12 | + filter: 'var(--svg-color)' |
| 13 | + }, |
| 14 | + navContainer: { |
| 15 | + width: '90%', |
| 16 | + maxWidth: '1400px', |
| 17 | + margin: '0 auto', |
| 18 | + display: 'flex', |
| 19 | + alignItems: 'center', |
| 20 | + justifyContent: 'space-between', |
| 21 | + gap: '1.5rem' |
| 22 | + }, |
| 23 | + logo: { |
| 24 | + '& img': { |
| 25 | + height: '35px', |
| 26 | + width: 'auto', |
| 27 | + verticalAlign: 'middle' |
| 28 | + } |
| 29 | + }, |
| 30 | + |
| 31 | + navMenu: { |
| 32 | + flexGrow: 1, |
| 33 | + display: 'flex', |
| 34 | + justifyContent: 'space-between', |
| 35 | + alignItems: 'center', |
| 36 | + |
| 37 | + '@media (max-width: 768px)': { |
| 38 | + position: 'fixed', |
| 39 | + top: 0, |
| 40 | + right: '-100%', |
| 41 | + width: '80%', |
| 42 | + maxWidth: '320px', |
| 43 | + height: '100vh', |
| 44 | + backgroundColor: 'var(--utility-background-color)', |
| 45 | + boxShadow: '-5px 0 15px rgba(0,0,0,0.2)', |
| 46 | + flexDirection: 'column', |
| 47 | + justifyContent: 'center', |
| 48 | + gap: '3rem', |
| 49 | + transition: 'right 0.3s ease-in-out', |
| 50 | + zIndex: 1000 |
| 51 | + } |
| 52 | + }, |
| 53 | + navMenuActive: { |
| 54 | + '@media (max-width: 768px)': { |
| 55 | + right: 0 |
| 56 | + } |
| 57 | + }, |
| 58 | + navList: { |
| 59 | + display: 'flex', |
| 60 | + gap: '1.5rem', |
| 61 | + alignItems: 'center', |
| 62 | + listStyle: 'none', |
| 63 | + padding: 0, |
| 64 | + margin: 0, |
| 65 | + '& a': { |
| 66 | + textDecoration: 'none', |
| 67 | + color: theme.headerNav.navLinkColor, |
| 68 | + transition: 'color 0.3s ease', |
| 69 | + '&:hover': { |
| 70 | + color: theme.headerNav.navLinkHoverColor |
| 71 | + } |
| 72 | + }, |
| 73 | + '@media (max-width: 768px)': { |
| 74 | + display: 'none' |
| 75 | + } |
| 76 | + }, |
| 77 | + showNavListsOnMobile: { |
| 78 | + '$navMenuActive &': { |
| 79 | + '@media (max-width: 768px)': { |
| 80 | + display: 'flex', |
| 81 | + flexDirection: 'column', |
| 82 | + gap: '2rem', |
| 83 | + width: '100%', |
| 84 | + textAlign: 'center', |
| 85 | + '& a': { |
| 86 | + color: theme.palette.text.primary, |
| 87 | + '&:hover': { |
| 88 | + color: theme.palette.primary.main |
| 89 | + } |
| 90 | + } |
| 91 | + } |
| 92 | + } |
| 93 | + }, |
| 94 | + profileAvatar: { |
| 95 | + height: '32px', |
| 96 | + width: '32px', |
| 97 | + borderRadius: '50%' |
| 98 | + }, |
| 99 | + menuToggle: { |
| 100 | + display: 'none', |
| 101 | + background: 'none', |
| 102 | + border: 'none', |
| 103 | + cursor: 'pointer', |
| 104 | + zIndex: 1001, |
| 105 | + padding: 0, |
| 106 | + color: theme.headerNav.menuToggleColor, |
| 107 | + '@media (max-width: 768px)': { |
| 108 | + display: 'block' |
| 109 | + } |
16 | 110 | } |
17 | 111 | })); |
18 | | - |
19 | 112 | export default function Header() { |
20 | 113 | const classes = useStyles(); |
| 114 | + const [isMenuOpen, setMenuOpen] = useState(false); |
| 115 | + |
| 116 | + const toggleMenu = () => { |
| 117 | + setMenuOpen(!isMenuOpen); |
| 118 | + }; |
| 119 | + |
| 120 | + const navMenuClassName = `${classes.navMenu} ${isMenuOpen ? classes.navMenuActive : ''}`; |
| 121 | + const navListClassName = `${classes.navList} ${isMenuOpen ? classes.showNavListsOnMobile : ''}`; |
21 | 122 |
|
22 | 123 | return ( |
23 | | - <div className={classes.embeddedHeader}> |
24 | | - <Typography variant='h4'>{PCore.getEnvironmentInfo().getApplicationLabel()}</Typography> |
25 | | - |
26 | | - <img src='./assets/img/antenna.svg' className={classes.embedTopIcon} /> |
27 | | - </div> |
| 124 | + <header className={classes.header}> |
| 125 | + <nav className={classes.navContainer}> |
| 126 | + <a href='/' className={classes.logo}> |
| 127 | + <img src='./assets/img/MediaCoLogo.png' alt='MediaCo Logo' /> |
| 128 | + </a> |
| 129 | + |
| 130 | + <div className={navMenuClassName}> |
| 131 | + <ul className={navListClassName}> |
| 132 | + <li> |
| 133 | + <a href='/'>Mobile</a> |
| 134 | + </li> |
| 135 | + <li> |
| 136 | + <a href='/'>Internet</a> |
| 137 | + </li> |
| 138 | + <li> |
| 139 | + <a href='/'>Coverage</a> |
| 140 | + </li> |
| 141 | + <li> |
| 142 | + <a href='/'>Deals</a> |
| 143 | + </li> |
| 144 | + </ul> |
| 145 | + |
| 146 | + <ul className={navListClassName}> |
| 147 | + <li> |
| 148 | + <a href='/'>Find a store</a> |
| 149 | + </li> |
| 150 | + <li> |
| 151 | + <a href='/'>Contact and support</a> |
| 152 | + </li> |
| 153 | + <li> |
| 154 | + <a href='/' className='cart-link'> |
| 155 | + Cart |
| 156 | + </a> |
| 157 | + </li> |
| 158 | + <li> |
| 159 | + <a href='/' className='profile-link' aria-label='User Profile'> |
| 160 | + <img src='./assets/img/UserProfile.png' alt='User Profile' className={classes.profileAvatar} /> |
| 161 | + </a> |
| 162 | + </li> |
| 163 | + </ul> |
| 164 | + </div> |
| 165 | + <button type='button' className={classes.menuToggle} onClick={toggleMenu} aria-label='Open menu'> |
| 166 | + <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> |
| 167 | + <path d='M4 6H20M4 12H20M4 18H20' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' /> |
| 168 | + </svg> |
| 169 | + </button> |
| 170 | + </nav> |
| 171 | + </header> |
28 | 172 | ); |
29 | 173 | } |
0 commit comments