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

💻 Technologies Used

HTML, CSS, UnoCSS (Tailwind CSS), AlpineJS

🏡 Structure

The base layout includes meta information, a header, and a footer — all located in the +layout.essepage file under the public folder.

The main layout file is located at:
/public/+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.