Creating a Layout

The tenjin-ui-kit provides a <Layout /> component that wraps the content of your app into a pre-defined layout.

The <Layout /> component further exposes the following components:

1. <TopBar /> - which renders the Top Navigation Bar
2. <Main /> - which renders the main content of the application
3. <Sidebar /> - which renders the sidebar
4. <PageContent /> - which renders the actual content of the page.

Below is how the <Layout /> component is used to create a typical Site Administration Layout

export const SiteAdminLayout = () => {
  return (
    <BrowserRouter>
      <ThemeProvider theme={defaultTheme}>
        <CssBaseline />
        <Layout id="admin-wrapper">
          <Layout.TopBar
            breadcrumbs={breadcrumbsData}
            loggedInUser={{ name: "John Doe", email: "john.doe@yethi.in" }}
            actions={actions}
          />
          <Layout.Main>
            <Layout.Sidebar>
              <Layout.Sidebar.GroupedMenu groups={menuItems} />
            </Layout.Sidebar>
            <Layout.PageContent>
              <Typography variant="h6">Page Content Goes Here</Typography>
            </Layout.PageContent>
          </Layout.Main>
        </Layout>
      </ThemeProvider>
    </BrowserRouter>
  );
};
Copy

In the above code, notice the use of the Main, Sidebar and PageContent components.

TopBar

The Topbar takes three props: the loggedInUser, breadcrumbData and actions

loggedInUser prop

This prop is used to display the user profile avatar on the top bar. It takes the following format

{
  "name": "John Doe",
  "email": "john@lskjdf.com",
  "id": 123
}
Copy

breadcrumbData prop

This prop specifies the breadcrumbs that must be displayed. It takes the following format

[
  {
    "active": false,
    "link": `/projects/MYP`,
    "title": "Project Home"
    "icon": <FiPieChart />,
  },
  {
    "active": false,
    "link": `/projects/MYP/design`,
    "title": "Test Design"
    "icon": <FiPieChart />,
  },
  {
    "active": true,
    "title": "Create"
  }
]
Copy

actions prop

This prop describes the buttons that must be present in the Top Bar

[
    {
      href: "/projects",
      icon: <FiBriefcase />,
      title: "My Projects",
      serverSide: true,
    },
    {
      href: "/agents",
      icon: <MdDesktopWindows />,
      title: "Agents",
      serverSide: true,
    },
    {
      href: "/admin",
      icon: <FiSettings />,
      title: "Administration",
      serverSide: true,
    },
  ];
Copy

Sidebar

The sidebar can be of two varieties. Grouped Menu and Flat Menu. The Grouped menu is useful for large menu items that are grouped, while the Flat Menu is good for a smaller list of menus with Icons.

The sidebar can be made to expand /collapse by setting the allowCollapse prop to true

Grouped Menu

The sidebar can be made to display a grouped menu as follows:

const menuItems = [
  {
    groupName: "Users and Billing",
    items: [
      {
        display: "User Management",
        key: "user-management",
        href: "/admin/users",
        serverSide: false,
      },
    ],
  },
  {
    groupName: "Projects",
    items: [
      {
        display: "Projects",
        key: "projects",
        href: "/admin/projects",
        serverSide: false,
      },
      {
        display: "Project Roles",
        key: "project-roles",
        href: "/admin/projectroles",
        serverSide: false,
      },
      {
        display: "Programs",
        key: "programs",
        href: "/admin/programs",
        serverSide: false,
      },
    ],
  },
  {
    groupName: "Test Design",
    items: [
      {
        display: "Priorities",
        key: "priorities",
        href: "/admin/priorities",
        serverSide: false,
      },
      {
        display: "Complexities",
        key: "complexities",
        href: "/admin/complexities",
        serverSide: false,
      },
      {
        display: "Test Types",
        key: "testTypes",
        href: "/admin/testtypes",
        serverSide: false,
      },
    ],
  },
  {
    groupName: "External Apps",
    items: [
      {
        display: "External Integrations",
        key: "integrations",
        href: "/admin/integrations",
        serverSide: false,
      },
    ],
  },
];

<Layout.Sidebar>
  <Layout.Sidebar.GroupedMenu groups={menuItems} />
</Layout.Sidebar>;
Copy

Flat Menu

This is great for collapsible sidebar with icons

const flatMenu = [
  {
    display: "Project",
    key: "project",
    href: "/project",
    serverSide: false,
    icon: <FiBriefcase />,
  },
  {
    display: "Test Design",
    key: "test-design",
    href: "/design",
    serverSide: false,
    icon: <FiLayers />,
  },
  {
    display: "Automation",
    key: "automation",
    href: "/automation",
    serverSide: false,
    icon: <FaRobot />,
  },
  {
    display: "Execution",
    key: "execution",
    href: "/execution",
    serverSide: false,
    icon: <FiPlay />,
  },
  {
    display: "Defects",
    key: "defects",
    href: "/defects",
    serverSide: false,
    icon: <FiAlertTriangle />,
  },
  {
    display: "Reports",
    key: "reports",
    href: "/reports",
    serverSide: false,
    icon: <FiPieChart />,
  },
];
<Layout.Sidebar allowCollapse>
  <Layout.Sidebar.FlatMenu items={flatMenu} />
</Layout.Sidebar>;
Copy