Navbar React js

I made a navbar with Sass that is responsive and looks good on both desktop and mobile devices. This is what it looks like on a desktop screen:

And this is what it looks like on a small screen:

The navbar is in a component called Header because the nav tag is inside a header. The Header is in App.js:

The logo, useState, Link and header.scss are imported in Header.js:

I used the keyboard on the screen and on my phone because my phone is connected to a PC. I write code on my phone because it's way easier than typing on a keyboard. In this way you can turn on your computer in the morning and code with just a phone wherever you are. I think it's a good idea to unplug it at the end of the day.
I try to avoid using divs but I needed them to style it. There's a div that's always on top and an unordered list for the hamburger menu inside the nav element:

The header has its position set to sticky so that when you scroll down it stays at the same place. The logo, search bar and the button that opens the menu are in the class named "top-nav":

&#8811 is an arrow. HTML has so many symbols and emojis that are easy to use, you just have to copy their code. But I also used the "fa fa-bar" icon from Font awesome, which is probably not a good idea because it makes it slower. This is what the lighthouse report showed me:

The nav menu items are links in an unordered list. It's mobile first, so they're hidden by default:

I didn't want to use a div and spans for the hamburger menu because they're just basic containers and that's not good for screen readers. We should use buttons even if it's not very beautiful. And we should even avoid using icons and use descriptive words instead. Many different people will try to figure out what's going on and some might not have much experience. When I was a kid a lot of sites seemed to be very confusing.
The function showHam toggles the class named "hidden" and the if-else block removes one icon and adds another one depending on what the user should see at this point. It uses the variable hamClosed to change the icon:

The logo is avif, because I wanted to use a photo and they're tiny.
These variables are placed in _variables.scss so I can change all the colors real quick:

And _variables.scss is imported in header.scss:

"nav-desc" has two direct children - a div for the things that will always stay on top (the logo, search bar and hamburger menu) and an unordered list with links for the menu. They stack on top of each other on small screens because "nav-desc" has a "display: flex" and "flex-direction" is set to "column". Here's the styling:

This is the css for the button, the logo and Link inside "top-nav":

And also, the search bar, the submit button and the hover effect of the menu:

On big screens the button that opens the hamburger menu has a display property set to "none". The "flex-direction" property of the hamburger menu is set to row so they're placed horizontally.

Too much styling will make it slower. The users will want to see the content, not the styling, so I think it's a good idea to make a few elements a little different so that it looks good, without changing the others.