Sample Admin template with collapsible side menu

[enyonam]

I will like to suggest that in the next upcoming update at least one Admin template sample should be added to the new projects templates in Wappler. This something very basic with Left Sidebar, Top Panel, Content Area and footer will be a good starting point. @Teodor Please please please make this happen.

Thank you.

[TomD]

You can vote for your own requests (as someone has already reminded me today).

[enyonam]

Thanks for the reminder. I however think this is one of essential things that shouldn’t even be subjected to a vote. It is the starting point for many of the projects Wappler will be used for and as such should be sorted quickly.

[Teodor]

Guys, with Wappler it’s really easy to build such a page - here’s a starter sample built up for 15mins and a few lines of CSS.
Download and play with it and customize it as you like:

sidebar-template.zip (278.2 KB)

[enyonam]

Thank you @Teodor for this. If this can be added as a sample template in the next update. I will be fine. Thank you.

[Kattouf]

Very good starting sample! I was able to replicate most of it.

q. Was the sidebar title padding trial and error, seems so random to me
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;

My Navbar code looks like this but yours is a Navbar Nav List, did u code that, any difference? I mean a vs ul

<div class="navbar-nav  ml-auto">
              <a class="nav-item nav-link" href="#">Link</a>
              <a class="nav-item nav-link" href="#">Link</a>

yours:

> <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
>             <li class="nav-item active">
>               <a class="nav-link" href="#">Home</a>

last:

You have a Container under Page-content-wrapper Display block. I don’t have that element to insert as child of Display blocks. Had to put Section > Container.

Otherwise I learned a lot, thanks for this.

[George]

Maybe we can add this to the standard bootstra 4 blocks for easy usage @Teodor

A few variations like collapsible to icons, pinnable, responsively expanded/collapsed based on available space - will be very nice

[TomD]

with Wappler it’s really easy to build such a page

I think ‘with Wappler + Teodor’ it’s really easy to build such a page. Some of us (perhaps most of us) don’t have @Teodor’s CSS skills.

I found the template very useful and a great of example of using CSS efficiently and effectively. There are countless templates like this available. I haven’t come across one which didn’t use a great deal more CSS, and typically additional javascript too. I think it would be great to have a selection of examples like this as starter templates.

[enyonam]

Thanks for agreeing with me. I see Wappler can indeed do lots of great stuff if you already know how to do them. But the sad fact is, most of the folks who will be searching for a tool like Wappler are not hardcore programmers and will certainly need some good starting points to get things rolling. I am excited that @George is already thinking about adding this to the blocks.

[kevinleesmith]

Now why could you not do that when I asked about a sample webapp login page with google/facebook login and email conformation processing, instead of getting angry, insulting me, and then deleting the wntire thread?

[Teodor]

@kevinleesmith
I already explained everything related to your request - the topic has been locked as it just lost its point.

If you want to build a login system follow the docs:

Security and Login

If you want to log in with Facebook, follow the docs:

Using OAuth2 Connector with Facebook