[RFC] Component - MenuBar v1.0

navin-moorthy commented 4 years ago

Base Component to build an application Navbar, sidebar and Mobile Menu

The Goal:

Create a MenuBar as a navigation component that is composable, extensible and accessible using Chakra UI.

Key Resources:

Key Features:

Semantically well structured internally using ul, li and a by default.
Vertical MenuBar.
Popover & collapsable SubMenuList.
Responsive.
Adjustable popover width.
Follows WAI-ARIA best practices for accessibility of a menubar.
Inherits all the features of Chakra UI.

Import

MenuBar: The wrapper component that provides context, state, and focus management.
MenuBarItem: Items of the MenuBar which are the direct children of MenuBar
SubMenu: The wrapper component that provides context, state, and focus management for SubMenu components.
SubMenuTitle: The trigger for the SubMenuList. Must be a direct child of SubMenu.
SubMenuList: The wrapper for the SubMenu items. Must be a direct child of SubMenu.
SubMenuListArrow: A visual arrow that points to the reference (or trigger).
SubMenuItem: The trigger that handles submenu selection. Must be a direct child of a SubMenuList.
SubMenuGroup: A wrapper to group related submenu items.
SubMenuDivider: A visual separator for submenu items and groups.
SubMenuOptionGroup: A wrapper for checkable menu items (radio and checkbox)
SubMenuItemOption: The checkable menu item, to be used with MenuOptionGroup

Usage

<MenuBar ariaLabel="Dishes">
  <MenuBarItem>Recipes</MenuBarItem>
  <MenuBarItem>My Calendar</MenuBarItem>
  <SubMenu>
    <SubMenuTitle>Meal Plans</SubMenuTitle>
    <SubMenuList>
      <SubMenuItem>Downloaded</SubMenuItem>
      <SubMenuItem>Create a Copyed</SubMenuItem>
      <SubMenuItem>Mark as Drafted</SubMenuItem>
      <SubMenuItem>Deleted</SubMenuItem>
    </SubMenuList>
  </SubMenu>
  <SubMenu>
    <SubMenuTitle>Groceries</SubMenuTitle>
    <SubMenuList>
      <SubMenuItem>Download</SubMenuItem>
      <SubMenuItem>Create a Copy</SubMenuItem>
      <SubMenuItem>Mark as Draft</SubMenuItem>
      <SubMenuItem>Delete</SubMenuItem>
      <SubMenuItem>Attend a Workshop</SubMenuItem>
    </SubMenuList>
  </SubMenu>
  <SubMenu>
    <SubMenuTitle>Workouts</SubMenuTitle>
    <SubMenuList>
      <SubMenuItem>Downloading</SubMenuItem>
      <SubMenuItem>Create a Coping</SubMenuItem>
      <SubMenuItem>Mark as Drafting</SubMenuItem>
      <SubMenuItem>Deleting</SubMenuItem>
      <SubMenuItem>Attending</SubMenuItem>
    </SubMenuList>
  </SubMenu>
  <MenuBarItem>Video</MenuBarItem>
  <MenuBarItem>Blog</MenuBarItem>
</MenuBar>

navin-moorthy commented 4 years ago

Can we have all the props as in https://ant.design/components/menu/ ?

prasanna1211 commented 4 years ago

Items can be a dropdown, I think that is must. Dropdown shouldn't be a children. That is it shouldn't be something like
```
<NavItem>
<Dropdown />
</NavItem>
```

Instead it should be

  <NavItem type="dropdown>
    render all <NavItemOptions />
  </NavItem>

Reason is that, if it is a children the composition would change for dropdown in smaller screens. You might have to use ul li to manage the list.

Whereas in the second option when type="dropdown" is passed in as a context, the NavItemOptions should automatically get converted to a collapsible list. Agree ?

govindsingh55 commented 4 years ago

Chakra MenuList is always being rendered in Popover so

