Sidebar Beets Exclusive

About

The Beets sidebar is a powerful component that adds styling to the elements within.

Themes

There are two color themes for the sidebar. The default is white but if you add .sidebar-dark to #page-container you will activate the dark theme. Shadows and borders will be altered to fit the theme.

<div id="page-container" class="sidebar-o sidebar-dark">

    <nav id="sidebar">
        ...
    </nav>

</div>

Accent colors

You can add an accent color (left border) on your active menu links by adding .sidebar-accent-{theme-color} to #page-container. Default is no accent color at all.

<div id="page-container" class="sidebar-o sidebar-accent-beets">

    <nav id="sidebar">
        ...
    </nav>

</div>

Collapsable

When the viewport is of medium sized width or smaller (see Breakpoints for reference), the sidebar will collapse so that it will be invisible. This is great for mobile devices.

Add .sidebar-collapse to #sidebar to make it collapsable.

A collapsed sidebar needs to be toggled on and off using a <button> or <a> to actually be usable. The button can be placed wherever you like but in this example it has been placed in the #page-header which is a very common placement.

The beets.js JavaScript file contains the function toggleSidebar() that is used to show and hide the sidebar. Insert the sidebar id (sidebar) into the function and use onclick="" to activate it. To hide the visible sidebar, use the same function on a <button> or <a> inside the .content-header in #sidebar.

The offset created by .sidebar-o in #page-container is removed when the sidebar is collapsed.

<header id="page-header">
    <div class="content-header">

        <!-- Button to show sidebar -->
        <button class="btn btn-alt-light btn-aspect d-lg-none" onclick="toggleSidebar('sidebar')">
            <i class="fas fa-bars"></i>
        </button>

    </div>
</header>

<nav id="sidebar" class="sidebar-collapse">
    <div class="content-header">
    
    <!-- Logotype -->
    <img src="..." style="height: 40px;">
    
    <!-- Button to close sidebar -->
    <button class="btn btn-ghost-secondary btn-aspect rounded-circle d-lg-none" onclick="toggleSidebar('sidebar')">
    	<i class="fas fa-times"></i>
    </button>
    
    </div>
</nav>

Navigation

One of the biggest benefits of the Beets sidebar is the integrated styling for navigation.

The navigation uses <ul> with some classes for styling and is placed inside .content-side in #sidebar.

<nav id="sidebar">

    <div class="content-header">...</div>
    
    <div class="content-side">
    
        <-- Navigation is placed here -->
    
    </div>

</nav>

Regular menu item

For a basic link, use the markup below. Add more <li>s to add more links. The icon is optional and if you don't want an icon, just leave ot the <i>.

<ul class="nav-main">
    <li class="nav-main-item">
        <a href="#" class="nav-main-link">
            <i class="fas fa-heart fa-fw nav-main-link-icon"></i>
            Link 1
        </a>
    </li>
</ul>

Multi level menu

Only one submenu level is supported at the moment.

Nest <ul>s with some classes to make multi level menus. The main menu gets an arrow that animates when the submenu opens.

It is not recommended to use icons inside of the submenus due to the spacings.

There are some classes you can use together with PHP to improve functionality. Add .open to .nav-main-item to make the submenu stay open, and add .active to .nav-main-item and .nav-main-link-submenu to give them an "active" styling.

<ul class="nav-main">
    <li class="nav-main-item active open">
        <a href="#" class="nav-main-link nav-main-link-submenu active" id="link-1" onclick="toggleSubmenu('link-1')">
            <i class="fas fa-heart fa-fw nav-main-link-icon"></i>Multi level menu
        </a>
        <ul class="nav-main-submenu">
            <li class="nav-main-item"><a href="" class="nav-main-link">Link 1-1</a></li>
            <li class="nav-main-item"><a href="" class="nav-main-link">Link 1-2</a></li>
            <li class="nav-main-item"><a href="" class="nav-main-link">Link 1-3</a></li>
        </ul>
    </li>
</ul>