Sidebar

The Sidebar should be used to handle navigation when building an application layout using the Application component. It's also responsible for applying a consistent branding across the native web applications.

<div
  style={
    Object {
      "height": "100%",
      "position": "relative",
      "width": "100%",
    }
  }
>
  <Application
    useDialogs={false}
    useNotifications={false}
  >
    <Sidebar>
      <SidebarBrand>
        <Product
          name="my-app"
        />
      </SidebarBrand>
    </Sidebar>
    <Container
      background="light"
    >
      My content panel
    </Container>
  </Application>
</div>
My content panel

Items

Add items to the sidebar using the SidebarItem component. An item is either a top level item that can be actived, e.g. a help item that activates the help mode. Or it is a container for nested items, e.g. an account item that contains a logout item.

<div
  style={
    Object {
      "height": "100%",
      "position": "relative",
      "width": "100%",
    }
  }
>
  <Application
    useDialogs={false}
    useNotifications={false}
  >
    <Sidebar>
      <SidebarBrand>
        <Product
          name="my-app"
        />
      </SidebarBrand>
      <SidebarItem
        iconName="account"
      >
        <SidebarItem>
          You are logged in as Sophie
        </SidebarItem>
        <SidebarItem
          onClick={[Function onClick]}
        >
          Logout
        </SidebarItem>
      </SidebarItem>
      <SidebarItem
        iconName="menu"
        isActive={true}
      />
      <SidebarItem
        iconName="toggle-left-panel"
      />
      <SidebarItem
        iconName="help"
        onClick={[Function onClick]}
      />
    </Sidebar>
  </Application>
</div>

Footer

A sidebar can also contain a SidebarFooter. Use it to display and link to the brand that created the product.

<div
  style={
    Object {
      "height": "100%",
      "position": "relative",
      "width": "100%",
    }
  }
>
  <Application
    useDialogs={false}
    useNotifications={false}
  >
    <Sidebar>
      <SidebarBrand>
        <Product
          name="my-app"
        />
      </SidebarBrand>
      <SidebarFooter>
        <Brand
          color="monochrome"
          type="minimal"
        />
      </SidebarFooter>
    </Sidebar>
  </Application>
</div>