Hi! This is my navar code for my site. Can anyone tell me what I can do to optimize it as much as possible? In lightroom it worsened my performance score by as much as 30 points (I checked the page with and without navbar in lightroom). The most important thing is that it is responsive. Let me know if you want to see the .scss code.

"use client";
import React, { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import logo from '../../public/logoSimpler.png';
import menuIcon from '../../public/menu-icon.svg';
import styles from './navbar.module.scss';

const Navbar = () => {
  const [navbarState, setNavbarState] = useState(false);

  const navbarLinks = [
    { name: 'strona główna', path: '/' },
    { name: 'o nas', path: '/o-nas' },
    { name: 'kontakt', path: '/kontakt'},
    {name: 'blog', path: '/blog'}
  ];

  const toggleNavbarState = () => {
    if (window.innerWidth <= 768) {
      setNavbarState(prevState => !prevState);
    }
  };

  return (
    <>
      <nav className={`${styles.navbar} ${navbarState ? styles.enabled : ''}`}>
        <div>
          <Image
            src={logo}
            alt="logo"
            width={120}
            className={styles.logo}
          />
        </div>
        <div className={styles.linksHolder}>
          {navbarLinks.map(element => (
            <Link
              onClick={toggleNavbarState}
              className={styles.navbarLinks}
              key={element.path}
              href={element.path}
            >
              {element.name.toUpperCase()}
            </Link>
          ))}
        </div>
      </nav>
      <button
        type="button"
        onClick={toggleNavbarState}
        title="menu"
        className={styles.mobileNavButton}
      >
        <Image
          alt="menu"
          className={styles.mobileNavButtonIcon}
          width={50}
          src={menuIcon}
        />
      </button>
    </>
  );
};

export default Navbar;