[Feature] Add Sidebar Navigation & Page Group Options

[ofpiyush]

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

Front conversations

[Nikhil-Nandagopal]

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

[Nikhil-Nandagopal]

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]

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

[areyabhishek]

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]

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]

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]

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

[somangshu]

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

[samg666]

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

[somangshu]

Another example of navigation layouts

[SamSampson-RIVAL]

@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]

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

[dilippitchika]

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]

@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]

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]

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

[dilippitchika]

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

[rmwebmethod]

Absolutely!! Get Outlook for iOS<https://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. @rmwebmethod<https://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 GitHub<#2282 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A2H3UIRBKATXNRHXM7DIEXLW23AIJANCNFSM4VBGVKFA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[rmwebmethod]

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

[dilippitchika]

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

[dhruvikn]

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

[mogarick]

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]

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]

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

[dhruvikn]

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]

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]

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

[GreenFlux]

another user requested page groups:
https://www.reddit.com/r/appsmith/comments/16atc8q/sub_page_on_menu/

cc @dilippitchika

[GreenFlux]

another user is requesting page groups:
https://discord.com/channels/725602949748752515/1154590479170666547

cc @dilippitchika

[geekyme-fsmk]

+1, this is useful for big apps with a lot of subpages. Our current workaround is to separate the big app into multiple small appsmith apps.

[justinzyw]

+1 very useful feature for managing mid-large size application navigation

[Nikhil-Nandagopal]

Users want to also ensure that embedded pages continue to be seen in the navigation hierarchy