ScaffoldProps Properties Detailed

$3

- Trigger: The leftNav appears as a hamburger menu icon on mobile devices
- Drawer: Slides out from the left side when triggered
- Content Structure:
1. Logo at the top
2. Leading content (if provided)
3. Sub-account selector (if user is logged in with trading enabled)
4. Menu items list (scrollable if needed)
5. Social media links at the bottom
6. Feedback link at the very bottom (only if feedbackUrl is provided)
- Auto-close: The drawer automatically closes when a menu item is selected
- Navigation Behavior:
- Items with target property will open in new window/tab using window.open()
- Items without target will use router navigation and close the drawer

#### Advanced Customization

You can provide a completely custom left navigation trigger:

`typescript
mainNavProps={{
customLeftNav: ,
leftNav: {
// ... leftNav configuration
}
}}
>
{children}

`

$3

- Type: BottomNavProps
- Description: Mobile bottom navigation configuration (only displayed on mobile devices)
- Main Properties:
- mainMenus: Array of bottom menu items

`typescript
const bottomMenus = [
{
name: "Home",
href: "/home",
activeIcon: ,
inactiveIcon:
},
{
name: "Trade",
href: "/trade",
activeIcon: ,
inactiveIcon:
}
];

bottomNavProps={{
mainMenus: bottomMenus,
}}
>
{children}

`

$3

- Type: React.ReactNode
- Description: Custom footer component

`typescript
footer={}
>
{children}

`

$3

- Type: FooterProps
- Description: Configuration properties for the default footer component
- Main Properties:
- telegramUrl: Telegram link
- twitterUrl: Twitter link
- discordUrl: Discord link
- trailing: Content on the right side of the footer

`typescript
footerProps={{
telegramUrl: "https://t.me/yourgroup",
twitterUrl: "https://twitter.com/yourhandle",
discordUrl: "https://discord.gg/yourserver",
trailing:
}}
>
{children}

`

$3

- Type: RouterAdapter
- Description: Router adapter for integrating with different routing libraries
- Main Properties:
- onRouteChange: Route change handler function
- currentPath: Current path

`typescript
// React Router integration example
const routerAdapter = {
onRouteChange: (option) => {
if (option.target === '_blank') {
window.open(option.href, '_blank');
} else {
navigate(option.href);
}
},
currentPath: location.pathname
};

routerAdapter={routerAdapter}
>
{children}

`

$3

- Type: Style class name configuration object
- Description: Used to customize styles for various layout areas
- Configurable Areas:
- root: Root container (topNavbar + container + footer)
- container: Main container
- content: Content area
- body: Body area (leftSidebar + content)
- leftSidebar: Left sidebar
- topNavbar: Top navigation bar
- footer: Footer

`typescript
classNames={{
root: "custom-root-class",
container: "custom-container-class",
content: "custom-content-class",
body: "custom-body-class",
leftSidebar: "custom-sidebar-class",
topNavbar: "custom-navbar-class",
footer: "custom-footer-class"
}}
>
{children}

`

Complete Usage Example

`typescript
import React from 'react';
import { Scaffold } from "@orderly.network/ui-scaffold";
import { useNavigate, useLocation } from 'react-router-dom';

const App = () => {
const navigate = useNavigate();
const location = useLocation();

const sidebarMenus = [
{
name: "Dashboard",
href: "/dashboard",
icon:
},
{
name: "Trading",
href: "/trading",
icon:
},
{
name: "Portfolio",
href: "/portfolio",
icon:
}
];

const bottomMenus = [
{
name: "Home",
href: "/home",
activeIcon: ,
inactiveIcon:
},
{
name: "Trade",
href: "/trade",
activeIcon: ,
inactiveIcon:
}
];

const routerAdapter = {
onRouteChange: (option) => {
if (option.target === '_blank') {
window.open(option.href, '_blank');
} else {
navigate(option.href);
}
},
currentPath: location.pathname
};

return (
leftSideProps={{
title: "Navigation",
items: sidebarMenus,
current: location.pathname,
onItemSelect: (item) => {
if (item.href) {
navigate(item.href);
}
}
}}
mainNavProps={{
logo: {
src: "/logo.png",
alt: "Company Logo"
},
mainMenus: [
{ name: "Trade", href: "/trade" },
{ name: "Portfolio", href: "/portfolio" }
],
leading: ,
trailing: ,
onItemClick: ({ href }) => navigate(href),
leftNav: {
menus: sidebarMenus, // Reuse the same menu items
twitterUrl: "https://twitter.com/yourhandle",
telegramUrl: "https://t.me/yourgroup",
discordUrl: "https://discord.gg/yourserver",
feedbackUrl: "https://feedback.yoursite.com"
}
}}
bottomNavProps={{
mainMenus: bottomMenus,
}}
footerProps={{
telegramUrl: "https://t.me/yourgroup",
twitterUrl: "https://twitter.com/yourhandle",
discordUrl: "https://discord.gg/yourserver"
}}
routerAdapter={routerAdapter}
classNames={{
content: "p-4",
leftSidebar: "border-r border-gray-200"
}}
>


export default App;
`

Responsive Behavior

The Scaffold component automatically detects device type and provides appropriate layouts:

- Desktop: Displays complete sidebar, top navigation bar, and footer
- Mobile: Hides sidebar, displays bottom navigation bar and left navigation drawer (leftNav), optimized for touch interaction

$3

- Left Navigation Drawer: Accessed via hamburger menu icon, provides slide-out menu with complete navigation options
- Bottom Navigation: Fixed bottom bar for quick access to main sections
- Responsive Top Bar: Adapts to show essential controls and navigation elements

Best Practices

1. Router Integration: Always provide routerAdapter to ensure navigation functionality works properly
2. Responsive Design: Provide bottomNavProps and leftNav configuration for optimal mobile experience
3. Style Customization: Use the classNames property for style customization instead of directly modifying component styles
4. Menu State Management: Ensure the current property is synchronized with actual route state
5. Performance Optimization: For large menu lists, consider using React.memo to optimize rendering performance
6. Mobile Navigation: Configure leftNav with social media links and feedback URL to provide comprehensive mobile navigation experience

Important Notes

- The Scaffold component must be wrapped in ScaffoldProvider to work properly (automatically handled internally)
- Sidebar expand/collapse state is automatically saved to localStorage
- Mobile and desktop use different layout components to ensure good user experience on different devices
- The leftNav drawer is only available on mobile devices and provides a comprehensive navigation menu
- All navigation callbacks should properly handle route navigation logic

Related Components

- ScaffoldProvider: Provides Scaffold context
- useScaffoldContext: Hook to get Scaffold state
- MobileScaffold: Mobile layout component
- DesktopScaffold: Desktop layout component
- SubAccountWidget`: Sub-account selection component (exported from ui-scaffold)