Navigation Bar
We will now update our navigation bar to ensure that it adhere to the McMaster Digital Brand Standards and properly communicates to the user which buttons are clickable and which page they are currently on:
Create Navbar.module.css
In the styles
directory of your project, create a new file called Navbar.module.css
. This file will contain the CSS styles used for the links in our navigation bar. We will define the colors of the links in their active, non-active and hover states:
- Non-active links should be white and turn Heritage Gold when you hover over them.
- Active links should have a white background and the link text should be Heritage Maroon.
Add the following lines to Navbar.module.css
:
/* Specific styles for non-active navbar links */
.nonActive {
color: white;
}
/* Specific styles for active navbar links */
.active {
color: #7a003c;
background: white;
}
/* Specific styles when hover over active navbar links */
.active:hover {
color: #7a003c;
background: white;
}
Create Styled Buttons and Icon Buttons
We will now created styled buttons and icon buttons for use in our navigation bar.
Create a new directory called MacComponents
inside the components
directory. Create a new file in this directory called MacNavButton.tsx
and add the following code to it:
import {styled, useTheme} from '@mui/material/styles'
import Button from '@mui/material/Button'
import IconButton from '@mui/material/IconButton'
export const MacNavButton = styled(Button)(props => ({
// setting the navigation button behavior when hovering over them
':hover': {
// the background should be transparent when hovering over a navigation button
backgroundColor: "transparent",
// the text should be heritage gold (the secondary color in the theme)
color: useTheme().palette.secondary.main,
},
// changing the color of the ripple and setting to a light grey
'&& .MuiTouchRipple-child': {
backgroundColor: "#D6D6D6",
},
})) as typeof Button
export const MacIconNavButton = styled(IconButton)(props => ({
// setting the navigation icon button behavior when hovering over them
':hover': {
// the background should be transparent when hovering over a navigation icon button
backgroundColor: "transparent",
// the icon should be heritage gold (the secondary color in the theme)
color: useTheme().palette.secondary.main,
},
'&& .MuiTouchRipple-child': {
// changing the color of the ripple and setting to a light grey
backgroundColor: "#D6D6D6",
},
})) as typeof IconButton
We set the hover color to Heritage Fold and made the background transparent when hovering over the icon button. We also added a ripple affect to the buttons that appears when the user clicks on them.
Update Navbar.tsx
Open the components/Navbar/Navbar.tsx
file and add the following import statements:
import styles from '@/styles/NavBar.module.css'
import {MacIconNavButton, MacNavButton,} from '@/components/MacComponents/MacNavButton'
Next, we will add the McMaster logo to the left-hand side of the navigation bar. Add the following lines of code before the Typography
component containing the “MacApp” string:
<Box
component="img"
sx={{
height: 78.31,
width: 140,
display: 'flex'
}}
alt="McMaster Logo"
src="/assets/logo.png"
style={imgStyle}
/>
Your navigation bar will now look like this:
Update the Typography
component containing the “MacApp” string by changing the variant from h3
to h5
and defining the hover
behavior inside the sx
prop. The typography component should now look like this:
<Typography
variant="h3"
noWrap
component={Link}
href="/"
sx={{
mr: 2,
display: 'flex',
textDecoration: 'none',
color: 'inherit',
// changing the color of the text to heritage gold when hovering over it
"&:hover": {
color: useTheme().palette.secondary.main
}
}}
>
MacApp
</Typography>
Old “MacApp” Title | Styled “MacApp” Title |
---|---|
Try hovering over the “MacApp” title in your browser, the text should turn Heritage Gold to indicate that it is a clickable link as shown in the image below.
We will now update the page links in the navigation to change color when the user hovers over them and have an active indicator. Inspect the Box
component after the the Typography
component containing the “MacApp” string. Notice that the page links are rendered using the standard MUI Button
component. We will modify the page links to use the custom MacNavButton
component that we created earlier instead of the standard MUI Button
component as shown in the code snippet below:
<Box sx={{flexGrow: 1, display: 'flex'}}>
{pages.map(page => (
<MacNavButton
key={page[0]}
component={Link}
href={page[1]}
sx={{mx: 0.3, my: 2, color: 'white', display: 'block'}}
// if the current route equals the URL associated with the button,
// then use the active style. Otherwise, use the inactive style
className={
currentRoute === page[1]
? styles.active
: styles.nonActive
}
>
{page[0]}
</MacNavButton>
))}
</Box>
We also conditionally set the className
prop to display a white oval-shaped background on the button corresponding to the current active page.
Similarly, we will update the icon buttons in the navigation bar to use the aforementioned hover and active styles.
Locate the IconButton
component containing the <Brightness7Icon />
and <Brightness4Icon />
components and change it to a MacIconNavButton
component as show below:
<MacIconNavButton
sx={{ml: 1}}
color="inherit"
>
{theme.palette.mode === 'dark' ? (
<Brightness7Icon />
) : (
<Brightness4Icon />
)}
</MacIconNavButton>
Next, change the IconButton
component containing the <SettingsIcon />
component to a MacIconNavButton
controller and add the classNames
prop:
<MacIconNavButton
aria-label="settings"
color="inherit"
component={Link}
href="/settings"
className={
// if the current route equals '/settings',
// then use the active style. Otherwise, use the inactive style
currentRoute === '/settings'
? styles.active
: styles.nonActive
}
>
<SettingsIcon />
</MacIconNavButton>
The icon buttons in the navigation bar will now turn Heritage Gold when you hover over them. The settings page will also have an active indicator when you are on this page.