Layout

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

Your main content here

Code

<div class="blue-layout">
    <input id="my-layout-expand" type="checkbox" class="blue-layout-state blue-layout-state-expand" checked />
    <label
        class="blue-layout-toggle blue-layout-toggle-expand"
        for="my-layout-expand"
        title="Toggle sidebar"
        role="button"
    >
        <div class="btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0">🍔</div>
    </label>

    <input id="my-layout-drawer" type="checkbox" class="blue-layout-state blue-layout-state-drawer" />
    <label
        class="blue-layout-toggle blue-layout-toggle-drawer"
        for="my-layout-drawer"
        title="Toggle sidebar"
        role="button"
    >
        <div class="btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0">🍔</div>
    </label>

    <header class="blue-layout-header">Your header here</header>

    <aside
        class="blue-layout-side overflow-x-hidden overflow-y-auto h-100"
        style="color: var(--blue-sidebar-color); background: var(--blue-sidebar-bg);"
    >
        Your sidebar here
    </aside>
    <main class="blue-layout-main">Your main content here</main>

    <label
        aria-label="Close sidebar"
        for="my-layout-drawer"
        class="blue-layout-overlay bg-dark w-100 h-100"
        style="--bs-bg-opacity: 0.5;"
    >
    </label>
</div>

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:

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>

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.

Edit post on GitHub

Layout

Adjust header logo size using CSS variable