#### Scrollable Layout

To enable full scrolling and view all content, please add `data-layout-position="scrollable"` to the `<html>` tag.

Scrollable Layout: Both the topbar and sidebar scroll independently, ideal for long menus or fixed header content.

#### Horizontal Layout

To enable the Boxed Layout, add `data-layout="topnav"` to the `<html>` tag. This switches the layout to top navigation mode, offering more horizontal space and better usability by placing the sidebar at the top.
In the same file, add `<?php include('partials/horizontal-nav.php') ?>` instead of including it from the general `partials` folder. Place this include inside `partials/menu`.

Horizontal Layout: Features top Navigation with menu items aligned horizontally.

#### Compact Layout

To use the compact layout, follow this structure: wrap your page title in `<div class="container-fluid">` and place your main content inside `<div class="container-xl">`. This ensures proper spacing and alignment.

Compact Layout: Page content width is constrained within a container for a cleaner, narrower layout.

#### Boxed Layout

To enable the boxed layout, add `data-layout-width="boxed"` to the `<html>` tag. For optimal spacing and usability, we also recommend adding `data-sidenav-size="sm-hover"` to make the sidebar compact while keeping more room for content.

Boxed Layout: The body width is fixed at 1340px, centering the content with surrounding margins.

#### Preloader Layout

To enable the preloader, please add the following code inside the `<body>` tag:

    <!-- Preloader -->
    <div id="preloader">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

Preloader Layout: Displays a loading animation before the main content appears, enhancing the user experience during initial page load or content fetching.