Layout

Blue Web offers a set of code to create a layout with a header, collapsible sidebar, and a main content area.

Without sidebar

<div class="blue-layout" style="height: 400px">
    <header class="blue-layout-header">Your header here</header>
    <main class="blue-layout-main">
        <div class="blue-layout-body">Your main content here</div>
    </main>
</div>

With sidebar

<div id="newLayout" class="blue-layout" style="height: 400px">
    <header class="blue-layout-header">
        <button
            type="button"
            class="btn blue-menu-item blue-btn-square d-flex d-lg-none"
            command="show-modal"
            commandfor="layoutDrawer"
            aria-label="Open drawer"
        >
            <svg class="bi" width="16" height="16" aria-hidden>
                <use xlink:href="#bi-layout-sidebar-inset"></use>
            </svg>
        </button>

        <button
            id="toggleLayoutSide"
            type="button"
            class="btn blue-menu-item blue-btn-square d-none d-lg-flex"
            data-blue-toggle="layout-side"
            aria-controls="layoutSide"
            aria-expanded="true"
            aria-label="Toggle sidebar"
        >
            <svg class="bi" width="16" height="16" aria-hidden>
                <use xlink:href="#bi-layout-sidebar"></use>
            </svg>
        </button>

        Your header here
    </header>

    <div id="layoutSide" class="blue-layout-side">
        <dialog class="blue-lg-modal blue-modal modal" id="layoutDrawer" aria-describedby="layoutDrawerLabel">
            <div class="offcanvas offcanvas-start">
                <div class="offcanvas-header">
                    <h1 class="h5 offcanvas-title" id="layoutDrawerLabel">Offcanvas</h1>
                    <form method="dialog" style="display: contents;">
                        <button type="submit" class="btn-close" aria-label="Close"></button>
                    </form>
                </div>
                <div class="offcanvas-body">
                    <div class="blue-layout-side-body">
                        <ul class="list-unstyled vstack">
                            <li><a href="#" class="btn blue-menu-item icon-link d-flex">Item 1</a></li>
                            <li><a href="#" class="btn blue-menu-item icon-link d-flex">Item 2</a></li>
                            <li><a href="#" class="btn blue-menu-item icon-link d-flex">Item 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
        </dialog>
    </div>
    <main class="blue-layout-main">
        <div class="blue-layout-body">
            <p>Your main content here</p>

            <button type="button" class="btn blue-btn-soft-primary" onclick="blueWeb.layout.dispose(newLayout)">
                Dispose layout instance
            </button>
        </div>
    </main>
</div>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        blueWeb.layout.init(newLayout)
    })
</script>

<svg xmlns="http://www.w3.org/2000/svg" hidden>
    <symbol id="bi-layout-sidebar-inset" viewBox="0 0 16 16">
        <path
            d="M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"
        />
        <path d="M3 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" />
    </symbol>
    <symbol id="bi-layout-sidebar" viewBox="0 0 16 16">
        <path
            d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"
        />
    </symbol>
</svg>

Adjust header logo size using CSS variable

Implementations for React and Blazor provide components to set a layout header with a logo and app title. By default the logo size is 2rem. You can override that value with CSS variable --blue-header-title-image-size:

Example

Live demo

Code

<div style="--blue-header-title-image-size: 1rem">
    <div class="blue-header-title d-inline-flex gap-2 fw-medium align-items-center px-3 py-2">
        <a href="."><img src="blue.svg" alt="My logo" class="blue-header-title-image" /></a>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href=".">My App</a></li>
            </ol>
        </nav>
    </div>
</div>

Copy

If your logo has another width than height, you can also use a combination of --blue-header-title-image-width and --blue-header-title-image-height.