Navigation

For the applications navigation we are using a component better Known by us as "Sidebar" or "Navigation drawer" if we follow the "material design" naming. Navigation drawers provide access to destinations and app functionality, this component is part of the suite shell module.

Anatomy

Drawer

Is the container of the navigation tree, this could takes different sizes and behaviors depending on the size of the screen.

Tree

This component receive a NavigationTree object and modified it to a AngularMaterialTree data source in order to use the Angular material tree.

The responsibility of this component's is to display node by node the complete tree.

Important

This components support trees with multiple levels, but we recommend 4 as maximum, the reason is simple, the navigation drawer doesn't has so much size.

Nodes

The smallest part of the tree, each node has three visible parts:

• Icon: Use it to improve the visual experience, when the drawer is collapsed the icon will be the only thing visible of the node.

• Label: A brief description of the page or parent node.

• Chip: Use it to display contextual information related to the node and the application section which the node represent.

Important

Try to use brief descriptions.

Besides the visual configuration, the nodes could have three different actions:

• Router link: Change the activated state to a defined one when the user click the node.

• Parent node with sub nodes: If the node define subNodes, it will display an arrow button to switch between a "collapsed" and "expanded" mode.

• Nothing: If the node hasn't a routerLink or subNodes.

Services

The NavigationService is a facade that expose data selectors and a dispatch function to execute actions to modified the tree in the store.

Glossary

• Full key: Is a string that represent the entire hierarchy of a node in the tree.

  This field is auto generated and you can use it to modified any part of the tree.

• Navigation Node: The smallest unit of the tree, is a "Recursive data type" that con define other Navigation nodes as children.

• Navigation Tree: Is a root node and contains Navigation nodes as children.

Actions

• setRootNodes: Use it to make a initial setup of your application tree.

• updateNavigationNode: With this action you can update a specific node of the complete tree in any level (with the full key).

• createNavigationNodes: Allows to add nodes (using the Record structure ) in any node level.

• deleteNavigationNode: Delete a node in the tree.