Vertical navbar

[kravets-levko]

What type of PR is this? (check all applicable)

• Feature

Description

• Navbar
  • use same theme for desktop and mobile navbar
  • weird expand/collapse animation
  • review menu structure
• Pages
  • test on different screen sizes
  • get rid of class="container" because it has fixed size and sometimes causes a horizontal scrollbar to appear test all pages with vertical navbar and fix issues
  • fix dashboard page title
  • fix add widget block on dashboard page in editing mode
  • fix issues with dashboard layout when container changes its dimensions. This generic solution also fixes cases when scrollbar appears in editing mode (old known issue) and when navbar is epanded/collapsed.
  • check and fix embed pages (visualization and dashboard)
• Update tests
• Cleanup

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

[arikfr]

Nice! The query editor page got messed up, but others seem to be fine.

[arikfr]

I pushed some updates to the vertical navbar and made the query editor work.

[susodapop]

The dashboard title and refresh controls float weirdly.

[kravets-levko]

Restored version info block:

[kravets-levko]

Now username will be displayed after avatar when menu is expanded (when collapsed - only avatar stays visible). Tried to keep all animations consistent 😄

[gabrieldutra]

3 points I had in mind that for me could be a little bit different (I don't have very specific suggestions 😕, but I'll bring they up in case you had any thoughts on them):

1. How about having the text color a bit closer to white (or more prominent) for better contrast?
2. Don't know if it's only with me, but I feel the dividers are too highlighted, not sure if it's better to remove them or just to make a softer transition.
3. This one is rather on Ant Design, the collapse animation doesn't affect Menu Titles, so in this case, doesn't affect the profile image. I tried to see if was quick to fix, but since it was minor I eventually just left it away.

[kravets-levko]

@gabrieldutra Regarding 1 and 2 - no problem, I'll fix colors. As for 3 - I see no an easy fix for this. But as for me it doesn't look too bad. I think we can return to it later. I'll ping you when I'll update colors (I also want to clean CSS a bit)

[gabrieldutra]

👍

I didn't notice it was now possible to mark a PR as a "Draft" after marking it as "Ready". Cool 😁

[kravets-levko]

That button is right below the Reviewers block in sidebar:

[kravets-levko]

@arikfr @gabrieldutra I adjusted text and dividers colors a bit, and did a cleanup stuff I wanted. I don't plan to add anything to this PR (unless you'll find any bugs), so please review it and let's merge it. Thank you!

[arikfr]

💅 💯

[gabrieldutra]

Adding a note for later fix for fullscreen pages (query & dashboard):

The .headless styling should be updated (maybe we don't even need to add it on the body anymore).

[daniellangnet]

Much love and appreciation for all your work and making this available open-source. Just wanted to share my two cents and say that I think this is a step backwards in terms of UX. Before, I could just read what the top menu items were, now I have to guess or try to remember which icon means what. I know I can expand the menu to show the labels, but why do this in the first place?

Maybe it's just us, but at least our team here frequently complains about the vertical nav in tools that we use (Intercom, Autopilot, etc) and not being able to find things easily.

Again, thanks for everything. Just wanted to share some feedback.

[arikfr]

Thank you for the feedback, @daniellangnet. The main reason for this change is that usually people will have more horizontal space than vertical one. By moving the navbar to the side we get more room for the content (think of the query editor for example).

The specific issue with navigation, I think that this can be addressed by either having better icons and/or always showing the titles. Here's a sneak peek of an alternative design we're looking at:

It takes more width than the current one, but maybe be a reasonable compromise for the purpose of easier discovery.

[arikfr]

Adding a note for later fix for fullscreen pages (query & dashboard):

The .headless styling should be updated (maybe we don't even need to add it on the body anymore).

.headless supposed to hide the nav bar. It doesn't anymore?

[daniellangnet]

@arikfr Thank you for the explanation! I can see how having more vertical space could be useful on some pages, yes. Also I think the alternative design you showed would in fact help with usability 👌

[gabrieldutra]

.headless supposed to hide the nav bar. It doesn't anymore?

🤔 true, I had in mind only the padding, but it used to hide .app-header-wrapper, which doesn't exist anymore. Will fix it.