[RFC] Molecule - Navbar #42

navin-moorthy · 2020-04-07T11:40:55Z

This issue will serve as a starter to understand the molecule development. We will be building a Navbar.

The Goal:

Build a Navbar with Chakra Components

Import

Component Parts:

Navbar: The wrapper that provides the context and functionalities (Box as nav)
NavbarContainer: The Navbar Container to decide on the height, max-width, flex properties, margin & padding for the Nav Items. (Flex)
NavbarItem: List of items inside the container (Box)
NavbarBrand: Slot to container the brand Image, Icon, text or Icon with text. (Box)

Usage

<Navbar>
  <NavbarContainer>
     <NavbarItem>
      <NavbarBrand>
    </NavbarItem>
    <NavbarCollapse>
      <NavbarItem>
    <NavbarCollapse>
      <NavbarItem>
  </NavbarContainer
</Navbar>

Props

No idea on how we can have props for these components, because they can already be achieved via styled props from our components, because all the component are built on top of Box.

Need to think on how we are giving the props.

NOTE: This is only an initial model, everything is subject to change based on the RFC discussion.

The text was updated successfully, but these errors were encountered:

prasanna1211 · 2020-04-07T12:06:40Z

Should we change the composition in responsiveness ?
What props does each atom would hold ? That determines how flexible it is.
Can NavItem be a dropdown ?

govindsingh55 · 2020-04-07T12:12:14Z

NavItem will provide a PseudoBox, it can have children as string or component like Link, Menu or Dropdown.

sandeepprabhakaran · 2020-04-07T12:12:44Z

NavbarContainer: The Navbar Container to decide on the height, max-width, flex properties, margin & padding for the Nav Items. (Flex) NavbarItem: List of items inside the container (Box) NavbarBrand: Slot to container the brand Image, Icon, text or Icon with text. (Box)

I'd like to propose a NAV component first, because a nav can exist outside of a navbar. There can be a vertical variant of a nav component.

Navbar is just a composition of several Nav components.

sandeepprabhakaran · 2020-04-07T12:14:09Z

We can call it a menu component too, it's essentially a menu of choices. Good example with variants: https://ant.design/components/menu/

navin-moorthy · 2020-04-07T12:17:46Z

Should we change the composition in responsiveness ?

why do we need to change the composition in responsiveness?

What props does each atom would hold ? That determines how flexible it is.

Lets take
- can have, bg, color.
- can have maxWidth, height of the whole navbar layout.

Am I going in the right direction?

Can NavItem be a dropdown ?

Yeah, it can be. But that dropdown can be a separate Dropdown component which we will build.

navin-moorthy · 2020-04-07T12:18:44Z

NavbarContainer: The Navbar Container to decide on the height, max-width, flex properties, margin & padding for the Nav Items. (Flex) NavbarItem: List of items inside the container (Box) NavbarBrand: Slot to container the brand Image, Icon, text or Icon with text. (Box)

I'd like to propose a NAV component first, because a nav can exist outside of a navbar. There can be a vertical variant of a nav component.

Navbar is just a composition of several Nav components.

Like this - https://react-bootstrap.github.io/components/navs/
Same like - https://ant.design/components/menu/

We can have a separate Menu Component with Menu Item in it.

prasanna1211 · 2020-04-07T12:22:01Z

why do we need to change the composition in responsiveness?

Not yet very clear how it would look responsively. In lower screen-sizes will it become a hamburger which when clicked opens the menu ?
If the navbar item is a dropdown then how it is going to be behaving in responsive screen sizes ? As the normal way of having sub menus ? (same like what this does) ?

govindsingh55 · 2020-04-07T12:24:19Z

just defines that which set navItem to collapsable. we need to have one more sub-component which resposible for hamburger icon(or any other) and its position in navbar.

Or it can just be a navItem that changes the collapse state

prasanna1211 · 2020-04-07T12:26:39Z

@govindsingh55 Can you write the psuedo code in here in case of responsive navbar ?

prasanna1211 · 2020-04-07T12:27:41Z

@navin-moorthy can we open a RFC for menu ?

govindsingh55 · 2020-04-07T12:27:50Z

