[AppBar] Make composable

[quanglam2807]

The AppBar is too limited with only a few options. Google implements their web apps with full-size menu (and auto collapse to side menu + hamburger in mobile), search box,... I suggest that we should move to prop.children instead.

Something like this

menuItems = [
  { route: 'get-started', text: 'Get Started' },
  { route: 'customization', text: 'Customization' },
  { route: 'components', text: 'Components' },
  { type: MenuItem.Types.SUBHEADER, text: 'Resources' },
  { 
     type: MenuItem.Types.LINK, 
     payload: 'https://github.com/callemall/material-ui', 
     text: 'GitHub' 
  },
  { 
     text: 'Disabled', 
     disabled: true 
  },
  { 
     type: MenuItem.Types.LINK, 
     payload: 'https://www.google.com', 
     text: 'Disabled Link', 
     disabled: true 
  },
];

<AppBar>
  // Extends LeftNav with full-size menu on big screen
  <AppBarMenu menuItems={menuItems} />
  // Auto collapse to search icon on mobile
  <SearchBox handler={searchHandler} />
</AppBar>

What is your idea? I will work on this as soon as we all agree.

[hai-cea]

Related to #27

[slara]

👍

[e-monson]

👍 I really really need this.

[shaurya947]

I've decided to work a new appbar component that addresses this milestone. I'll be following the Material design guidelines for appbar mostly. I have always tried to address issues filed with the [AppBar] prefix. I wanted to share some of my initial ideas here and see what you guys think:

• For most props, if they're not specified, don't show them (rather than having a separate showIcon.. flag, or displaying something by default)
• Almost every prop is a node (navIcon, title, menuIcon), and one can pass an array of nodes for the action icons. This also allows the title to be a custom component that may / may not have a filter icon with it, or be a search component etc.
• Material Design guidelines specify that all icons in the appbar should be the same color. This calls for a new key for appBar inside theme-manager called iconColor. The title may have a different color so we can introduce another key for that.

What do you guys think? @quanglam2807 @oliviertassinari @hai-cea @slara @e-monson

So far everything that I've described is a prop. Speaking of composability, I assume we mean something with children. What use case am I missing? The one with tabs? That feels too specific, doesn't it?

[hai-cea]

@shaurya947 Sounds good to me - children should just be rendered inside the container element to provide some customization flexibility.

[oliviertassinari]

Regarding composability my approach would be to have multiple AppBar... components. At least one for the container, one for elements at the left and the right. Would be close to what IconMenu is or the Toolbar or the Table. I like the idea of @quanglam2807.

@shaurya947 I feel link your approach is close to what the ItemList is right now. We have seen the limitation of the long list of props of the ListItem. It's more restrictive, gives you less freedoom.
So, I don't think that we need an new AppBar.

[quanglam2807]

@oliviertassinari 👍 Thank you for your support!!! 💯
@shaurya947 For the appbar, actually, I've worked on it but I had to delay 'cause I was quite busy. You can check it at https://github.com/quanglam2807/material-ui/tree/app-bar
My approach was similar to Toolbar: when you put a component in Toolbar or AppBar, it will have special style elements. With this approach, with a few customizations, many components like Tabs or DropDownMenu will work perfectly with AppBar.

Also, there will be also components which are specifically designed for AppBar, e.g AppBarTitle, SearchBox, etc.

To work on this idea, I simply modified Toolbar which AppBar's styles. It worked pretty well and what we should aim first is to make the main components work. Then, later step is to add new components, such as SearchBox or better integration between LeftNav and Appbar.

[shaurya947]

I agree guys, instead of using props, it would be nicer to have sub-components for each section of the appBar.

I will work out an initial prototype soon and share it with y'all.