we can`t directly use the chakra menu (if we want MenuList to be collapse-expandable)
to get the collapse-expandable behavior MenuList(chakra internal code) modification is required.

prasanna1211 commented 4 years ago

Our menu is different from their menu. Ours is a kind of nav component that creates a list of navitems. Our nav item can be a Chakra Menu (or) a simple navigatable ul li's. For now we can use their chakra menu to be our nav item in case if our submenu is of type dropdown.

govindsingh55 commented 4 years ago

in case if our submenu is of type dropdown.

modification is required. have to put a condition whether the return will be popover MenuList or Collapsable MenuList

prasanna1211 commented 4 years ago

Collapsible is not a case for desktop screen. Lets make a desktop version where there can be just two types.

type = 'dropdown' - which can open sub nav items that can be a simple nav item.
type = 'nav' - which is a direct nav item.

By nav item I mean once clicked can navigate you through a route. It will have onActionProp.

govindsingh55 commented 4 years ago

NavItem is just a container that can receive children like Link, string, button, icon, menu or any other composition. so type is not required I think for NavItem

prasanna1211 commented 4 years ago

ok, for desktop it is not needed. But for mobile it will be needed. Ignore for it now.

sandeepprabhakaran commented 4 years ago

Desktop version can also have a collapsible menu type. We should think about the use case like this:

<Nav>
<NavItem>
<SubNavItem>Any children components can be rendered here</SubNavItem>
</NavItem>
<NavItem>
</NavItem>
</Nav>

prasanna1211 commented 4 years ago

@sandeepprabhakaran In that case we would be having to write two different children, one for responsive and another for desktop ?

sandeepprabhakaran commented 4 years ago

Can you explain why that's required? Pretty much every Navitem will be collapsed on responsive, only that there can be two levels. Collapsed nav ... <NavItem> ... <SubNavItem>

So in that sense we know which Menus will go one level deep or two level deep. Right?

prasanna1211 commented 4 years ago

I will explain the case clearly.

The ideal way that we are looking is to have a desktop version something like this

The Code would look like

<Nav>
  <NavItem type="link" action={navigateTo}>Navigation one</SubNavItem>
  <NavItem type="link" action={navigateTo} disabled>Navigation two</SubNavItem>
  <NavItem type="submenu">
    <SubNavItem type="link" action={navigateTo}>Option 1</SubNavItem>
    <SubNavItem type="link" action={navigateTo}>Option 2</SubNavItem>
  </NavItem>
</Nav>

To achieve the same thing with chakra Menu as a NavItem, the code would be looking like

<Nav>
  // Don't use chakra menu for the next line since it is just a normal link
  <NavItem type="link" action={navigateTo}>Navigation one</SubNavItem>

  // Don't use chakra menu for the next line since it is just a normal link
  <NavItem type="link" action={navigateTo} disabled>Navigation two</SubNavItem>

  // Use Chakra menu that uses Popover JS
  <NavItem type="submenu">
    <SubNavItem type="link" action={navigateTo}>Option 1</SubNavItem>
    <SubNavItem type="link" action={navigateTo}>Option 2</SubNavItem>
  </NavItem>
</Nav>

On Desktop screen [Works fine]

On Mobile screen (Issue: Cannot collapse since it is always a dropdown using popover)

So to avoid this issue either

NavItem should be rendering Chakra's menu at desktop screen and a simple collapsible list at mobile screen.

(or)

Compose with two different components when using it in the app.

navin-moorthy commented 4 years ago

<Nav>
  // Don't use chakra menu for the next line since it is just a normal link
  <NavItem type="link" action={navigateTo}>Navigation one</SubNavItem>

  // Don't use chakra menu for the next line since it is just a normal link
  <NavItem type="link" action={navigateTo} disabled>Navigation two</SubNavItem>

  // Use Chakra menu that uses Popover JS
  <NavItem type="submenu">
    <SubNavItem type="link" action={navigateTo}>Option 1</SubNavItem>
    <SubNavItem type="link" action={navigateTo}>Option 2</SubNavItem>
  </NavItem>
</Nav>

Just like this

We can have our Link component with NavItem since it will be a Box Components right? Do we need type props?

I think it's best to compose our own submenu component to tackle the responsiveness.

navin-moorthy commented 4 years ago

Note- Updated the Description

Pending Features

Handle body scroll locking when content overflows
Mobile Menu

timelessco / chakra-components