Uno Documentation

Layout

Default Layout

Understand folder structure of template and what everything contains

project
└─ src
   └─ layout
      ├─ header
      |  ├─ popovers
      |  ├─ Header.vue
      ├─ sidebar
      |  ├─ NavAccordion.vue
      |  ├─ SidebarNavigation.vue
      │  └─ type.ts
      ├─ DefaultLayout.vue
      ├─ Mobilesidebar.vue

Default Layout Code

<script setup lang="ts">
import Header from "./header/Header.vue";
import MobileSidebar from "./MobileSidebar.vue";
import SidebarNavigation from "./sidebar/SidebarNavigation.vue";
</script>

<template>
  <aside
    class="fixed h-screen left-0 top-0 w-[260px] 2xl:w-[280px] z-40 hidden border-e border-e-border lg:block bg-card">
    <SidebarNavigation />
  </aside>

  <main class="h-full lg:ml-[260px] 2xl:ml-[280px]">
    <Header></Header>
    <MobileSidebar />

    <div class="px-7 mx-auto max-w-screen-2xl 2xl:px-20">
      <RouterView />
    </div>
  </main>
</template>

Sidebar Navigation Structure

You can find the navigation file from /data/sidebar.ts

navigation.ts

export const navigation = [
  {
    id: 1,
    menu: [
      {
        label: "Dashboard",
        route: "/course",
        icon: "cuida:dashboard-outline",
        children: [
          { label: "Analytics", route: "/analytics" },
          { label: "Finance", route: "/finance" },
          { label: "Career", route: "/career" },
          { label: "Course", route: "/course" },
          { label: "Sales", route: "/sales" },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Management",
    menu: [
      {
        label: "Users",
        route: "/users",
        icon: "cuida:users-outline",
        children: [
          { label: "List", route: "/users" },
          { label: "Edit", route: "/users/3" },
          { label: "Create", route: "/users/create" },
          { label: "Profile", route: "/users/profile" },
        ],
      },
      {
        label: "Products",
        route: "/products",
        icon: "cuida:box-outline",
        children: [
          { label: "List", route: "/products" },
          { label: "Edit", route: "/products/1" },
          { label: "Create", route: "/products/create" },
          { label: "Details", route: "/products/1/overview" },
        ],
      },
      {
        label: "Orders",
        route: "/orders",
        icon: "solar:cart-4-outline",
        children: [
          { label: "List", route: "/orders" },
          { label: "Details", route: "/orders/1" },
        ],
      },
      {
        label: "Invoices",
        route: "/invoices",
        icon: "nimbus:invoice",
        children: [
          { label: "List", route: "/invoices" },
          { label: "Edit", route: "/invoices/INV-0012" },
          { label: "Create", route: "/invoices/create" },
          { label: "Details", route: "/invoices/INV-0012/details" },
        ],
      },
    ],
  },
  {
    id: 3,
    name: "Others",
    menu: [
      {
        label: "Account Settings",
        route: "/settings",
        icon: "mdi:account-cog-outline",
        children: [
          { label: "Profile Info", route: "/settings" },
          { label: "Security", route: "/settings/security" },
          { label: "Plan & Billing", route: "/settings/plan-billing" },
          {
            label: "Two Factor Authentication",
            route: "/settings/two-factor-authentication",
          },
          { label: "Notification", route: "/settings/notification" },
          {
            label: "Social Media Links",
            route: "/settings/social-media-links",
          },
          {
            label: "Account Deactivation",
            route: "/settings/account-deactivation",
          },
        ],
      },
      {
        label: "Authentication",
        route: "/sessions",
        icon: "material-symbols:fingerprint",
        children: [
          { label: "Login", route: "/login" },
          { label: "Register", route: "/register" },
          { label: "Forget Password", route: "/forget-password" },
          { label: "Verify Email", route: "/verification" },
          { label: "Not Found", route: "/avscsf" },
          { label: "Server Error", route: "/server-error" },
          { label: "Maintenance", route: "/maintenance" },
        ],
      },
      {
        label: "Support",
        route: "/support",
        icon: "ri:headphone-line",
        children: [
          { label: "Overview", route: "/support" },
          { label: "Tickets", route: "/support/tickets" },
          { label: "Create Ticket", route: "/support/create-ticket" },
          { label: "FAQs", route: "/support/faqs" },
          { label: "Contact", route: "/support/contact" },
        ],
      },
    ],
  },
];

Folder Structure

Router