Project Based Navigation Menu

Ask for Help
1

Hi Everyone,

I’m building a project management tool and would love to get your advice on creating a dynamic, context-aware navigation structure. Here’s what I’m aiming to achieve:

1. Start Screen:

• Users should see a list of projects they’re involved in when opening the app.

• Navigation to other tabs or sections should be disabled until a project is selected.

2. Project Selection:

• Once a project is selected:

• It should be clear throughout the app which project is selected (e.g., the project name prominently displayed in a header or banner).

• The user should always have the option to return to the start screen and select another project. (for example by clicking on the project title)

• Other navigation menus should become visible only after a project is selected. Otherwise one would risk to change or view info without have a project selected which will cause mistakes.

Challenges:

I’ve explored a few things already:

• “Things in Things” functionality: This seems a plausible route, however in this case I can’t use the usual Glide navigation menu. And I would love to keep the usual menu since it’s responsive and working in all situations.

• Custom containers and buttons for navigation: May result in poor layout consistency on different screen sizes. Or you need to setup different versions of it working with visibility conditions which makes the app difficult to maintain.

• User-specific columns: Storing the selected project in the user profile based on that hide or show certain pages. But I don’t seem to find a nice way to conveniently show the selected project in every screen. Perhaps something could be done via custom css? Also all these filters and visibility rules that would need to be added add significant complexity to my app and reduce maintainability.

What I Need: → your inspiration / examples

Does anyone have experience implementing something similar or suggestions on the best approach?

I’m looking for a solution that balances:

  1. Ease of use for the user.

  2. Simplicity for app maintenance and scalability as functionality grows.

Thanks in advance for your help and insights!

2

a bit of extra info:

3

I am seing a helper table with user-specific column here. Or use the users table with user-specific.

Or, you can create your own navigation header with a component and custom CSS. Just don’t forget to force the will-change property on the main container of the app to be unset !important.
You will see what I am talking about here: CSS to get a component on top of the Desktop Nav Bar - #8 by MaximeBaker

How many screen to you want to have?

1 Like
4

Hi Maxime,

Thanks!
That seems like a superb solution and more or less what I had in mind. :slight_smile:

However I have a few questions:

  • I want to have the button on every screen → It will become a big app with many screens and subscreens (therefore my reference to simplicity for maintainability). Is there a way to enforce this, without needing to add a separate button on every screen?
  • I’m working on a darkish green “accent” style header in a “light” environment. In this situation my text of my other navigation menu items is white but the button is dark. That’s probably because glide thinks the button is on its normal place on the screen? Is there a way to overrule this?
  • If the app is on a “mobile” screen the text of the button overlaps with the top text of the app. Is it an option to show this on a nice place in the side menu when on mobile? Or underneath the text in a nice way.

If that would be possible but it would cost a significant portion of your time let me know.

5

Short answer, no. Long answer, you can actually maintain only one button in a screen, and when you update it, you could just copy and paste the component in other screen. Use workflows for every single action so it becomes centralized.

Try to set custom CSS property with !important. Is this working?

For the sidebar on a mobile, it will be complicated, or maybe impossible since you don’t have the possibility to add custom HTML to the main Glide DOM. I mean, it would be possible with a lot of CSS selectors to make your component visible at a specific position only when the sidebar div has the class “I don’t remember its name, but the class that make the div show or not”.

1 Like
6

Ok good idea to use a set workflow, that will simplify maintenance a lot. Thanks!

I wouldn’t know how to do that. So i asked ChatGPT :slight_smile:
It managed to change the color of the text but not the button
I currently solved that by not using an icon but just a unicode character ✎.
But if you would know how to change the color of the icon as well let me know!

Ok then it’s probably better to just not show it on mobile. Or just show a small button with only the pencil/icon like in your example. I guess the app will mostly be used on desktop anyways. I solved that atm by having a javascript that uses a 3 letter acronym for the project when used on mobile.

Here’s a brief movie thanks for your support.
If you have any more tips let me know!

Best Regards,

Tim

1 Like
7

I had some bugs with colors in ai components, refresh your page and check if the colors appear. If not, maybe you are not selecting the right element to apply the background color…

1 Like
8

Should be something related to the svg fill color.

1 Like