I am trying to replace the AppLayout in @layout with shadcn SidebarProvider or for that matter it can be any custom dashboard implementation with sidebar.
I am trying with latest Hilla + React, and shadcn configuration done.
I have two question:
is this even supported to replace AppLayout for custom implementation?
any code sample or pointer to documentation?
looking forward to your help!
Tatu2
October 31, 2024, 8:47am
2
Atleast if you build your routing yourself without @layout , it is then naturally possible to construct your mainlayout anyway you like.
I have example of setup without @layout here
import { AppLayout } from '@vaadin/react-components/AppLayout.js';
import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Button } from '@vaadin/react-components/Button.js';
import { DrawerToggle } from '@vaadin/react-components/DrawerToggle.js';
import { useAuth } from 'Frontend/auth.js';
import Placeholder from 'Frontend/components/placeholder/Placeholder';
import { useRouteMetadata } from 'Frontend/util/routing';
import { Suspense, useState } from 'react';
import { Item } from '@vaadin/react-components/Item.js';
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
import { MenuProps, routes, useViewMatches, ViewRouteObject } from 'Frontend/routes.js';
import UserInfo from 'Frontend/generated/com/example/application/services/UserInfo';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
import { RouteObjectWithAuth } from '@vaadin/hilla-react-auth';
import { useOffline } from 'Frontend/util/useOffline';
/**
* Represents a menu route in the MainLayout component.
*/
type MenuRoute = RouteObjectWithAuth &
show original
It is still using AppLayout, but I think you can connect the dots here.
1 Like
thanks Tatu for giving it a look, and sharing repo.
I tried with custom route, created MainLayout and deleted @layout or @index etc, I can see the side navigation bar as expected.