```tsx import { useMemo, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { AppLayout, IMenuNavItemsProps, ISidebarProps } from '@triquetra/ui';
npm install @triquetra/ui``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;
`
`tsx
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.createRoot(document.querySelector('#root')!).render(
);
`
`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 (
);
};
const AppRoutes = () => {
const location = useLocation();
return (
element={
}
/>
element={
/>
element={
}
/>
);
};
export default AppRoutes;
``