Hamburger

Design System - Hamburger component

The Hamburger component serves as a collapsible vertical navigation panel, enabling users to switch between modules, configure language and city preferences, and access universal actions. This component provides a consistent and intuitive experience across services.

// Sample code

 <Hamburger
    items={[
      {
        children: [
          {
            icon: '',
            label: 'City 1',
            path: '/'
          },
          {
            icon: '',
            label: 'City 2',
            path: '/'
          }
        ],
        icon: 'Home',
        isSearchable: true,
        label: 'City'
      },
      {
        children: [
          {
            icon: '',
            label: 'Language 1',
            path: '/'
          },
          {
            icon: '',
            label: 'Language 2',
            path: '/'
          }
        ],
        icon: 'DriveFileMove',
        isSearchable: true,
        label: 'Language'
      },
      {
        children: [
          {
            children: [
              {
                icon: '',
                label: 'InnerModule 1',
                path: '/'
              },
              {
                icon: '',
                label: 'InnerModule 2',
                path: '/'
              }
            ],
            icon: '',
            label: 'SubModule 1',
            path: '/'
          },
          {
            icon: '',
            label: 'SubModule 2',
            path: '/'
          }
        ],
        icon: 'Accessibility',
        isSearchable: true,
        label: 'SideNav'
      }
    ]}
    onLogout={()=>{}}
    onOutsideClick={()=>{}}
    onSelect={()=>{}}
    profile=""
    profileName="ProfileName"
    profileNumber="+258 6387387"
    theme="dark"
    transitionDuration={0.3}
    userManualLabel="UserManual"
    usermanuals={[]}
  />

// Sample code

SideBar(
          type: SidebarType.dark,
          logOutDigitButtonLabel: 'Log Out',
          profile: const ProfileWidget(
            type: SidebarType.dark,
            title: 'John Doe',
            description: 'house number 5',
          ),
          sidebarItems: [
            SidebarItem(
                title: 'Home',
                icon: Icons.home,
                onPressed: () {
                  Navigator.of(context).pop();
                  // Navigate to Home
                },
                children: [
                  SidebarItem(
                    title: 'go to home',
                    onPressed: () {
                      print('go to home');
                    },
                  ),
                  SidebarItem(
                    title: 'log out',
                    onPressed: () {
                      print('log out');
                    },
                  ),
                ]),
            SidebarItem(
                title: 'Language',
                icon: Icons.language_sharp,
                isSearchEnabled: false,
                onPressed: () {
                  print('change language');
                },
                children: [
                  SidebarItem(
                    initiallySelected: true,
                    title: 'English',
                    onPressed: () {
                      print('enlish selected'
                      );
                    },
                  ),
                  SidebarItem(
                    title: 'Hindi',
                    onPressed: () {
                      print('hindi selected');
                    },
                  ),
                  SidebarItem(
                    title: 'French',
                    onPressed: () {
                      print('french selected');
                    },
                  ),
                  SidebarItem(
                    title: 'Spanish',
                    onPressed: () {
                      print('spanish selected');
                    },
                  ),
                ]),
            SidebarItem(
                title: 'Profile',
                icon: Icons.person,
                onPressed: () {
                  Navigator.of(context).pop();
                  // Navigate to Profile
                },
                children: [
                  SidebarItem(
                    title: 'Edit profile',
                    onPressed: () {
                      // Implement language change
                    },
                  ),
                  SidebarItem(
                    title: 'Logout',
                    onPressed: () {
                      // Implement language change
                    },
                  ),
                  SidebarItem(
                    title: 'Change password',
                    onPressed: () {
                      // Implement language change
                    },
                  ),
                ]),
            SidebarItem(
              title: 'View downloaded data',
              icon: Icons.download,
              onPressed: () {
                Navigator.of(context).pop();
                // Navigate to Downloaded Data
              },
            ),
          ],
        ),

Anatomy

Variants

Light Mode

The default Text Block displays a structured combination of a caption, heading, subheading, and description. Each section can be individually toggled on or off based on the context or content requirement.

Dark Mode Intended for darker UIs, this version enhances visual contrast and reduces strain during prolonged usage or low-light environments.

Properties

Profile Displays user-specific details such as name and mobile number, along with an optional avatar or icon, reinforcing personalisation.

Enable Search Allows users to search through nested navigation items, improving usability for platforms with many modules or submodules.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

Property

Value

Default

items

text

profileName

text

profileNumber

yes/no

theme

yes/no

className

yes/no

styles

yes/no

hideUserManuals

yes/no

useManualLabel

yes/no

profile

yes/no

usermanuals

number

onSelect

yes/no

onLogout

yes/no

reopenOnLogout

yes/no

closeOnClickOutside

yes/no

onOutsideClick

yes/no

onLabelClick

yes/no

Usage Guide

Action Accessibility

Keep important global actions like "Logout" and "User Manual" fixed and accessible at the bottom.  Don’t hide logout or profile info under collapsible menus; users expect to see these instantly upon opening the drawer.

Change log

Date

Number

Notes

Dec 15, 2024

v-0.0.2

This component is added to the website. This component is now individually versioned.

Design Checklist

PreviousFooter NextHeader

Last updated 3 months ago

Was this helpful?

Good evening

hashtagAnatomy

hashtagVariants

hashtagProperties

hashtagProperty Configuration Table

hashtagUsage Guide

hashtagChange log

hashtagDesign Checklist

Anatomy

Variants

Properties

Property Configuration Table

Usage Guide

Change log

Design Checklist