A commonly used layout structure for websites — now available as a ready-to-use template.

💻 Technologies Used

HTML, CSS, UnoCSS (Tailwind CSS), AlpineJS

📙 How to Use

Wrap the page content you want to create with the <base-layout> component:

<base-layout>
    <div>
         contents
    <div>
</base-layout>

🏡 Structure

The base-layout includes meta information, a header, and a footer — all located in the /layout folder.

The main layout file is located at:
/layouts/base-layout.essepage

📝 Additional Notes

- Default Meta Info

The default meta settings can be modified in the +essepage.config.json file at the project root, under the essepage_meta_defaults property.

- Responsive Design

On desktop screens, the layout shows the logo and navigation links in the header.
On tablets and mobile devices, a hamburger menu button appears and triggers a slide-out menu.

- Header Menu

The header is built using pagePath provided by Essepage, so when you're on a matching page, the corresponding menu item is highlighted with a background color.

- Slide Menu Behavior

When the slide menu is open, scrolling of the underlying page is disabled using a PreventScroll function. Scrolling is re-enabled with the AllowScroll function when the menu is closed.