oxygen-layout

name	oxygen-layout
description	Generate application layouts with AppShell, Header, and Sidebar. Use when creating app shells, navigation structures, or dashboard layouts.

Generate Oxygen UI Layout

Instructions

1. Read .claude/oxygen-ui/patterns.md for layout patterns
2. Use AppShell as the main wrapper
3. Configure Header with navigation
4. 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

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: '[e-mail]' }}
                onSignOut={() => console.log('Sign out')}
              />
            </Header.Actions>
          
        

        
          
            
              
                Main
                
                  
                  Home
                
                
                  
                  Dashboard
                
              

              
                Management
                
                  
                  Users
                  12
                
                
                  
                  Files
                
              
            

            
              
                
                Settings
              
            
          
        

        
          
            {/* Page content goes here */}
            Welcome
          
        

        
          
        
      
    
  );
}

export default App;

Header with Context Switchers

<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)

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

Sidebar with Nested Items

<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

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>
          
        
        
          
            Revenue
            $45,678
          
        
        {/* More stats... */}
      
    
  );
}