Sidebar Navigation - FINAL INSTALLMENT

This will be my final entry to the saga that is a side bar navigation menu. The other posts I’ve made got pretty scattered because I was trying different methods. And then I completely botched my Loom account and lost the videos that were on each thread. The videos contained useful information so those posts are now incomplete. They will be closed, and redirected here. You can follow the chain of events here…

1st post: Sidebar and/or vertical menu
2nd post: Static Side Bar
3rd post: Side Navigation Menu

So now we’re here and this should be pretty straight forward as it’s the easiest version of a sidebar that I’ve done. Let us begin.


Example Image

Step 1 - Components & HTML


Steps:

  • Create 2 rows on a layout
  • Top row contains the Menu HTML
  • Click the Row settings and give it a custom css class of “sidenav” - no quotes, just the text
  • Second row contains a button to toggle the menu
  • In my case, I also created a regular menu to show on mobile only

Menu Row - HTML Component

<nav class="menu">
<header class="avatar">{loggedInUser.Image}
<h2>{loggedInUser.Name}</h2>
</header>
<ul>
<li class="menuLink"><a href="https://yourapp.com/page1">Page 1</a></li>
<li class="menuLink"><a href="https://yourapp.com/page2">Page 2</a></li>
<li class="menuLink"><a href="https://yourapp.com/page3">Page 3</a></li>
<li class="menuLink"><a href="https://yourapp.com/page4">Page 4</a></li>
</ul>
<ul>
<li class="menuLink"><a href="https://yourapp.com/login">Login</a></li>
</ul>
</nav>

Toggle Button Row - HTML Component

<p style="text-align: left;"><button id="toggle" class="btn-nav"><img src="https://www.flaticon.com/svg/static/icons/svg/1828/1828859.svg" width="25px" height="25px" /></button></p>

You can use any image here. I pulled this from FlatIcon for example.

Step 2 - Layout CSS

Add this to your Layout CSS page
/* --- Sidenav Toggle Button --- */

.btn-nav {
    background-color: transparent;
    border: none;
    padding: 5px;
}

.btn-nav:hover {
    /*background-color: #674ea7;*/
    border-radius: 25px;
}

.btn-nav:focus {
    outline: none;
}


/* --- Image and Thumb Wrap - used for sidenav avatar --- */

.thumb-wrap {
    max-width: 125px;
    max-height: 125px;
    overflow: hidden;
    margin: auto;
}

.thumb-wrap img {
    max-height: 125px;
    max-width: 125px;
    margin: 0 auto;
    display: block;
    padding: 2px;
    background-color: #fff;
    height: auto;
}


/* ===================================================================================================================== */


/* --- BEGIN SIDENAV --- */


/*This moves the whole application over the width of the sidebar that is set under '.menu' These values need to match */

@media only screen and (min-width: 768px) {
    .app {
        margin-left: 300px;
    }
}

.app-nav {
    margin-left: 0px;
}


/* This is toggled with a button to "close" the sidenav */

.menuhide {
    display: none;
}


/* Menu Settings */

.menu {
    color: white;
    background: #FAFAFA;
    height: 100vh;
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    outline: none;
}

.menuLink a {
    color: #3c3c3c;
    padding: 0.5em 1em 0.5em 3em;
    width: 100%;
    display: block;
    text-decoration: none;
    font-size: 16px;
}

.menuLink a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.menuLink a:focus {
    background-color: rgba(0, 0, 0, 0.1);
}

.menu .avatar {
    background: rgba(0, 0, 0, 0.1);
    padding: 2em 0.5em;
    text-align: center;
}

.menu .avatar img {
    border-radius: 50%;
    overflow: hidden;
    /*border: 4px solid #02dcff;*/
}

.menu .avatar h2 {
    font-weight: normal;
    margin-bottom: 0;
    color: #3c3c3c !important;
}

.menu ul {
    list-style: none;
    padding: 0.5em 0;
    margin: 0;
}

