[Feature] Add Sidebar Navigation & Page Group Options

ofpiyush commented 3 years ago

Summary

User:

Just a question, in the editing view. There is the ability to search and filter pages quite easily, would it not make sense to be able to do this in the view version? This would not be altogether to different to how ServiceNow looks, where you have a ton of pages you can search through :slight_smile: And certain pages are accesible if you have the right role

Motivation

Too many pages in app.

Additional Context

Screenshot

Front conversations

Nikhil-Nandagopal commented 3 years ago

@areyabhishek @Debsourabh great point to consider in the settings for pages: A flag to switch between tab mode and sidebar mode

Nikhil-Nandagopal commented 3 years ago

Another point was organization of pages under each other for the deploy mode navigation hierarchy. A point to consider for page reordering and whether it would even be possible in the entity explorer now if we were to support this in the future

areyabhishek commented 3 years ago

Exciting! Finally someone who can benefit from the side navigation!

areyabhishek commented 3 years ago

A quick fix that we could implement for alleviating this users' immediate problem is something like this:

A longer-term fix would be sidebar navigation with search functionality that IMO should be an advanced user feature.

ofpiyush commented 3 years ago

Another point was organization of pages under each other

When I'd built our admin panel, I needed sections with pages in them. It was more to logically separate things. We didn't have that many pages.

Section headers were not clickable, just a visual separation. A blank page for section header wouldn't be the best experience, I would feel obligated to add a grid of subpages to that page.

But it would work fine as long as I can distinguish the "sections" on the navbar.

@areyabhishek do you mean sidebar should be advanced feature or search on sidebar?

KirtiChug commented 3 years ago

For building a customer support panel dashboard, the pages would require categorisation (eg: few pages will be in the product A category while few pages in the product B category). Even if we have a top bar can we have something like the below image: (where clicking on product A the user sees all pages under product A and can navigate to it)

Also, when can we expect this to be picked up (either left bar navigation or top bar categorisation)

areyabhishek commented 3 years ago

@KirtiChug Thanks for the idea. We'll try a similar style and introduce this in Appsmith.

somangshu commented 3 years ago

Another user requested for this. They have a lot of pages / links and want to conditionally show them to users.

samg666 commented 2 years ago

A Sidebar Natigation or Page Group will be necessary as I have many pages.

somangshu commented 2 years ago

Another example of navigation layouts

avifatal commented 2 years ago

Hi, New here.,, Here are my thoughts about the sidebar. I think the amount of pages should not be the trigger to implement this feature. If you search in google for "admin layout ux" it seems that 100% of the results has left sidebar. I think its a bad ux to put in the top. top navigations are more for websites and not admin/management platforms (except breadcrumbs).

Like other great things in appsmith, this one should be static or dynamic, allow to control the target (_blank or not). I think it should be reusable in every page I want. it should be foldable and stickyable , most important for me, when its opened, it should play nice with other canvas elements. stickyable - not participating in the page scrolling, meaning - always available for opening and clicking

Here is an example of a menu.

Another one: https://www.youtube.com/watch?v=wEfaoAa99XY

Thank you

Nikhil-Nandagopal commented 2 years ago

@avifatal thank you for the detailed information!

ryzam commented 2 years ago

I think appsmith should introduce the concept of master layout, so that developer can create one master design with left navigation menu/ header menu and other pages will be loaded on the screen master-layout

Nikhil-Nandagopal commented 2 years ago

Thanks for the feature idea @ryzam!

aviNrich commented 2 years ago

@Nikhil-Nandagopal can you please provide an estimation for that? Thanks

Nikhil-Nandagopal commented 2 years ago

@aviNrich probably sometime in Q1 of next year

eco-monk commented 2 years ago

Adding to this. For users developing internal tools which typically have a workflow. (Hierarchical pages, in a manner of speaking) Having the ability to configure navigation as breadcrumbs could come in handy.

innomalous commented 2 years ago

Really hoping the side navbar with the ability to have nested menu items would be added soon. The breadcrumbs would be really nice too.

dilippitchika commented 2 years ago

Hey @innomalous thanks for the info. What do you think is the biggest problem you face in the current navbar on top?

Like is it's not the usual position the app users are comfortable with, or it's just too many pages so it's hard to navigate using the top menu etc. Any info would help us a lot.

innomalous commented 2 years ago

Hi @dilippitchika, I feel the biggest issue, for now, is the inability to group them (to create nested menu items). Also, if the app may have too many pages - it gets cluttered.

The side navbar offers a more contemporary UI as is prevalent in most backend apps of the day. I think the ability to choose a position - top or side, will be great!

