Navigation Drawer Specification

Overview

The <igc-nav-drawer> is a container element for side navigation that provides quick access between views. It is suitable for deep navigation apps, or such with top-level views. It can either be permanently on-screen or controlled by a navigation menu icon.

Objectives

It provides API for the most common use cases when it comes to performing app navigation and access to views.

User Stories

Developer

1. As a developer, I want to be able to open/close the navigation drawer whether it is unpinned or persistent. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. Unpinned drawer can be closed by tapping or clicking outside of it.
2. As developer, I want to have an option to change the side of navigation. I can choose between start, end, top and bottom placement.
3. As developer, I want to be able to choose the width of the drawer.
4. As a developer, I want to be able to switch between pinned and unpinned modes. The default mode is unpinned, where the navigation drawer displays above the content with a darkened overlay over it. By pinning it, the navigation drawer is displayed on the same flow as the content and becomes permanent or persistent.
5. As developer, I want to have an option for a using a mini-drawer. It shows icons at the same elevation as the content. When expanded, it becomes a standard persistent navigation drawer.

End user

1. As a user, I want to have a navigation drawer that provides quick access to different parts of the app.
2. As a user, I want to be able to toggle open/close the temporary navigation drawer by tapping/clicking on an icon.
3. As a user, I want to have a navigation drawer that is persistent (pinned) on the screen when I am using devices with bigger display.
4. As a user, I want to have an option to use a persistent (pinned) drawer that gets opened by a menu icon and stays open until I close it.
5. As a user, I want to have an option for using a mini-drawer. It’s default state a mini drawer, showing icons at the same elevation as the content. When expanded it appears as a standard persistent navigation drawer.

Acceptance criteria

1. The navigation drawer should have buttons/icons to handle visibility.
2. The navigation drawer should handle user interactions and events.
3. The navigation drawer should handle position.

Functionality

Properties

Name	Type	Description	Default value
open	State of the drawer.	boolean	false
position	Sets the position of the drawer.	start, end, top, bottom	start
pinned	Pinned state of the drawer.	boolean	false

Methods

Name	Description
show	Opens the navigation drawer. Has no effect if already opened.
hide	Closes the navigation drawer. Has no effect if already closed.
toggle	Toggles the open state of the navigation drawer

Events

Name	Description
igcOpening	Fired when the drawer is about to open.
igcOpened	Fired when the drawer is opened.
igcClosing	Fired when the drawer is about to close.
igcClosed	Fired when the drawer is closed.

Slots

Name	Description
(default)	The default slot for the drawer.
mini	The slot for the mini variant of the drawer

CSS Parts

Name	Description
base	The base wrapper of the navigation drawer.
main	The main container.
mini	The mini container.

Test Scenarios

Automation

• Should render <igc-nav-drawer> with <igc-nav-drawer-item> elements inside
• Should render <igc-nav-drawer> with <igc-nav-drawer-item> and <igc-nav-drawer-header-item> elements inside
• Should render the content and mini drawer in the correct slots
• Should successfully change <igc-nav-drawer> position
• Should successfully toggle <igc-nav-drawer>
• Should successfully pin <igc-nav-drawer>
• Should successfully set <igc-nav-drawer-item> to active
• Should successfully set <igc-nav-drawer-item> to disabled
• Should emit igcOpening, igcOpened, igcClosing, igcClosed events