Layouts

Default Layout

File: src/layouts/Default

The pages you create will be displayed in the default layout (src/layouts/Default.vue), which contains a header and vertical navigation.

This layout is fully responsive and, the side menu is displayed as a collapsible dropdown on mobile devices. It also comes with various design options: default, compact, and detached giving you the flexibility to customize the style of your website to suit your specific preferences.

The value of default layout style in the app.config.js is set to default. Additionally, we've created a changeTypeaction in src/store/layoutStore, allowing you to change the value dynamically.

<template>
  <div>
    <p> The current layout type is {{layout}}</p>
    <EBtn @click="toggleHeaderType"> Switch to Detached Design</EBtn>
  </div>
</template>

<script setup>
  import {useLayoutStore} from "@/store/LayoutStore.js"

  const layoutStore = useLayoutStore()
  
  // This is how get the current default layout style value
  const {layout} = storeToRefs(layoutStore)

  const toggleHeaderType = () => {
    // @possible-values : detached, default, compact
    layoutStore.changeType('detached')
  }

</script>

Note

We also auto store the layout design in the local storage for later usage.

Header <Header/>

Onomis dashboard comes with two types of headers: sticky and static.

The sticky header remains visible and fixed as the user scrolls down a webpage.

Related Page

• Header

Sidebar <Sidebar/>

As you customize the default layout, the appearance of the sidebar automatically adapts to reflect those changes. The sidebar's design evolves in response to your adjustments, ensuring a cohesive look that aligns with the overall layout transformation.

Related Page

Main animations

The content of your newly created page appears here.

Blank Layout

File: src/layouts/Blank

The blank layout is a minimal structure that serves as a foundation for new content or pages, typically without any initial content, sidebar, or header.

Error Layout

File: src/layouts/Error

This layout with its wrapper div and outlet component, offers a flexible solution for displaying error pages such as ( 404 pages).

Related Pages

• How to create a new page