Collapsible side menu, with footer

Wappler General How To
#1

I followed this discussion and downloaded the project which I like and think I can use.
However, I would like to add a footer similar to this article: https://docs.wappler.io/t/push-footer-to-bottom-of-viewport/12929

I followed the steps outlined there, but the footer does not move to the bottom. I think there might be some conflict of classes, maybe.
Attached is my modified version of the sidebar-template with my attempt to add the footer. If someone could take a look and see what it’s missing, that would be great!
Thanks, Dan
sidebar-template.zip (336.1 KB)

#2

Combining the two articles will not work. This is because flexbox is used.

In the first article, a flex-div with a horizontal direction (row) is used to shrink the page-content-wrapper when the sidebar is shown.

In the second article, the body element is used to display a flex-container in a vertical direction (column). This has the effect of growing the main element to fill remaining space.

By combing both articles, the main element is subjected to the condition in the first article, thus negating the effect of the second article.

A work around could be achieved using CSS Grid together with Flexbox, but that would mean recoding both articles.

Another, more practical solution is to not use the second article, but to calculate the available height for the main container. This can be done in CSS like

main {
    min-height: calc(100vh - 150px);
}

where 150px is the combined height of the navbar and the footer. This value will need to be adjusted to suit.

#3

Thank you @ben! That seems to work beautifully!

image
image1065×826 15.5 KB

Here is the new project with the footer, for anyone interested:
sidebar-template.zip (336.0 KB)

1 Like
#4

I’d like to take this concept a little further and add dynamic tabs to the content of the page.

My basic idea is to have a single tab rendered on page load, then for each of the items on the side menu, a new tab would be created when the user clicks that item. All tabs would be closable except for the first one. Theoretically, we would not need a menu item for the first tab.

image
image1569×1058 45 KB

I found an example of how to dynamically add tabs, with similar functionality, but not sure how to implement it in Wappler and if there is a better way.

Anyone have a suggestion how to go about this?
Thanks, Dan

Dynamic Bootstrap Tabs
#5

So, I was able to figure this out on my own. Using jQuery and Bootstrap documentation, I was able to get the adding and removing of the tabs working nicely. Any menu item selected will check if that tab exists and will either add it or select it. When you remove a tab, the previous tab is selected automatically. Tabs can be added or removed in any order without breaking anything. Feel free to jump in with suggestions or enhancements.

image
image1569×1059 28.6 KB

Attached is the project for anyone interested:
sidebar-template.zip (340.3 KB)

The next thing I’d like to do is get working contents inside each tab. Can I use partials, includes, routes or how do I efficiently display data from a database in a given tab on demand? I tried creating a route and copying that to my append code, but it doesn’t seem to work.
Any input would be greatly appreciated!
Thanks, Dan

#6

I’m realizing this is perhaps an older (pre bootstrap 5) way of doing the side menu and it doesn’t give me the option to have dropdown menu choices either. I would like to use the navmenu that bootstrap 5 provides.

Could someone get me started in Wappler with a menu similar to this: http://bootstrapessentials.com/fulldocs/components/navmenu/
I would still like it to be collapsible like the previous template, and have a top menu, footer and content area.
Thanks, Dan

#7

I was able to get this figured out using Nav List, Nav Link and Collapse components. It doesn’t show which item is selected, but otherwise works as expected.

–Dan

#8

@Dan may you please share your finding with screenshots or CSS code?
I’m surprised that such “easy-to-do” thing is so complicated to achieve in Wappler using NodeJS and layout-content approach.