Layout

Markup

The basic page layout consists of #page-container which contains #sidebar, #page-header, #main-container and #footer.

<body>

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

    <!-- SIDEBAR -->

    <nav id="sidebar" class="sidebar-collapse">
        <div class="content-header">
            Header
            <button class="btn btn-alt-light btn-aspect d-lg-none" onclick="toggleSidebar('sidebar')"><i class="fas fa-times"></i></button>
        </div>

        <div class="content-side">
            <ul class="nav-main">
                <li class="nav-main-heading">Heading</li>
                <li class="nav-main-item">
                    <a class="nav-main-link" href="#">
                        <i class="fas fa-* nav-main-link-icon"></i>
                        Link 1
                    </a>
                </li>
                <li class="nav-main-item"> ... </li>
                <li class="nav-main-item"> ... </li>
            </ul>
        </div>
    </nav>

    <!-- PAGE HEADER -->

    <header id="page-header">
        <div class="content-header">
            <div class="d-flex align-items-center">
                <button class="btn btn-light btn-aspect d-lg-none mr-2" onclick="toggleSidebar('sidebar')"><i class="fas fa-bars"></i></button>
                Header Content 1
            </div>
            <div class="d-flex align-items-center">
                Header Content 2
            </div>
        </div>
    </header>

    <!-- MAIN CONTAINER -->

    <main id="main-container">
        <div class="content">
            * MAIN CONTENT *
        </div>
    </main>

    <!-- FOOTER -->

    <footer id="page-footer" class="bg-body-light">
        <div class="content py-3">
            <div class="row">
                <div class="col-sm-6 py-1 text-center text-sm-left">Footer Content Left</div>
                <div class="col-sm-6 py-1 text-center text-sm-right">Footer Content Right</div>
            </div>
        </div>
    </footer>

</div>

</body>

Sidebar

Add the class sidebar-o to #page-container followed by the prefered color (.sidebar-dark or .sidebar-light).

To make the sidebar collapsible on small screens, add the class sidebar-collapse to #sidebar. To toggle the sidebar, you will need to add buttons to the sidebar header (.content-header) and somewhere on the main page, i.e. #page-header. Also, the toggle-sidebar.js must be included, but it's already in the beets.js so that should already be fine.

<body>

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

    <!-- SIDEBAR -->

    <nav id="sidebar" class="sidebar-collapse">
        <div class="content-header">
            Header
            <button class="btn btn-alt-light btn-aspect d-lg-none" onclick="toggleSidebar('sidebar')"><i class="fas fa-times"></i></button>
        </div>

        <div class="content-side">
            <ul class="nav-main">
                <li class="nav-main-heading">Heading</li>
                <li class="nav-main-item">
                    <a class="nav-main-link" href="#">
                        <i class="fas fa-* nav-main-link-icon"></i>
                        Link 1
                    </a>
                </li>
                <li class="nav-main-item"> ... </li>
                <li class="nav-main-item"> ... </li>
            </ul>
        </div>
    </nav>

    <!-- PAGE HEADER -->

    <header id="page-header">
        <div class="content-header">
            <div class="d-flex align-items-center">
                <button class="btn btn-light btn-aspect d-lg-none mr-2" onclick="toggleSidebar('sidebar')"><i class="fas fa-bars"></i></button>
            </div>
        </div>
    </header>

</div>

</body>

Mulit Level Menu

You can add multiple levels to a manu item. See the syntax below.

To make the parent <li> stay open when in a sub link, add .active and .open to the .nav-main-item AND .active to the .nav-main-link

<ul class="nav-main">
    <li class="nav-main-item open active">
        <a class="nav-main-link nav-main-link-submenu active" href="#" data-toggle="submenu">
            <i class="fas fa-home nav-main-link-icon"></i>Multi Level Menu
        </a>
        <ul class="nav-main-submenu">
            <li class="nav-main-item"><a class="nav-main-link" href="#">Link 1-1</a></li>
            <li class="nav-main-item"><a class="nav-main-link" href="#">Link 1-2</a></li>
            <li class="nav-main-item"><a class="nav-main-link nav-main-link-submenu" href="#" data-toggle="submenu">Sub Level 2</a>
                <ul class="nav-main-submenu">
                    <li class="nav-main-item"><a class="nav-main-link" href="#">Link 2-1</a></li>
                    <li class="nav-main-item"><a class="nav-main-link" href="#">Link 2-2</a></li>
                    <li class="nav-main-item"><a class="nav-main-link nav-main-link-submenu" href="#" data-toggle="submenu">Sub Level 3</a>
                        <ul class="nav-main-submenu">
                            <li class="nav-main-item"><a class="nav-main-link" href="#">Link 3-1</a></li>
                            <li class="nav-main-item"><a class="nav-main-link" href="#">Link 3-2</a></li>
                            <li class="nav-main-item"><a class="nav-main-link" href="#">Link 3-3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Page Header

Default theme color is light. To make the header dark, add .page-header-dark to the #page-container.

The header can be fixed or static (default). Fixed means that it stays on top of the page even when scrolling. Static follows the page scroll. Add .page-header-fixed to the #page-container.

<header id="page-header">
    <div class="content-header">
        <div class="d-flex align-items-center">
            <button class="btn btn-light btn-aspect d-lg-none mr-2" onclick="toggleSidebar('sidebar')"><i class="fas fa-bars"></i></button>
            Header Content 1
        </div>
        <div class="d-flex align-items-center">
            Header Content 2
        </div>
    </div>
</header>