Protecting certain elements or a page using labels

if (!item.hidden) {
    return (
      <div key={item.path} className="text-white">
        {item.submenu ? (
          <>
            <button
              //Sub Menus
              onClick={toggleSubMenu}
              className={`flex flex-row items-center p-2 rounded-lg w-full justify-between hover:bg-white hover:text-black ${
                pathname.includes(item.path) ? 'bg-white text-black ' : ''
              }`}
            >
              <div className="flex flex-row space-x-4 items-center">
                {item.icon}
                <span className="font-semibold text-xl  flex">{item.title}</span>
              </div>

              <div className={`${subMenuOpen ? 'rotate-180' : ''} flex`}>
                <Icon icon="lucide:chevron-down" width="24" height="24" />
              </div>
            </button>

            {subMenuOpen && (
              <div className="my-2 ml-12 flex flex-col space-y-4">
                {item.subMenuItems?.map((subItem, idx) => {
                  return (
                    <Link
                      key={idx}
                      href={subItem.path}
                      className={`${
                        subItem.path === pathname ? 'font-bold' : ''
                      }`}
                    >
                      <span>{subItem.title}</span>
                    </Link>
                  );
                })}
              </div>
            )}
          </>
        ) : (
          //Menus
          <Link
            href={item.path}
            className={`flex flex-row space-x-4 items-center p-2 rounded-lg hover:bg-zinc-100 hover:text-black ${
              item.path === pathname ? 'bg-zinc-100 text-black' : ''
            }`}
          >
            {item.icon}
            <span className="font-semibold text-xl flex">{item.title}</span>
          </Link>
        )}
      </div>
    );
  }

import { Icon } from '@iconify/react';
import { SideNavItem } from './types';
import appwriteService from "@/appwrite/config";


const userLabel = appwriteService.getCurrentUserLabel();

export const SIDENAV_ITEMS: SideNavItem[] = [
  {
    title: 'Home',
    path: '/dashboard/home',
    icon: <Icon icon="lucide:home" width="24" height="24" />,
  },
  {
    title: 'Controls',
    path: '/dashboard/controls',
    icon: <Icon icon="lucide:folder" width="24" height="24" />,
    hidden: true,
  },
  {
    title: 'Messages',
    path: '/dashboard/messages',
    icon: <Icon icon="lucide:mail" width="24" height="24" />,
  },
  {
    title: 'Settings',
    path: '/dashboard/settings',
    icon: <Icon icon="lucide:settings" width="24" height="24" />,
    submenu: true,
    subMenuItems: [
      { title: 'Account', path: '/dashboard/settings/account' },
      { title: 'Privacy', path: '/dashboard/settings/privacy' },
    ],
  },