golspoh-internal-dashboard v0.0.12

Golspoh Internal Dashboard

This is nuxt3 module for internal dashboard use.

Installation

Install golspoh-internal-dashboard, sass, tailwindcss in the nuxt3 project

  pnpm install golspoh-internal-dashboard
  pnpm add --save-dev @nuxtjs/tailwindcss
  pnpm install sass

Add Tailwind Configuration in tailwind.config.js

  darkMode: "class",

Add modules in nuxt.config.ts

  modules: ["golspoh-internal-dashboard", "@nuxtjs/tailwindcss"],

Usage/Examples

Create a layout file. layouts/default.vue

<template>
  <div>
    <Layout
      :sidebarItems="sidebarItems"
      :user="{
        name: `Yugi`,
        img: `https://plus.college.indiana.edu/images/profiles/profiles-768x768/assistant.jpg`,
      }"
      :config="{
        name: `Golspoh`,
        logo: `https://golspoh.com/golspoh-logo-rounded-bg.svg`,
      }"
      :theme="theme"
      @theme="handleTheme"
    >
      <slot />
    </Layout>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sidebarItems: [
          {
            type: "header",
            name: "Home",
            // icon: `<i class="fa-solid fa-house"></i>`,
          },
          {
            type: "item",
            name: "Home",
            icon: `<i class="fa-solid fa-house"></i>`,
            route: "/",
          },
          {
            type: "section",
            name: "Home",
            icon: `<i class="fa-solid fa-house"></i>`,
            items: [
              {
                type: "item",
                name: "Item1",
                icon: `<i class="fa-solid fa-house"></i>`,
                route: "/",
              },
              {
                type: "item",
                name: "Item2",
                icon: `<i class="fa-solid fa-house"></i>`,
                route: "/",
              },
            ],
          },
          {
            type: "header",
            name: "Home",
            icon: `<i class="fa-solid fa-house"></i>`,
          },
          {
            type: "section",
            name: "Home",
            icon: `<i class="fa-solid fa-house"></i>`,
            items: [
              {
                type: "item",
                name: "Item1",
                icon: `<i class="fa-solid fa-house"></i>`,
                route: "/",
              },
              {
                type: "item",
                name: "Item2",
                icon: `<i class="fa-solid fa-house"></i>`,
                route: "/",
              },
              {
                type: "section",
                name: "Home",
                icon: `<i class="fa-solid fa-house"></i>`,
                items: [
                  {
                    name: "Item1",
                    icon: `<i class="fa-solid fa-house"></i>`,
                    route: "/",
                  },
                  {
                    name: "Item2",
                    icon: `<i class="fa-solid fa-house"></i>`,
                    route: "/",
                  },
                ],
              },
              {
                type: "item",
                name: "Item2",
                icon: `<i class="fa-solid fa-house"></i>`,
                route: "/",
              },
            ],
          },
        ],
      };
    },
    methods: {
      handleTheme(theme) {
        this.theme = theme;
        localStorage.setItem("theme", theme);
      },
    },
  };
</script>