OdinApp

This component is designed to encompass the rest of the App and should therefore be a top level component within the application's structure.

It provides a Navigation bar at the top which will allow links to each of it's child pages. These individual pages should be fully self contained within a single JSX component, otherwise they may get split up by the OdinApp.

Additionally, it provides an Error Boundary, which will display an error message if any of the components within cause an error on rendering.

The individual child pages, and the Nav Links provided to the OdinApp component as a property, are linked together based on the order. Check to ensure that the pages within the app are in the same order as the links to them.

Properties

import { OdinApp } from 'odin-react';

Name	Type	Default	Description
Title	string		Required The title to display alongside the Icon and the Nav Links
navLinks	array[string | Record<string, string[]>]		The list of links to each page. If one of the links within the array is a Record Object with a single key and a value which is a list of strings, it will create a dropdown menu in the nav bar for those links. The individual links within that dropdown will still maintain the same ordering behaviour
icon_marginLeft	string | number	"5px"	The margin to the left of the icon
icon_marginRight	string | number	"10px"	The margin to the right of the icon
custom_icon	string		The Link to the Custom Icon to display instead of the default Odin Control Icon

Example

import { OdinApp } from 'odin-react';

import { PageFour } from './PageFour';

  <OdinApp title="Title" navLinks={["Page One", "Page Two", {"More Pages": "Page 3", "Page 4"}...]}>
    <Container>Page One</Container>
    <Container>Page Two</Container>
    <Container>Page Three</Container>
    <PageFour/>
    ...
  </OdinApp>