SideBar

Desktop sidebar navigation for responsive layouts.

Basic Usage

import { SideBar } from '@multinaire/ui';

<Tabs tabBar={(props) => <SideBar {...props} />}>
  <Tabs.Screen name="home" />
  <Tabs.Screen name="settings" />
</Tabs>

Props

Prop	Type	Default	Description
leading	ReactElement	—	React element rendered above the navigation list
trailing	ReactElement	—	React element rendered below the navigation list
style	ContainerStyleProps	—	Additional styles applied to the sidebar container
buttonStyle	SideBarButtonStyle	—	Active/inactive colors for all sidebar buttons

SideBarButtonStyle props:

Field	Type	Default	Description
activeBackgroundColor	ColorKeys	'background'	Background color of the focused item
inactiveBackgroundColor	ColorKeys	—	Background color of unfocused items
activeColor	ColorKeys	'primary'	Text/icon color of the focused item
inactiveColor	ColorKeys	'neutral'	Text/icon color of unfocused items

Screen options:

Option	Type	Description
title	string	Navigation item label
tabBarIcon	({ focused }) => ReactNode	Navigation item icon

Examples

Basic Sidebar

import { Tabs } from 'expo-router';
import { SideBar, Icon } from '@multinaire/ui';

export default function DesktopLayout() {
  return (
    <Tabs tabBar={(props) => <SideBar {...props} />}>
      <Tabs.Screen
        name="dashboard"
        options={{
          title: 'Dashboard',
          tabBarIcon: ({ focused }) => (
            <Icon
              icon="Home2"
              color={focused ? 'primary' : 'neutral'}
            />
          ),
        }}
      />
      <Tabs.Screen
        name="projects"
        options={{
          title: 'Projects',
          tabBarIcon: ({ focused }) => (
            <Icon
              icon="FolderOpen"
              color={focused ? 'primary' : 'neutral'}
            />
          ),
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Settings',
          tabBarIcon: ({ focused }) => (
            <Icon
              icon="Setting2"
              color={focused ? 'primary' : 'neutral'}
            />
          ),
        }}
      />
    </Tabs>
  );
}

With Header and Footer

<Tabs
  tabBar={(props) => (
    <SideBar
      {...props}
      leading={
        <Container padding={16}>
          <Photo
            source={require('../assets/logo.png')}
            width={120}
            height={40}
          />
        </Container>
      }
      trailing={
        <Container padding={16}>
          <MenuButton
            leading="Logout"
            title="Sign Out"
            onPress={signOut}
          />
        </Container>
      }
    />
  )}
>
  {/* Screens */}
</Tabs>

Responsive Layout

import { useResponsiveDesign } from '@multinaire/ui';

export default function ResponsiveLayout() {
  const { breakpoint } = useResponsiveDesign();

  return (
    <Tabs
      tabBar={(props) =>
        breakpoint === 'desktop' ? (
          <SideBar {...props} />
        ) : (
          <TabBar {...props} />
        )
      }
    >
      {/* Screens */}
    </Tabs>
  );
}

With User Profile

<SideBar
  {...props}
  leading={
    <Container padding={16} gap={12} alignItems="center">
      <Avatar source={{ uri: user.avatarUrl }} size={64} />
      <Typography type="subheading" weight="bold">
        {user.name}
      </Typography>
      <Typography type="caption" color="neutral">
        {user.email}
      </Typography>
    </Container>
  }
/>