Add a side menu

The left sidebar is a part of the main layout, go to: component -> dumb -> SideMenu. This is a basic sidebar menu power by the menu component from Ant Design. Find out more here

This menu will be global to all pages that are using the main layout.

<Menu mode="inline"></Menu>

The <Menu> will encapsuled all Menu Items or SubMenu

<Menu mode="inline">
  <SubMenu icon={<AuditOutlined />} key="key" title={title}>
    <Menu.Item key="key_x">
      <Link href="/users">{usersTitle}</Link>
    </Menu.Item>
    <Menu.Item key="administration-access-management-groups">
      <Link href="/groups">{groupsTitle}</Link>
    </Menu.Item>
  </SubMenu>
  <Menu.Item icon={<ExportOutlined />} key="logout" onClick={() => logout()}>
    {LogoutTitle}
  </Menu.Item>
</Menu>

To redirect and trigger a client-side transitions between routes (pages) you need to add a Link component exported by next/link in Menu Item as the following example.

import Link from "next/link";

<Menu.Item>
  <Link href="/users">{users}</Link>
</Menu.Item>;

info

Every Menu.Item or SubMenu should have a unique key. And all translations will be store in locales/menu.json