Function PortalLayout

PortalLayout(__namedParameters: PortalLayoutProps): Element

PortalLayout — responsive app shell with a collapsible sidebar on desktop and a bottom nav (plus "More" drawer) on mobile.

Works with any router — consumers provide currentPath and onNavigate so nothing about the component is coupled to a specific routing library.

Parameters

__namedParameters: PortalLayoutProps

Returns Element

Example: With react-router

import { PortalLayout, SidebarProvider } from '@hiyve/react-ui';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';

function Layout() {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  return (
    <SidebarProvider>
      <PortalLayout
        title="My App"
        navItems={navItems}
        currentPath={pathname}
        onNavigate={navigate}
        mobileNavPaths={['home', 'messages', 'profile']}
      >
        <Outlet />
      </PortalLayout>
    </SidebarProvider>
  );
}

Function PortalLayout

Parameters

Returns Element

Example: With react-router

Settings