How do I make a sidebar section?

I want to make an instance of the sidebar to make SPA, but cannot figure out how to make the section. I can make a div block of sidebar but cannot use it as an instance section. I cannot resize the width of the section or the arrangement of the body. If I make the sidebar position absolute and put it in the back I can’t click on the navigation buttons, If I make position absolute and put it infront I can’t click on my contents. Anyone can explain how and what did I got wrong?

2 Likes

I found a workaround which by setting section to 0 height and the div block z-index turned around. not sure if that is the way to do it but it worked

The easiest way is to use the Modal section and play around with the settings of the Flexbox inside the Modal.

In the example below, I get rid of the Modal backdrop (since I want it to act as a Sidebar, not a Modal) and position it to the top left:

Then, on the Flexbox inside the Modal section, I will do the following:

  • get rid of the corner radiuses,
  • get rid of the shadows,
  • get rid of the little cross icon in the top right that’s not suited to a sidebar,
  • choose a width that suits me,
  • change the height to 100vh so the sidebar takes up the entire viewport.

Does that help?

1 Like

That works, thank you Joyce!

1 Like