SideNav best practice update about teothe HOT 3 CLOSED

/**
   *
   * @param items Array of [label, iconName, pageComponent]
   * @returns
   */
  const getItems = (items: [string, string, JSX.Element][]) => {
    return items.map((item, index) => {
      return getItem(item[0], index, getIcon(item[1], collapsed), item[2]);
    });
  };

  const items = getItems([
    ["Common Lore", "CommonLore", <CommonLorePage />],
    ["Planes of Existence", "Locations", <LocationsPage />],
    ["Deities", "Deities", <DeitiesPage />],
    ["Races", "Races", <RacesPage />],
    ["Tables", "Tables", <TablesPage />],
    ["Library", "Library", <LibraryPage />],
    ["Pricing", "Pricing", <PricingPage />],
    ["Tools", "Tools", <ToolsPage />],
    ["Homebrews", "Homebrews", <HomebrewsPage />],
    ["Map Overlay", "MapOverlay", <MapOverlayPage />],
    ["Map Legend", "MapLegend", <MapLegendPage />],
  ]);```

import { useEffect, useState } from "react";
import { render } from "react-dom";
import { Menu, Image, Avatar } from "antd";
import Sider from "antd/es/layout/Sider";

import type { MenuProps } from "antd";

import CommonLorePage from "Pages/PageCommonLore";
import DeitiesPage from "Pages/PageDeities";
import TablesPage from "Pages/PageTables";
import LibraryPage from "Pages/PageLibrary";
import MapLegendPage from "Pages/PageMapLegend";
import MapOverlayPage from "Pages/PageMapOverlay";
import LocationsPage from "Pages/PageLocations";
import RacesPage from "Pages/PageRaces";
import HomebrewsPage from "Pages/PageHomebrews";
import PricingPage from "Pages/PageCommonPricing";
import ToolsPage from "Pages/PageTools";

type MenuItem = Required<MenuProps>["items"][number];

function loadPage(pageComponent: React.ReactElement) {
  render(pageComponent, document.getElementById("PageContent"));
}

function getIcon(pageName: string, avatarSize: boolean) {
  return (
    <Avatar
      size={avatarSize ? 16 : 24}
      src={"./Icons/SideNav/" + pageName + ".svg"}
      alt={pageName + " Icon"}
      draggable={false}
      shape="square"
    ></Avatar>
  );
}

function getItem(
  label: React.ReactNode,
  key?: React.Key | null,
  icon?: React.ReactNode,
  children?: any
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

export default function Sidebar() {
  const [collapsed, setCollapsed] = useState(false);

  useEffect(() => {
    loadPage(<CommonLorePage />);
  }, []);

  /**
   *
   * @param items Array of [label, iconName, pageComponent]
   * @returns
   */
  const getItems = (items: [string, string, JSX.Element][]) => {
    return items.map((item, index) => {
      return getItem(item[0], index, getIcon(item[1], collapsed), item[2]);
    });
  };

  const items = getItems([
    ["Common Lore", "CommonLore", <CommonLorePage />],
    ["Planes of Existence", "Locations", <LocationsPage />],
    ["Deities", "Deities", <DeitiesPage />],
    ["Races", "Races", <RacesPage />],
    ["Tables", "Tables", <TablesPage />],
    ["Library", "Library", <LibraryPage />],
    ["Pricing", "Pricing", <PricingPage />],
    ["Tools", "Tools", <ToolsPage />],
    ["Homebrews", "Homebrews", <HomebrewsPage />],
    ["Map Overlay", "MapOverlay", <MapOverlayPage />],
    ["Map Legend", "MapLegend", <MapLegendPage />],
  ]);

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={(value) => {
        setCollapsed(value);
      }}
    >
      <Image width="200px" height="83px" src="./teothe3K.png" alt="Teothe3K Icon" preview={false} />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
        {items.map((item: any) => {
          return (
            <Menu.Item
              key={item.key}
              icon={item.icon}
              onClick={() => {
                loadPage(item.children);
              }}
            >
              {item.label}
            </Menu.Item>
          );
        })}
      </Menu>
    </Sider>
  );
}