SamSampson-RIVAL commented 1 year ago

@ofpiyush @samg666 @innomalous

Sam from Appsmith here. We’re currently exploring this feature in detail and we’d love to get a deeper understanding of your needs with regard to navigation.

Have you ever created your own navigation using our widgets? If so, would you be willing to share screenshots of what you have built with me? Alternatively, we could jump on a quick call where you could show me what you have created. You can book some time in via my calendly here: [expired]

Privatecoder commented 1 year ago

@SamSampson-RIVAL do you still need feedback? I can provide a quick two production-example screen-share session.

dilippitchika commented 1 year ago

Hey @Privatecoder we are working on the designs and would love your feedback

Here's a link to the prototype - https://www.figma.com/proto/EkPT7FdqmArkk9L7mySA5S/NAV---Designs?page-id=357%3A182882&node-id=579%3A238541&viewport=138%2C579%2C0.06&scaling=scale-down&starting-point-node-id=579%3A238541&show-proto-sidebar=1

Here's a video explaining the flow of sidenav - https://www.loom.com/share/46f569efff974bef82f1005a5bd56e70

Please take a look and share feedback if any, we would really appreciate it

Privatecoder commented 1 year ago

@dilippitchika looks amazing, can't wait to see this in action as it really has become quite of a task to replicate any changes throughout the App with the current flow (i.e. copy my custom NavBar to all sub-pages within the App)

SamSampson-RIVAL commented 1 year ago

Hi @Privatecoder , yes it would be great to get some additional examples from you. Please select a time via this link :) https://calendly.com/samstudiorival/navigation-chat

rmwebmethod commented 1 year ago

Just wanted to check if this is still slated for this year and if so when? Thank you!!

dilippitchika commented 1 year ago

@rmwebmethod we are close to launching it in 2 weeks. Would you be interested in trying this feature out?

rmwebmethod commented 1 year ago

Absolutely!!

Get Outlook for iOShttps://aka.ms/o0ukef

From: dilippitchika @.> Sent: Monday, March 6, 2023 10:17:56 PM To: appsmithorg/appsmith @.> Cc: Robert McKay @.>; Mention @.> Subject: [EXTERNAL] Re: [appsmithorg/appsmith] [Feature] Add Sidebar Navigation & Page Group Options (#2282)

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

@rmwebmethodhttps://github.com/rmwebmethod we are close to launching it in 2 weeks. Would you be interested in trying this feature out?

— Reply to this email directly, view it on GitHubhttps://github.com/appsmithorg/appsmith/issues/2282#issuecomment-1457553072, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A2H3UIRBKATXNRHXM7DIEXLW23AIJANCNFSM4VBGVKFA. You are receiving this because you were mentioned.Message ID: @.***>

rmwebmethod commented 1 year ago

Let me know what we need to do to start trying it out! :)

dilippitchika commented 1 year ago

@dhruvikn can you please share the latest dp credentials and instructions for checking navigation here.

dhruvikn commented 1 year ago

Here you go folks - https://ce-21158.dp.appsmith.com/

You will be required to create a new account here. Once you do that and log in, create a new application, add a couple of pages to your app, navigate to "App Settings" and you'll see a new tab called "Navigation". There you'd be able to play around with different navigation styles, and you'll see a live preview of how these settings will affect your navigation.

@dilippitchika @rmwebmethod

CleanShot 2023-03-09 at 12 37 45

mogarick commented 1 year ago

Here you go folks - https://ce-21158.dp.appsmith.com/

Looks pretty nice. If I create something with the new account required for testing, can I migrate/copy this app to my normal account when the new version is released?

Whta's the ETA for the formal release?

dilippitchika commented 1 year ago

Yes @mogarick you can copy it to your normal account after the feature is live, the current release date is 27th march or 3rd april. We are pushing to get it out by 27th.

mogarick commented 1 year ago

I'm getting a 404 when trying to access https://ce-21158.dp.appsmith.com/  😢

dhruvikn commented 1 year ago

Hey @mogarick, we had an incident where all our previous DPs got down. Could please try this one instead? It has all the latest updates. https://appsmith-lsyvsxbq3-get-appsmith.vercel.app/

Please note, you will be required to create a new account here and follow the same steps as previously mentioned here.

mogarick commented 1 year ago

I didn't get pass from the signup screen. I get an error telling me something about Google recaptcha. I have no idea why since I'm not even signing up with a Google account.

dilippitchika commented 1 year ago

That's weird, thanks for letting us know. You can sign up in https://release.app.appsmith.com/ and test this if you want. It will be live in April 3