Navigation Configuration

The app was developed to dynamically set the navigation based on layout type that you choose. It may seem confusing at first but I will provide examples on how the navigation is set based on the sidebar or layout that you choose.

Let's start by explaining the file:

const navigationConfig: NavigationTree[] = [
  {
    key: 'dashboard',
    path: 'dashboard',
    title: 'Dashboard',
    translateKey: 'nav.dashboard',
    icon: IconDashboard,
    authority: [],
    subMenu: []
  },
];

key: needs to be the same key you provided in the route configuration to match the route route and the navigation.

path: the path user will be sent when it clicks the button.

title: title of the navigation.

translateKey: the app suports internationalization so this key will be the key that you will use for different languages, for more information check ou the internationalization page.

icon: the icon that will be displayed in the sideBar.

authority: the authority of the users that can access to this navigation button (if you leave it blank it will be seen by anyone).

subMenu: is a way to use the nav links group in the SimpleSideBar, define the sub links in the DeckedSideBar, do not have any impact in the CollapsedSideBar. You can find more information and examples about each sidebar and its details below.

SimpleSideBar

If you will use the SimpleSideBar or Simplelayout these are the things that you can create using the navigationConfig. When you add objects in the navigationConfig they will be translated to sideNav buttons.

const navigationConfig: NavigationTree[] = [
  {
    key: 'dashboard',
    path: 'dashboard',
    title: 'nav.dashboard',
    translateKey: 'nav.dashboard',
    icon: IconDashboard,
    authority: [],
    subMenu: []
  },
  {
    key: 'users',
    path: 'users',
    title: 'Users',
    translateKey: '',
    icon: IconUser,
    authority: [],
    subMenu: [
    ]
  },
];

For example this object above gives us this output in the app:

But if you define a submenu it will use the nav links group automatically. For example if you define a subMenu:

const navigationConfig: NavigationTree[] = [
  {
    key: 'dashboard',
    path: '/dashboard',
    title: 'Dashboard',
    translateKey: '',
    icon: IconDashboard,
    authority: [],
    subMenu: [
      {
        key: 'users',
        path: '/users',
        title: 'Users',
        translateKey: '',
      },
    ]
  },
];

The output will be like this:

Note: When you define the subMenu, the dropDown in this case, Dashboard, will serve just as a dropdown and not a routing button. In this case, if we want to use the subMenu, the path in the parent element can be ignored because it will not be clickable.

Caution: Do not skip the / in the path or the active css styles will not be applied.

---

DeckedSideBar

The navigation for DeckedSideBar is divided in two routes the main links will be the ones who get displayed in icons and the subLinks can be one or a list will be displayed according to its mainLink or parent.

Caution: Please add the navigation according to the picture above and be careful in / character, if you are having issues with active link not being active when you are in the route that should be active you have probably something wrong with your / placement, in the mainLink you need to specify the '/' in the subLink you do not need to specify the /.

---

CollapsedSideBar

To achive the navigation of the image above you need to have a navigationConfig like this:

const navigationConfig: NavigationTree[] = [
  {
    key: 'dashboard',
    path: 'dashboard',
    title: 'Dashboard',
    translateKey: '',
    icon: IconDashboard,
    authority: [],
    subMenu: []
  },
  {
    key: 'users',
    path: 'users',
    title: 'Users',
    translateKey: '',
    icon: IconUser,
    authority: [],
    subMenu: []
  },
];

Note: In CollapsedSideBar you cannot use the nav links group and the subMenu is ignored.