[RFC] Molecule - Navbar

navin-moorthy commented 4 years ago

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.

prasanna1211 commented 4 years ago

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 commented 4 years ago

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

sandeepprabhakaran commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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? > 3. Can NavItem be a dropdown ? Yeah, it can be. But that dropdown can be a separate Dropdown component which we will build.

navin-moorthy commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

prasanna1211 commented 4 years ago

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

govindsingh55 commented 4 years ago

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 commented 4 years ago

this what I had composed previously.

navin-moorthy commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.

timelessco / chakra-components