icynet-admin/components/common/Header/Header.tsx

import styles from './Header.module.scss';
import { CurrentUserDto } from '../../../lib/types/user-response.interface';
import { useEffect, useState } from 'react';
import userHasPrivileges from '../../../lib/utils/has-privileges';
import Link from 'next/link';
import { useRouter } from 'next/router';
import conditionalClass from '../../../lib/utils/conditional-class';

const navItems = [
  {
    title: 'Home',
    path: '/',
  },
  {
    path: '/users',
    title: 'Users',
    privileges: ['admin', 'admin:user'],
  },
  {
    path: '/oauth2',
    title: 'OAuth2',
    privileges: [['admin', 'admin:oauth2'], 'self:oauth2'],
  },
  {
    path: '/audit',
    title: 'Audit logs',
    privileges: ['admin', 'admin:audit'],
  },
  // {
  //   path: '/privileges',
  //   title: 'Privileges',
  //   privileges: ['admin', 'admin:user:privilege'],
  // },
  {
    path: '/documents',
    title: 'Documents',
    privileges: ['admin:document'],
  },
];

const useAvailableNavigation = (user?: CurrentUserDto) => {
  const [stateList, setStateList] = useState(
    Array.from({ length: navItems.length }, (_, i) => i === 0)
  );

  useEffect(() => {
    if (!user) {
      return;
    }

    let newList: boolean[] = [];
    navItems.forEach((item, index) => {
      newList[index] = item.privileges
        ? userHasPrivileges(user, ...item.privileges)
        : true;
    });
    setStateList(newList);
  }, [user]);

  return stateList;
};

export const Header = ({ user }: { user?: CurrentUserDto }) => {
  const router = useRouter();
  const privileges = useAvailableNavigation(user);
  return (
    <nav className={styles.nav}>
      <div className={styles.inner}>
        <ul>
          {navItems
            .filter((_, index) => privileges[index])
            .map((item) => (
              <li
                key={item.title}
                className={conditionalClass(
                  router.pathname === item.path,
                  styles.active
                )}
              >
                <Link href={item.path}>{item.title}</Link>
              </li>
            ))}
        </ul>
        <ul className={styles.alignRight}>
          <li>
            {user ? (
              <Link href={'/api/logout'}>Log out</Link>
            ) : (
              <Link href={'/api/login'}>Log in</Link>
            )}
          </li>
        </ul>
      </div>
    </nav>
  );
};