Generate Oxygen UI Layout

Name: oxygen-layout
Rating: 78
Author: wso2

Instructions

•Read .claude/oxygen-ui/patterns.md for layout patterns
•Use AppShell as the main wrapper
•Configure Header with navigation
•Set up Sidebar with menu items

Critical Rules

•Always use OxygenUIThemeProvider at the root
•Use compound component pattern for AppShell, Header, Sidebar
•Import icons from @wso2/oxygen-ui-icons-react
•Use theme tokens for all styling

Complete App Shell Layout

tsx

import { useState } from 'react';
import {
  OxygenUIThemeProvider,
  OxygenTheme,
  AppShell,
  Header,
  Sidebar,
  Footer,
  Box,
  ColorSchemeToggle,
  UserMenu,
} from '@wso2/oxygen-ui';
import {
  HomeIcon,
  DashboardIcon,
  SettingsIcon,
  UsersIcon,
  FileIcon,
} from '@wso2/oxygen-ui-icons-react';

function App() {
  const [collapsed, setCollapsed] = useState(false);
  const [activeItem, setActiveItem] = useState('home');

  return (
    <OxygenUIThemeProvider theme={OxygenTheme}>
      <AppShell>
        <AppShell.Navbar>
          <Header>
            <Header.Toggle
              collapsed={collapsed}
              onToggle={() => setCollapsed(!collapsed)}
            />
            <Header.Brand>
              <Header.BrandLogo>
                <img src="/logo.svg" alt="Logo" height={32} />
              </Header.BrandLogo>
              <Header.BrandTitle>My Application</Header.BrandTitle>
            </Header.Brand>
            <Header.Spacer />
            <Header.Actions>
              <ColorSchemeToggle />
              <UserMenu
                user={{ name: 'John Doe', email: 'john@example.com' }}
                onSignOut={() => console.log('Sign out')}
              />
            </Header.Actions>
          </Header>
        </AppShell.Navbar>

        <AppShell.Sidebar>
          <Sidebar
            collapsed={collapsed}
            activeItem={activeItem}
            onSelect={setActiveItem}
          >
            <Sidebar.Nav>
              <Sidebar.Category>
                <Sidebar.CategoryLabel>Main</Sidebar.CategoryLabel>
                <Sidebar.Item id="home">
                  <Sidebar.ItemIcon><HomeIcon size={20} /></Sidebar.ItemIcon>
                  <Sidebar.ItemLabel>Home</Sidebar.ItemLabel>
                </Sidebar.Item>
                <Sidebar.Item id="dashboard">
                  <Sidebar.ItemIcon><DashboardIcon size={20} /></Sidebar.ItemIcon>
                  <Sidebar.ItemLabel>Dashboard</Sidebar.ItemLabel>
                </Sidebar.Item>
              </Sidebar.Category>

              <Sidebar.Category>
                <Sidebar.CategoryLabel>Management</Sidebar.CategoryLabel>
                <Sidebar.Item id="users">
                  <Sidebar.ItemIcon><UsersIcon size={20} /></Sidebar.ItemIcon>
                  <Sidebar.ItemLabel>Users</Sidebar.ItemLabel>
                  <Sidebar.ItemBadge>12</Sidebar.ItemBadge>
                </Sidebar.Item>
                <Sidebar.Item id="files">
                  <Sidebar.ItemIcon><FileIcon size={20} /></Sidebar.ItemIcon>
                  <Sidebar.ItemLabel>Files</Sidebar.ItemLabel>
                </Sidebar.Item>
              </Sidebar.Category>
            </Sidebar.Nav>

            <Sidebar.Footer>
              <Sidebar.Item id="settings">
                <Sidebar.ItemIcon><SettingsIcon size={20} /></Sidebar.ItemIcon>
                <Sidebar.ItemLabel>Settings</Sidebar.ItemLabel>
              </Sidebar.Item>
            </Sidebar.Footer>
          </Sidebar>
        </AppShell.Sidebar>

        <AppShell.Main>
          <Box sx={{ p: 3 }}>
            {/* Page content goes here */}
            <h1>Welcome</h1>
          </Box>
        </AppShell.Main>

        <AppShell.Footer>
          <Footer companyName="WSO2 LLC" />
        </AppShell.Footer>
      </AppShell>
    </OxygenUIThemeProvider>
  );
}

export default App;

Header with Context Switchers

tsx

<Header>
  <Header.Toggle collapsed={collapsed} onToggle={toggleSidebar} />
  <Header.Brand>
    <Header.BrandLogo><Logo /></Header.BrandLogo>
    <Header.BrandTitle>App Name</Header.BrandTitle>
  </Header.Brand>

  <Header.Switchers>
    <OrganizationSwitcher />
    <ProjectSwitcher />
  </Header.Switchers>

  <Header.Spacer />

  <Header.Actions>
    <SearchBar />
    <NotificationButton />
    <ColorSchemeToggle />
    <UserMenu user={user} />
  </Header.Actions>
</Header>

Minimal Header (No Switchers)

tsx

<Header minimal>
  <Header.Brand>
    <Header.BrandTitle>Simple App</Header.BrandTitle>
  </Header.Brand>
  <Header.Spacer />
  <Header.Actions>
    <ColorSchemeToggle />
  </Header.Actions>
</Header>

Sidebar with Nested Items

tsx

<Sidebar
  collapsed={collapsed}
  activeItem={activeItem}
  expandedMenus={expandedMenus}
  onSelect={setActiveItem}
  onToggleExpand={toggleExpand}
>
  <Sidebar.Nav>
    <Sidebar.Item id="parent" hasChildren>
      <Sidebar.ItemIcon><FolderIcon size={20} /></Sidebar.ItemIcon>
      <Sidebar.ItemLabel>Parent Item</Sidebar.ItemLabel>
    </Sidebar.Item>

    {expandedMenus['parent'] && (
      <>
        <Sidebar.Item id="child1" nested>
          <Sidebar.ItemLabel>Child 1</Sidebar.ItemLabel>
        </Sidebar.Item>
        <Sidebar.Item id="child2" nested>
          <Sidebar.ItemLabel>Child 2</Sidebar.ItemLabel>
        </Sidebar.Item>
      </>
    )}
  </Sidebar.Nav>
</Sidebar>

Dashboard Layout with Stats

tsx

import { Grid, Paper, Typography, Box } from '@wso2/oxygen-ui';

function DashboardContent() {
  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" gutterBottom>Dashboard</Typography>

      <Grid container spacing={3}>
        <Grid item xs={12} sm={6} md={3}>
          <Paper sx={{ p: 3 }}>
            <Typography color="text.secondary" variant="body2">Total Users</Typography>
            <Typography variant="h4" fontWeight="bold">12,345</Typography>
          </Paper>
        </Grid>
        <Grid item xs={12} sm={6} md={3}>
          <Paper sx={{ p: 3 }}>
            <Typography color="text.secondary" variant="body2">Revenue</Typography>
            <Typography variant="h4" fontWeight="bold">$45,678</Typography>
          </Paper>
        </Grid>
        {/* More stats... */}
      </Grid>
    </Box>
  );
}