optumation

Component Library Automation for all major frameworks used at Optum / UHG.

structure

Components React Components Stencil

Global Sidebar

Global Sidebar provides a set of components for creating high level and customizable side navigation

Installation

yarn

yarn add global-sidebar

npm

npm install global-sidebar

Usage

First you need to make sure that your components are wrapped within a <GlobalSidebarProvider> component

import { GlobalSidebarProvider } from 'global-sidebar';

<GlobalSidebarProvider>
  <App />
</GlobalSidebarProvider>;

Then in your layout component you can add sidebar navigation

import { Sidebar, Menu, MenuItem, SubMenu } from 'global-sidebar';

<Sidebar>
  <Menu>
    <SubMenu label="Charts">
      <MenuItem> Pie charts </MenuItem>
      <MenuItem> Line charts </MenuItem>
    </SubMenu>
    <MenuItem> Documentation </MenuItem>
    <MenuItem> Calendar </MenuItem>
  </Menu>
</Sidebar>;

Hook

The library comes with a useGlobalSidebar hook that lets you access and manage sidebar state

API

const { collapseSidebar, toggleSidebar, collapsed, toggled, broken, rtl } = useGlobalSidebar();

Returns

• collapseSidebar: (collapsed?: boolean) => void : A function that enables you to update the sidebar's collapsed state

• toggleSidebar: (toggled?: boolean) => void : A function that enables you to update the sidebar's toggled state

• collapsed: boolean : Sidebar collapsed state

• toggled: boolean : Sidebar toggled state

• broken: boolean : Sidebar breakPoint state

• rtl: boolean : Sidebar direction state

Example Usage

import { Sidebar, Menu, MenuItem, useGlobalSidebar } from 'global-sidebar';

function Layout() {
  const { collapseSidebar } = useGlobalSidebar();

  return (
    <div style={{ display: 'flex', height: '100%' }}>
      <Sidebar>
        <Menu>
          <MenuItem> Documentation</MenuItem>
          <MenuItem> Calendar</MenuItem>
          <MenuItem> E-commerce</MenuItem>
        </Menu>
      </Sidebar>
      <main>
        <button onClick={() => collapseSidebar()}>Collapse</button>
      </main>
    </div>
  );
}

Using React Router

It supports React Router using routerLink prop

Example Usage

import { Sidebar, Menu, MenuItem } from 'global-sidebar';
import { Link } from 'react-router-dom';

<Sidebar>
  <Menu>
    <MenuItem routerLink={<Link to="/documentation" />}> Documentation</MenuItem>
    <MenuItem routerLink={<Link to="/calendar" />}> Calendar</MenuItem>
    <MenuItem routerLink={<Link to="/e-commerce" />}> E-commerce</MenuItem>
  </Menu>
</Sidebar>;

API

License

MIT © Christopher Obigho