Simple sidebar menu


#1

Hello! Here I am to tell you about a simpler way to have a sidebar with a menu on it. It is based on an earlier post by @mika in Ultra simple menu example +swipe function, and it uses the Gesture Handler Extension made by himself available at Gesture Handler Extension

This topic is to thank him for the free extension and to share with all the community a simpler way to have a simple sidebar menu with a swipe


It is needed:
a) One (1) horizontal arrangement in my example named: “Universe”, and set its Horizontal alignment to the Right.
b) Two (2) vertical arrangements in my example named: “Menu” and “Screens” inside the Universe arrangement
c) One (1) clock
d) Gesture Handler Extension by @mika
e) Any vertical or horizontal arrangements you want inside the “Screens” arrangement and their buttons in the “Menu” arrangement
f) An action bar (optional) - I made a header with one horizontal arrangement and a button at the left side

Trick to make it look like the Menu is appearing over the Screen:

  1. Set the Align Horizontal of arrUniverse to Right
  2. Also, set the Align Horizontal of arrScreens to Right
  3. Follow the instructions and set a Vertical or Horizontal Screen inside Screens and use it for your things.

When the clock is ticking it will lower or increase the width percentaje of arrScreens but it will not move the things inside the arrScreen1, making it will look like the Menu is actually over the Screen, but you and I will know that is not :smiley:

If you add a shadow next to the arrMenu, it will increase the visual effect


Here are some screenshots:

These are the blocks:

and you can find the .aia and the .apk file here:
SidebarSwipeGesture.aia (19.2 KB)
SidebarSwipeGesture.apk (2.3 MB)


Also, by adding this block, you can hide the menu just by pressing outside the menu


If you find this way useful, remember you can always donate to the master mind behind this extension at https://nmd-apps.jimdo.com/


Note: If in the blocks I could get start X and current X, I could manage a way to make a better animation of the sidebar menu


[Free] Gesture Handler Extension
Adding a sidebar
Horizontal Arrangement and Vertical Arrangement Extension
#2

#3

Great! I don’t know how to make extensions so my contribution is with blocks :slight_smile: and this time helped by other extension :joy:


#4

gracias por compartir mantener el buen trabajo


#5

What I am not understanding is this, if you have multiple pages, you have to repeat the whole code each time?


#6

If you have multiple screens, and you want the same sidebar menu in every one of them, yes. This is a workaround, a simpler and easier way to do it is using Andres’ Sidebar Extension:

If you have only one screen, you could use multiple arrangement to show different parts of your app


#7

thank you for your example it is very well explained, but when I’m in the screen 2 and 3 the gesture does not work, why?