const NavbarComponent = () => {
  const [navBarState, setNavBarState] = useState(false);
  return (
    <div style={{background:"#fbf7f7", height: "100vh"}}>
    {/* navbar */}
    <NavBar 
      isOpen={navBarState} 
      onToggle={setNavBarState}
      isInline={true}
      px="1.5rem"
      _bg="white" 
      alignItems="center" 
      justifyContent="space-between"
    >
      {/* logo */}
      <PseudoBox>
        <Link href="https://chakra-ui.com" flexShrink="0">
          <Image
            minWidth="50px"
            size="50px"
            objectFit="cover"
            src="https://ui-avatars.com/api/?name=John+Doe"
            alt="Segun Adebayo"
          />
        </Link>
      </PseudoBox>
      {/* nav link */}

      <Nav 
        isCollapsable={true}
        pl={{base: "0px", md: "2rem"}} 
        px={{base: "1rem", md: "0px"}} 
        py={{base: "1rem", md: "0px"}} 
        position={{base: "absolute", md: "relative"}} 
        left={{base: "0%", md: "unset"}} 
        // right={{base: "10%", md: "unset"}} 
        bg={{base: "white", md: ""}} 
        mt={{base: "11rem", md: "0px"}} 
        ml={{base: "0px", md: "6rem"}} 
        width={{base: "100%"}} 
        boxShadow={{base: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", md: "none"}}
      >
        <NavItem
          px="1rem" 
          py={{base: ".5rem", md: "2rem"}} 
          color="gray.500" 
          fontSize="1rem" 
          fontWeight="500" 
          borderBottom={{base: "solid 1px #ede7e7", md: "none"}}
        > 
          <Menu>
            <MenuButton as={Button} rightIcon="chevron-down">
              Actions
            </MenuButton>
            <MenuList>
              <MenuItem>Download</MenuItem>
              <MenuItem>Create a Copy</MenuItem>
              <MenuItem>Mark as Draft</MenuItem>
              <MenuItem>Delete</MenuItem>
              <MenuItem as="a" href="#">
                Attend a Workshop
              </MenuItem>
            </MenuList>
          </Menu>
        </NavItem> 
        <NavItem 
          px="1rem" 
          py={{base: ".5rem", md: "2rem"}} 
          color="gray.500" 
          fontSize="1rem" 
          fontWeight="500" 
          borderBottom={{base: "solid 1px #ede7e7", md: "none"}}
        > 
          <Link href="https://chakra-ui.com">
            Product
          </Link>
        </NavItem> 
        <NavItem 
          px="1rem" 
          py={{base: ".5rem", md: "2rem"}} 
          color="gray.500" 
          fontSize="1rem" 
          fontWeight="500" 
          borderBottom={{base: "solid 1px #ede7e7", md: "none"}}
        >
          <Link href="https://chakra-ui.com">
            Features
          </Link>
        </NavItem>
        <NavItem 
          px="1rem" 
          py={{base: ".5rem", md: "2rem"}} 
          color="gray.500" 
          fontSize="1rem" 
          fontWeight="500" 
          borderBottom={{base: "solid 1px #ede7e7", md: "none"}}
        >
          <Link href="https://chakra-ui.com">
            Marketplace
          </Link>
        </NavItem>
        <NavItem 
          px="1rem" 
          py={{base: ".5rem", md: "2rem"}} 
          color="gray.500" 
          fontSize="1rem" 
          fontWeight="500" 
          borderBottom={{base: "solid 1px #ede7e7", md: "none"}}
        >
          <Link href="https://chakra-ui.com" color="#5850ec" whiteSpace="nowrap">
            Log in
          </Link>
        </NavItem>
        </Nav>

      <PseudoBox display={{base: "block", md: "none"}} py="1.5rem">
        <Button display="flex" flexDirection="column" onClick={() => setNavBarState(!navBarState)}>
          <Icon name="minus" />
        </Button>
      </PseudoBox>
    </NavBar> 

    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, ipsa molestiae aliquam earum architecto ducimus repudiandae quia labore nostrum?</div>  
    </div>
  )
}
export {NavbarComponent}

govindsingh55 · 2020-04-07T12:28:43Z

this what I had composed previously.

navin-moorthy · 2020-04-07T12:29:47Z

Not yet very clear how it would look responsively. In lower screen-sizes will it become a hamburger which when clicked opens the menu ?

Navbar Collapse can have hamburger menu on right or left, that will change the state of the responsiveness.

If the navbar item is a dropdown then how it is going to be behaving in responsive screen sizes ? As the normal way of having sub menus ? (same like what this does) ?

We will have the items that will get collapsed in NavbarCollapse when in mobile.

Like from popover state in large screens to inline state in smaller screen.

prasanna1211 · 2020-04-07T12:31:36Z

I have read this component and sorry I cannot get the answer from that chunk. My question was little different. "How will the code look like when it is in desktop and in mobile. Will it be the same (or) will it be different? If different can you just mention how the atoms will be composed ?"

prasanna1211 · 2020-04-07T12:34:43Z

We will have the items that will get collapsed in NavbarCollapse when in mobile.

Yes getting it now. So ideally the code is not going to change right ?
Also you have mentioned if we want dropdowns we need to use our custom dropdown. But in case of responsive screen how the Dropdowns will get converted to sub menus like this ?

navin-moorthy · 2020-04-07T12:38:45Z

We will have the items that will get collapsed in NavbarCollapse when in mobile.

Yes getting it now. So ideally the code is not going to change right ?

When the state changes to mobile, items can become full width.

Also you have mentioned if we want dropdowns we need to use our custom dropdown. But in case of responsive screen how the Dropdowns will get converted to sub menus like this ?

Yeah, we can convert the dropdowns to sub menus which we can compose it in dropdown for this behaviour. What do you say?

navin-moorthy · 2020-04-07T12:39:37Z

I have read this component and sorry I cannot get the answer from that chunk. My question was little different. "How will the code look like when it is in desktop and in mobile. Will it be the same (or) will it be different? If different can you just mention how the atoms will be composed ?"

Is this reply & questions to @govindsingh55 component? confused

prasanna1211 · 2020-04-07T12:40:05Z

I have read this component and sorry I cannot get the answer from that chunk. My question was little different. "How will the code look like when it is in desktop and in mobile. Will it be the same (or) will it be different? If different can you just mention how the atoms will be composed ?"

Is this reply & questions to @govindsingh55 component? confused

Yes, @govindsingh55 's code.

prasanna1211 · 2020-04-07T12:40:18Z

I can get the end goal, but not sure how to achieve it. Probably we can rethink about this once we finish Menu component first.

navin-moorthy added active labels Apr 7, 2020

navin-moorthy assigned prasanna1211, govindsingh55 and navin-moorthy Apr 7, 2020

govindsingh55 linked a pull request Apr 8, 2020 that will close this issue

feat(basic bavbar): initial navbar #44

Closed

navin-moorthy added stale and removed active labels May 6, 2020

navin-moorthy added stale and removed enhancement labels May 15, 2020

navin-moorthy added the Type: API discussion 💡 It's just a idea worth looking into, but doesn't mean it's priority. label May 15, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RFC] Molecule - Navbar #42

[RFC] Molecule - Navbar #42

navin-moorthy commented Apr 7, 2020 •

edited

Loading

prasanna1211 commented Apr 7, 2020 •

edited

Loading

govindsingh55 commented Apr 7, 2020

sandeepprabhakaran commented Apr 7, 2020

sandeepprabhakaran commented Apr 7, 2020

navin-moorthy commented Apr 7, 2020 •

edited

Loading

navin-moorthy commented Apr 7, 2020 •

edited

Loading

prasanna1211 commented Apr 7, 2020

govindsingh55 commented Apr 7, 2020 •

edited

Loading

prasanna1211 commented Apr 7, 2020

prasanna1211 commented Apr 7, 2020

govindsingh55 commented Apr 7, 2020 •

edited

Loading

govindsingh55 commented Apr 7, 2020 •

edited

Loading

navin-moorthy commented Apr 7, 2020 •

edited

Loading

prasanna1211 commented Apr 7, 2020

prasanna1211 commented Apr 7, 2020

navin-moorthy commented Apr 7, 2020

navin-moorthy commented Apr 7, 2020

prasanna1211 commented Apr 7, 2020

prasanna1211 commented Apr 7, 2020

[RFC] Molecule - Navbar #42

[RFC] Molecule - Navbar #42

Comments

navin-moorthy commented Apr 7, 2020 • edited Loading

The Goal:

Import

Usage

Props

prasanna1211 commented Apr 7, 2020 • edited Loading

govindsingh55 commented Apr 7, 2020

sandeepprabhakaran commented Apr 7, 2020

sandeepprabhakaran commented Apr 7, 2020

navin-moorthy commented Apr 7, 2020 • edited Loading

navin-moorthy commented Apr 7, 2020 • edited Loading

prasanna1211 commented Apr 7, 2020

govindsingh55 commented Apr 7, 2020 • edited Loading

prasanna1211 commented Apr 7, 2020

prasanna1211 commented Apr 7, 2020

govindsingh55 commented Apr 7, 2020 • edited Loading

govindsingh55 commented Apr 7, 2020 • edited Loading

navin-moorthy commented Apr 7, 2020 • edited Loading

prasanna1211 commented Apr 7, 2020

prasanna1211 commented Apr 7, 2020

navin-moorthy commented Apr 7, 2020

navin-moorthy commented Apr 7, 2020

prasanna1211 commented Apr 7, 2020

prasanna1211 commented Apr 7, 2020

navin-moorthy commented Apr 7, 2020 •

edited

Loading

prasanna1211 commented Apr 7, 2020 •

edited

Loading

navin-moorthy commented Apr 7, 2020 •

edited

Loading

navin-moorthy commented Apr 7, 2020 •

edited

Loading

govindsingh55 commented Apr 7, 2020 •

edited

Loading

govindsingh55 commented Apr 7, 2020 •

edited

Loading

govindsingh55 commented Apr 7, 2020 •

edited

Loading

navin-moorthy commented Apr 7, 2020 •

edited

Loading