.menu ul li {
    font-size: 0.95em;
    font-weight: regular;
    transition: all 0.15s linear;
    cursor: pointer;
}

.menu ul li:focus {
    outline: none;
}

Step 3 - Layout JavaScript

Add this to your Layout JavaScript page
$('#toggle').click(function(){
   $('.sidenav').toggleClass('menuhide');
   $('.app').toggleClass('app-nav');
});

THE END

So unless I’ve made some glaring mistakes here, that should be everything. Pretty straight forward and configurable.

3 Likes

nice! is that ‘Paper’ or ‘Default’ ? is the radius and shadow through CSS is that what you got from ‘Paper’?

My login screen is not in any layout it is in its default position.
I got about 3 layouts and each has its own Menu based on the Role. I’ve been getting lazy though by just adding all pages and sub-pages into one big nav… trouble is you run the risk of making the database look too complex during first glance and if page from another layout (outside of logged in user’s Layout is pressed then ’ Not Authorized msg will appear.

've been adding html to Layout recently as i learnt the hard way. To be honest it would be bonus but i actually do not need a side nav other than one Role which is the Admin role who is likely have lots of pages and content so thinking here was to create an off-canvas side nav with push right (or resize page container )with fixed header nav… because it would free up screen space with cleaner look. The Admin most likley would be PC or Laptop user whereas all other Roles would be mobile/tablet users with less content and less pages so just header nav is fine.

Anyway… I think Chems got a secret to tell you about side nav/vertical menu.

sorry i asked silly question, I can see your CSS radius now

The theme is the light theme posted here - Community Created Themes

Hey @tim.young, I’m trying to figure out how to have the side menu collapse when loaded on a small/mobile screen, do you know how to achieve that?

Since I typically use the native Tadabase mobile menu to avoid any issues on various devices, the easiest way to do this is to add

@media only screen and (max-width: 992px) {
    .btn-nav {
        float: right;
    }
}

Don’t add that CSS yet, I’ve included it in the CSS below.

But some of the other code needs to change in order to use the menu on mobile. For example, we don’t want the menu to be open on page load so first thing to do is add “hidden” to the custom CSS class section of the menu row settings.

Next, use this CSS

/* --- Sidenav Toggle Button --- */
.btn-nav {
    background-color: transparent;
    border: none;
    padding: 5px;
}

.btn-nav:hover {
    /*background-color: #674ea7;*/
    border-radius: 25px;
}

.btn-nav:focus {
    outline: none;
}

@media only screen and (max-width: 992px) {
    .btn-nav {
        float: right;
    }
}

/* --- Image and Thumb Wrap - used for sidenav avatar --- */
.thumb-wrap {
    max-width: 125px;
    max-height: 125px;
    overflow: hidden;
    margin: auto;
}

.thumb-wrap img {
    max-height: 125px;
    max-width: 125px;
    margin: 0 auto;
    display: block;
    padding: 2px;
    background-color: #fff;
    height: auto;
}

/* ===================================================================================================================== */

/* --- BEGIN SIDENAV --- */

/*This moves the whole application over the width of the sidebar that is set under '.menu' These values need to match */

/*REMOVED FOR MOBILE USAGE --- 
@media only screen and (min-width: 768px) {
    .app{
        margin-left: 300px;
    }
}*/

/* --- MEDIA QUERY ADDED FOR MOBILE USAGE --- */
@media only screen and (min-width: 992px) {
    .app-nav {
        margin-left: 300px;
    }
}

/* This is toggled with a button to "close" the sidenav */

/*REMOVED FOR MOBILE USAGE --- 
.menuhide {
    display: none;
}
*/

/* Menu Settings */
.menu {
    color: white;
    background: #FAFAFA;
    height: 100vh;
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    outline: none;
}

.menuLink a {
    color: #3c3c3c;
    padding: 0.5em 1em 0.5em 3em;
    width: 100%;
    display: block;
    text-decoration: none;
    font-size: 16px;
}

.menuLink a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.menuLink a:focus {
    background-color: rgba(0, 0, 0, 0.1);
}

.menu .avatar {
    background: rgba(0, 0, 0, 0.1);
    padding: 2em 0.5em;
    text-align: center;
}

.menu .avatar img {
    border-radius: 50%;
    overflow: hidden;
    /*border: 4px solid #02dcff;*/
}

.menu .avatar h2 {
    font-weight: normal;
    margin-bottom: 0;
    color: #3c3c3c !important;
}

.menu ul {
    list-style: none;
    padding: 0.5em 0;
    margin: 0;
}

.menu ul li {
    font-size: 0.95em;
    font-weight: regular;
    transition: all 0.15s linear;
    cursor: pointer;
}

.menu ul li:focus {
    outline: none;
}

And finally, the JavaScript changes slightly to target the class ‘hidden’ that was added earlier

$('#toggle').click(function(){
   $('.sidenav').toggleClass('hidden');
   $('.app').toggleClass('app-nav');
});
1 Like

Thanks @tim.young, that did the trick for mobile, you are awesome!

It hides the menu on desktop now though, is there a way to have it show as a default on desktop and hide as default on smaller screens?

Yeah I’ll most likely have to change a lot of the existing code. I will try to do that for you soon.

I don’t want to trouble you, don’t do it just for me.

No worries! I was curious about that too

@tim.young
How are you setting up the application variable loggedInUser.Image? We understand how to create the new variable in the system settings but how are you pointing that back to the individual users Image field?

That’s a not an app variable, it’s a logged in user field.

That doesn’t make sense because the way you have it in your code it refers to an app variable just the same as how you are getting the Logged in users name.

@Chem @tim.young

Hey sorry for any confusion. You’re referring to this section right?

Both {loggedInUser.Image} and {loggedInUser.Name} were added to the HTML through the ‘Add Logged-In Field’ dropdown.

Logged-in fields and app variables look similar, but app variables require “!” at the start and end of the text.

{loggedInUser.Name}

vs

{!loggedInUserFullName!}

screenshot-build.tadabase.io-2021.01.19-13_21_49

@tim.young
Yes Thank you! It appeared confusing as your instructions didnt indicate how you got that field data. Also how to you get the log-out link for the menu items.

@Chem had a solution for adding a logout link that used JavaScript, but I don’t think I have that built anywhere anymore. For apps that I use this sidenav on, I just use the User Menu component. It simplifies things quite a bit since it works universally.

@tim.young so how do we incorporate Menu Component that into the HTML design of the sidenav?

Ah, forgot to make that distinction. I place the User Menu in the layout normally. It’s completely separate from the HTML in the page layout.

This is a bit more advanced, but here’s how you can add the logout link to the menu.

Step 1
Add a menu component with a Special Link > Logout item.

Step 2
Add the Menu to its own column and then edit the column

Step 3
In the CSS Design settings, add an “Additional CSS Class” called sign-out-container

Step 4
Add a blank list item with the id of “sidebar-signout” in your HTML menu. For example
<li id="sidebar-signout"></li>

Step 5
Find the component ID for your HTML menu

Step 6
Add the following to the JavaScript section (remember to change ‘component_layout_11’ to your component ID in Step 5)

TB.render('component_layout_11',function(data){
    $('#sidebar-signout').append($('.sign-out-container .navbar a'));
});

Step 7
Add CSS to make sure it matches the style of your HTML menu.
For example, to make the logout option look like the rest of my menu, I had to add the following to the CSS of the page.

.sign-out-container{
    width: 168px;
    float:right;
}
.sign-out-container .navbar {
        box-shadow: none;
}

.sign-out-container .navbar a{
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.sign-out-container .navbar-collapse{
    padding:0;
}

Here’s the end result
image

1 Like

For anyone using my sidenav from this topic, you can give the list item from Chem’s Step 4 a class of “menuLink” to give it matching CSS to the rest of the menu. Like this…

<li id="sidebar-signout" class="menuLink"></li>