When creating pages in your application, it’s crucial to use predefined layout components to structure the page effectively and create intuitive navigation. Here are some guidelines to follow:
  1. Utilize Predefined Layouts: Make use of existing layout components like MainLayout and SplitLayout. These components provide a consistent structure and style across your application.
  2. Structure with SplitLayout: For pages that require a split view, use the SplitLayout component. This allows you to define a left and right child component, such as a navigation list on the left and content on the right. 
<SplitLayout
  leftChild={<ExerciseNavList />}
  rightChild={outlet}
  ...
/>
  1. Navigation with LinkTabs: For pages with multiple sections, use LinkTabs to provide tabbed navigation. Each Tab component corresponds to a section of the page.
<LinkTabs
  tabs={[
    <Tab label="Informationen" path="info" />,
    <Tab label="Beschreibung" path="topics" />,
  ]}
>
  <Outlet />
</LinkTabs>
  1. Page Headlines: Use components like PageHeadline to provide a consistent header for your pages. This can also include navigation back buttons for better user experience.
<PageHeadline showBackButton rootPath="exercises">
  {_buildTabs()}
</PageHeadline>
  1. Loading States: Handle loading states gracefully. Use placeholders or skeleton screens to indicate that content is being loaded.
if (isLoading) {
  return <SkeletonDetailPage />;
}
  1. Dynamic Routes: Utilize the routing system to create dynamic routes for your pages. This allows for more flexible navigation and content display.
<Routes>
  <Route path="info" element={<ExerciseForm />} />
  <Route path="topics" element={<ExerciseInfos />} />
</Routes>
By adhering to these practices, you’ll create pages that are well-structured, maintain a consistent style, and provide a user-friendly navigation experience.