search

geist-org / geist-ui

A design system for building modern websites and applications.
https://geist-ui.dev
MIT License
4.31k stars 332 forks source link

Navigation component #249

Closed wcastand closed 4 years ago

wcastand commented 4 years ago

Feature request 🚀

i couldn't find a navigation component or example. A Navbar with eventually some mobile design would be nice or an example to show how to use what's already there to do it with next.js or something like react-router maybe or "vanilla".

Expected:

Examples:

Programme:

Others:

unix commented 4 years ago

Can you give more examples or other similar components? (Nav components are really what we lack, I am inverstigating such components.)

wcastand commented 4 years ago

Most nav are similar but there is different complexity. Not sure this is what you are looking for but lib using tailwind has some good nav components. Bootstrap, antd, etc all have example of nav design but most of them are not doing the mobile nav as a hamburger menu apparently ( maybe too complex to implement and too specific for each site/app).

something quite simple like tailblock nav in the header section could be a good start.

or the one in tailwind ui : here my company paid for it and there are good ones which basically on a mobile create a hamburger menu.

justmelnyc commented 4 years ago

A good start could be to recreate the Vercel Navigation, it's a combination of an a and with a 2 line hamburger on mobile. somehow make tabs work with routing without users having to implement the routing manual maybe.

unix commented 4 years ago

This component looks great, but they're hard to abstract. They are more like an abstraction based on business logic, not the basic component unit. (In short, the granularity is too large)

For example, Breadcrumbs can meet the needs of more users, the Header or Navigation is a little fuzzy, users will need many different features, but there is no intersection between functions:

So, I don't think we should leave everything to the component library, maybe a collection repo named zeit-ui-admin can solve these problems. Just like tailblocks, we offer some solutions in another repo, they are a collection of components with a higher level of abstraction, all users can use these sinppets to do their works.

unix commented 4 years ago

So, my thoughts are as follows:

  1. We can provide basic component similar to Breadcrumbs, but higher level component cannot.
  2. We can provide another repo to show the compose components, and common code snippets.
wcastand commented 4 years ago

I like the idea of a repo with example of complex system, like Navigation headers, etc like what tailblock or tailwind ui are doing works great and let you adapt to your use case.

unix commented 4 years ago

I add Breadcrumbs component on #253 as a supplement to Navigation.

wcastand commented 4 years ago

For the repo, you think it should be part of zeit-ui org. or a completely separate repo?

unix commented 4 years ago

@wcastand I think it should be part of zeit-ui org, but if someone else builds an extra repo, that's good too. Sounds like you want to build this repo? If so, I will give you permission when you have a minimum version available. (😄 Or you just want a repo of your own?) Want to know more about your ideas.

wcastand commented 4 years ago

i was mostly looking for how you want to handle it :) i don't mind starting the repo but not sure what we would want in it except a nav basically right now and that seems a bit short for a repo/website x)

Also don't really want to maintain it by myself mostly because like i said, not sure what should be in it x). Most of it is already in the current website/docs.

Could it make more sense to add a section to the curent website with those complex components? Makes kind of more sense to me instead of creating a new place to look for those. especially since i don't think there is that many stuff we want to add there at least for now.

What do you think?

unix commented 4 years ago

Agreed with your point, but I have some considerations:

For me, I want to differentiate between components lib and best practices. for example, Popover is a basic component, but Nav is a best practices. User install and use component lib, but the best practices only provide code snippets. I want to use another website to show examples that are not easy to abstract, like:

Or it's more appropriate to call them templates, these templates are a combination of one or more components, users can copy code directly to solve similar functions. I don't want to add there examples to the current document site, this makes the document site seem out of focus, but I think it's good plan to add links like material-ui.

Reference sites:

unix commented 4 years ago

Transfer to #262 , If anyone wants to discuss it, please reopen it.