I know I have posts about sidebars scattered across this forum (sorry) but I’m on a quest. And I won’t stop until I find the holy grail.
I was able to create a static sidebar but it’s far from complete. It’s not responsive at all, and I can’t seem to get rid of the large white space gap between the sidebar and the page container.
Here’s the HTML component that’s placed in my Layout -
/* The sidebar menu */
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
.x-page-container {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
Mine is not, no. But I don’t have to write any css for the sidebar, I think. I can just use the column settings in the builder to set what devices it’s visible on. On mobile, I don’t mind using the native tadabase menu
Thumbnail wrapper on the {loggedInUser.Employee Photo} is restrictive. Discussed with Moe in another thread that access raw values (src) for logged in user fields will be added at some point.
@moe you might be able to clarify this - i class icons are not showing up. They won’t even save in the HTML component after closing it and reopening. Here’s my example code.
@Chem this one is for your JS skills. The sidenav is collapsible until I add a field in the HTML. For example, loading my user photo in the sidenav with <div class="user-photo">{loggedInUser.Employee Photo}</div> breaks the JS. I’m assuming it has something to do with the {} brackets.
It’s not accurate in the screen shot because that’s before I changed it - just FYI. I created a count field to count the records assigned to the user in the notes table. Using that field in the HTML + CSS to create the “badge”
Correct. We’ll take your beautiful design and make it as an option when adding a menu.
There will be a 3rd menu option called “Vertical Slideout” and we’ll build all of these custom setting you did into the menu. Won’t be for a little while since we’re doing some more page builder optimization first.
@intelligroup Sure! First set up your field in whatever table you want, it’s going to be a count field - and it’s counting records in a connected table.
For me, the count field was created in the Users table, and it counted the number of Notes (from a connected Notes tabled) that the User was assigned to.
On a page, create a HTML component and below I’ll post the foundation of the design.
The HTML for the field is going to contain the count field. For the example here I’ll just use the number 6 and a link to the Notes page. Here’s the code.
By giving the span 2 classes - num and flag, you can style the num (the returned value of your count field) separately from the “badge”. For example, if you wanted to create different color badges for different purposes.
Hey @tim.young Did you figure this one out yet? It’s hard to know whats going on without looking at the setup. Feel free to @ me on support and I’ll be more than happy to take a look.
I really like your design and style!