Sidebar Menu & Routes

Sidebar Menu & Route Configuration

In this section, we’ll begin integrating real UI elements into the frontend by adding two new menu entries:

• A Search Companies page, featuring a table to list all registered companies.
• A New Company page, allowing users to create and submit new company registration requests.

---

Step 1: Update the Sidebar Menu

Open the library.jsx file inside the src folder. This file defines the application’s menu structure.

Add Menu Items

Insert the following entries under the existing Home menu item:

library.jsx

{
  code: 'companies',
  name: 'Companies',
  icon: 'folder',
  type: 'folder',
  parent: 'root',
},
{
  code: 'company-search',
  name: 'Search',
  i18n: 'menu-search',
  icon: 'search',
  href: '/companies',
  parent: 'companies',
  ranking: 1,
  public: true,
  role: [basic_roles],
},
{
  code: 'company-new',
  name: 'New Company',
  i18n: 'menu-new-company',
  icon: 'submit',
  href: '/companies/new',
  parent: 'companies',
  ranking: 2,
  public: false,
  role: ['company'],
},

These additions define a Companies menu folder with two child items: Search and New Company. Visibility of each menu item is managed via user roles.

Define Basic Roles

At the top of the same file, define a constant to group allowed roles:

export const basic_roles = ['officer', 'company'];

This makes the Search page accessible to both officer and company roles, while New Company is limited to users with the company role.

---

Updating Mock User Roles (for Mock API)

If you're using the Mock API, ensure the mock user has the appropriate roles assigned. For example, to grant the company role to the mock user Alice, update the app-config.jsx file as shown:

...
mockUser: {
  username: 'alice',
  ...
  roles: ['company'],
},

This allows Alice to access pages or features restricted to users with the company role.

---

Final Menu Structure

After updates, your library export should look something like:

library.jsx

export const library = [
  {
    code: 'home',
    name: 'Home',
    i18n: 'menu-home',
    icon: 'house',
    href: '/',
    parent: 'root',
    ranking: 1,
    public: true,
  },
  {
    code: 'footer-settings',
    name: 'Settings',
    icon: 'settings',
    href: '/settings',
    parent: 'footer',
    ranking: 1,
    public: false,
    roles: basic_roles,
  },
  {
    code: 'footer-help',
    name: 'Help',
    icon: 'help-circle',
    href: '/help',
    parent: 'footer',
    ranking: 2,
    public: true,
    roles: ['ignore'],
  },
  {
    code: 'profile-view',
    name: 'My Profile',
    icon: 'user',
    href: '/profile',
    parent: 'profile',
    ranking: 1,
    public: false,
    roles: ['ignore'],
  },
  {
    code: 'profile-logout',
    name: 'Logout',
    type: 'logout',
    icon: 'log-out',
    href: 'action:logout',
    parent: 'profile',
    ranking: 2,
    public: false,
    roles: [],
  },
];

---

Step 2: Create the Pages

Navigate to the pages directory and create a new folder named company. Inside it, create the following two files:

company-search.jsx

company-search.jsx

const CompanySearch = () => {
  return (
    <div>
      <h1>Company Search</h1>
    </div>
  );
};

export default CompanySearch;

company-form.jsx

company-form.jsx

const CompanyForm = () => {
  return (
    <div>
      <h1>Company Form</h1>
    </div>
  );
};

export default CompanyForm;

---

Step 3: Register Routes

Open the app-routes.jsx file. You will already find basic routes for Home and error pages. Under the Home route, add routes for the new pages:

app-routes.jsx

import './styles/index.css';
import { RouterProvider, createHashRouter } from 'react-router';
import { OidcWrapperProvider } from 'so-kit-ui';
import { AppCatchAll } from './app-catch-all.jsx';
import { AppCatchAuth } from './app-catch-auth.jsx';
import config from './app-config.jsx';
import { App } from './app.jsx';
import { CompanyForm } from './pages/company/company-form.jsx';
import { CompanySearch } from './pages/company/company-search.jsx';
import { Home } from './pages/home.jsx';

const routes = createHashRouter([
  {
    Component: App,
    children: [
      {
        index: true,
        Component: Home,
      },
      {
        path: 'companies',
        children: [
          {
            index: true,
            Component: CompanySearch,
          },
          {
            path: ':startOperation',
            Component: CompanyForm,
          },
          {
            path: ':id/:startOperation',
            Component: CompanyForm,
          },
        ],
      },
    ],
  },
  {
    path: '401',
    Component: AppCatchAuth,
  },
  {
    path: '*',
    Component: AppCatchAll,
  },
]);

export const AppRoutes = () => {
  return (
    <OidcWrapperProvider config={config}>
      <RouterProvider router={routes} />
    </OidcWrapperProvider>
  );
};

The two routes for CompanyForm allow dynamic URL handling — one for creating a new company, and one for operations involving a specific existing company by ID.

---

With the menu items, pages, and routes now in place, you're ready to start!