App.tsx

import { useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import {
  AppLayout,
  IMenuNavItemsProps,
  ISidebarProps,
} from 'triquetra-ui';

import 'triquetra-ui/dist/style.css';

import AppRoutes from 'app.routes';

const menuItems: IMenuNavItemsProps = {
  items: [
    {
      key: 'settings',
      name: 'Settings',
      onClick: () => {
        console.log('Settings');
      },
    },
    {
      key: 'logout',
      name: 'Logout',
      onClick: () => {
        localStorage.removeItem('token');
        window.location.reload();
      },
    },
  ],
};

const App = () => {
  const { pathname } = useLocation();
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const sidebarProps: ISidebarProps = useMemo(() => {
    return {
      links: [
        {
          name: 'support',
          url: '',
          iconProps: {
            iconName: 'Ticket',
          },
          ariaLabel: 'support',
          links: [
            {
              name: 'tickets',
              url: `/tickets`,
              iconProps: {
                iconName: 'Ticket',
              },
              ariaLabel: 'Ticket',
            },
          ],
        },
      ],
      pathname,
      isOpen: isSidebarOpen,
      setIsOpen: setIsSidebarOpen,
    };
  }, [pathname, isSidebarOpen, setIsSidebarOpen]);

  return (
    <AppLayout
      menuItems={menuItems}
      sidebarProps={sidebarProps}
      showAdminSidebar
    >
      <AppRoutes />
    </AppLayout>
  );
};

export default App;

main.tsx

import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

ReactDOM.createRoot(document.querySelector('#root')!).render(
  <BrowserRouter basename="support">
    <App />
  </BrowserRouter>
);

routes.tsx

import { Text } from '@fluentui/react-components';
import { lazy, Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Route, Routes, useLocation } from 'react-router-dom';
import { IBreadcrumbCustomProps, PageLayout, Button } from 'triquetra-ui';

const breadcrumbHome: IBreadcrumbCustomProps = {
  links: [{ name: 'Support Portal', url: '/' }],
};

const breadcrumbPage: IBreadcrumbCustomProps = {
  links: [
    { name: 'Support Portal', url: '/' },
    { name: 'Tickets', url: '/tickets' },
  ],
};

const breadcrumbNotFound: IBreadcrumbCustomProps = {
  links: [
    { name: 'Support Portal', url: '/' },
    { name: 'Not Found', url: '/' },
  ],
};

const Element = ({
  children,
  fallback,
}: {
  children: JSX.Element;
  fallback: JSX.Element;
}) => {
  return (
    <ErrorBoundary FallbackComponent={<span>Custom Error Component</span>}>
      <Suspense fallback={fallback}>{children}</Suspense>
    </ErrorBoundary>
  );
};

const AppRoutes = () => {
  const location = useLocation();
  console.log('🚀 ~ AppRoutes ~ location:', location);

  return (
    <Routes>
      <Route
        path="/"
        element={
          <PageLayout showHeading={false} breadcrumb={breadcrumbHome}>
            <Button>Check Button</Button>
          </PageLayout>
        }
      />
      <Route
        path="/tickets"
        element={<PageLayout breadcrumb={breadcrumbPage}>tickets</PageLayout>}
      />
      <Route
        path="*"
        element={
          <PageLayout breadcrumb={breadcrumbNotFound}>not found</PageLayout>
        }
      />
    </Routes>
  );
};

export default AppRoutes;