App.tsx

``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 (



);
};

export default App;
`

main.tsx

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

import App from './App';

ReactDOM.createRoot(document.querySelector('#root')!).render(


,
);
`

routes.tsx

`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 (
Custom Error Component}>
{children}

);
};

const AppRoutes = () => {
const location = useLocation();

return (

path="/"
element={

Check Button

}
/>
path="/tickets"
element={tickets}
/>
path="*"
element={
not found
}
/>

);
};

export default AppRoutes;
``