Navigation Drawer

This is the place to ask "How do I ...?"
Post Reply
User avatar
JayM
Posts: 91
Joined: Tue Jan 29, 2019 11:57 pm

Navigation Drawer

Post by JayM » Tue Feb 05, 2019 12:41 am

*What I want*

Im trying to recreate an old homescreen in Lightning (see link below) the Toolbar and dock are easy to do but that navigation drawer is so much harder than it looks. I don't mean the actual drawer contents though im talking about the way the drawer itself behaves, it follows my finger and only slides into view when I drag from the left edge of the screen. Notice how swiping/dragging in the middle of the screen is ignored anyone know how I can do this? im guessing its possible using stop points but there pretty much the only part of Lightning I don't know how to use 😔

https://youtu.be/RFYyAlQlPHg

*what I have*

I have a 2 page setup page 2 is default (home) on page 1 i have a full page panel with a web browser and a list of items inside this will eventually be the navigation drawer swiping/dragging right anywhere on page 2 brings page 1 (navigation drawer) into view obviously because desktop scrolling is enabled I could disable it but that would stop page1 (navigation drawer) from scrolling into view.

User avatar
TrianguloY
Posts: 106
Joined: Thu Jan 24, 2019 9:46 am

Re: Navigation Drawer

Post by TrianguloY » Wed Oct 09, 2019 11:06 pm

Let's see. First of all you don't need stop points for that, although they can help here. In order to have that behaviour you just need a clever placement of pinned panels. Check this screenshot.
Screenshot_20191010-004529.png
Screenshot_20191010-004529.png (746.1 KiB) Viewed 11357 times
With just two panels and an invisible item (that can also be removed by making the left panel have a right padding of the exact same width) your can have more or less what you want.
The two stop points are recommended for a better scrolling feel.

What this doesn't do however is to allow closing the panel by scrolling or clicking at the right part of the screen. You need scripts or bindings for that, by making an invisible item 'move' above the main panel when the container is scrolled. It can also be made so that the opacity changes, so the more the panel is scrolled, the darker the background becomes (that's what I did on my personal setup, I think I even showed it...somewhere on Google+).
If you want me to explain better how to achieve this 'allow to close from the right' I'll try my best.

User avatar
JayM
Posts: 91
Joined: Tue Jan 29, 2019 11:57 pm

Re: Navigation Drawer

Post by JayM » Sat Oct 12, 2019 12:53 pm

Cheers but I cant get this to work it's still detecting scrolling on the main panel :/

Post Reply