first commit

components/layout/full/Main.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted, ref, shallowRef, watch } from 'vue';
+import { useDisplay } from "vuetify";
+import sidebarItems from "@/components/layout/full/vertical-sidebar/sidebarItem";
+import { Menu2Icon } from "vue-tabler-icons";
+
+const sidebarMenu = shallowRef(sidebarItems);
+
+const { mdAndDown } = useDisplay();
+const sDrawer = ref(true);
+onMounted(() => {
+  sDrawer.value = !mdAndDown.value; // hide on mobile, show on desktop
+});
+watch(mdAndDown, (val) => {
+  sDrawer.value = !val;
+});
+</script>
+
+<template>
+  <!------Sidebar-------->
+  <v-navigation-drawer left elevation="0" app v-model="sDrawer">
+    <!---Logo part -->
+    <div class="pa-5">
+      <LayoutFullLogo />
+    </div>
+    <!-- ---------------------------------------------- -->
+    <!---Navigation -->
+    <!-- ---------------------------------------------- -->
+    <div>
+      <perfect-scrollbar class="scrollnavbar">
+        <v-list class="pa-6 pt-0">
+          <!---Menu Loop -->
+          <template v-for="(item, i) in sidebarMenu">
+            <!---Item Sub Header -->
+            <LayoutFullVerticalSidebarNavGroup :item="item" v-if="item.header" :key="item.title" />
+
+            <!---If Has Child -->
+            <LayoutFullVerticalSidebarNavCollapse class="leftPadding" :item="item" :level="0"
+              v-else-if="item.children" />
+
+            <!---Single Item-->
+            <LayoutFullVerticalSidebarNavItem :item="item" v-else class="leftPadding" />
+            <!---End Single Item-->
+          </template>
+        </v-list>
+      </perfect-scrollbar>
+    </div>
+  </v-navigation-drawer>
+  <!------Header-------->
+  <v-app-bar elevation="0" height="70" class="top-header">
+    <div class="d-flex align-center justify-space-between w-100">
+      <div>
+        <v-btn class="hidden-lg-and-up ms-md-3  text-muted" @click="sDrawer = !sDrawer" icon variant="flat"
+          size="small">
+          <Menu2Icon size="20" stroke-width="1.5" />
+        </v-btn>
+        <!-- Notification -->
+        <LayoutFullVerticalHeaderNotificationDD />
+      </div>
+      <div>
+        <LayoutFullVerticalHeaderProfileDD />
+      </div>
+    </div>
+  </v-app-bar>
+</template>

components/layout/full/Topbar.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+
+import icon1 from "/images/technology/vue-cat-icon.svg";
+import icon2 from "/images/technology/angular-cat-icon.svg";
+import icon3 from "/images/technology/next-cat-icon.svg";
+import icon4 from "/images/technology/react-cat-icon.svg";
+import icon5 from "/images/technology/nuxt-cat-icon.svg";
+import icon6 from "/images/technology/bt-cat-icon.svg";
+
+const items = [
+  {
+    text: "Templates",
+    icon: "window-frame-linear",
+    url: "https://adminmart.com/templates/nuxtjs/",
+  },
+  {
+    text: "Help",
+    icon: "question-circle-linear",
+    url: "https://adminmart.com/support/",
+  },
+  {
+    text: "Hire Us",
+    icon: "case-round-linear",
+    url: "https://adminmart.com/hire-us/",
+  },
+];
+
+const preview_link = [
+  {
+    title: "Nuxtjs Preview",
+    img: icon5,
+    url: "https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=56#product-demo-section",
+  },
+
+  {
+    title: "Angular Preview",
+    img: icon2,
+    url: "https://adminmart.com/product/matdash-material-angular-dashboard-template/?ref=56#product-demo-section",
+  },
+  {
+    title: "Nextjs Preview",
+    img: icon3,
+    url: "https://adminmart.com/product/matdash-next-js-admin-dashboard-template/?ref=56#product-demo-section",
+  },
+  {
+    title: "VueJs Version",
+    img: icon1,
+    url: "https://adminmart.com/product/matdash-vuejs-admin-dashboard/?ref=56#product-demo-section",
+  },
+  {
+    title: "Reactjs Preview",
+    img: icon4,
+    url: "https://adminmart.com/product/matdash-tailwind-react-admin-template/?ref=56#product-demo-section",
+  },
+
+  {
+    title: "Bootstrap Preview",
+    img: icon6,
+    url: "https://adminmart.com/product/matdash-bootstrap-5-admin-dashboard-template/?ref=56#product-demo-section",
+  },
+];
+</script>
+<template>
+  <div class="feature-topbar w-full py-4 px-6 w-100">
+    <div
+      class="d-flex flex-lg-row flex-column ga-3 justify-space-between align-center"
+    >
+      <div class="d-flex align-center ga-6">
+        <a href="https://adminmart.com/" target="_blank" class="lh-0">
+          <img src="/images/logos/logo-adminmart.svg" width="148"
+        /></a>
+        <div
+          class="d-lg-flex d-none items-center ga-4 topbar-links border-s border-opacity-25 ps-6"
+        >
+          <a
+            v-for="(item, index) in items"
+            :key="index"
+            class="d-flex items-center p-0 ga-2 lh-normal"
+            variant="text"
+            :href="item.url"
+            target="_blank"
+          >
+            <Icon :icon="'solar:' + item.icon" height="20" width="20" />
+            {{ item.text }}
+          </a>
+        </div>
+      </div>
+      <div class="d-flex flex-md-row flex-column align-center ga-4">
+        <h5
+          class="text-subtitle-1 font-weight-bold text-linear-gradient text-uppercase"
+        >
+          Checkout Pro Version
+        </h5>
+        <div
+          class="d-flex flex-md-row flex-wrap justify-md-end justify-center ga-3"
+        >
+          <v-menu>
+            <template v-slot:activator="{ props }">
+              <v-btn
+                variant="outlined"
+                class="border-blue text-surface text-h6 font-weight-medium"
+                rounded="sm"
+                v-bind="props"
+              >
+                <span class="d-flex ga-2">
+                  Live Preview <ChevronDownIcon size="20" />
+                </span>
+              </v-btn>
+            </template>
+            <v-list density="compact" elevation="10" class="pa-3">
+              <v-list-item
+                v-for="(item, index) in preview_link"
+                :key="index"
+                :value="index"
+                :href="item.url"
+                target="_blank"
+              >
+                <v-list-item-title
+                  class="d-flex align-center ga-3 text-h6 font-weight-regular"
+                >
+                  <img :src="item.img" width="18" :alt="item.img" />
+                  {{ item.title }}</v-list-item-title
+                >
+              </v-list-item>
+            </v-list>
+          </v-menu>
+          <v-btn
+            class="text-surface text-h6 font-weight-medium"
+            rounded="sm"
+            color="primary"
+            href="https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=56#product-demo-section"
+            target="_blank"
+          >
+            <span class="d-flex ga-2">
+              <Icon icon="solar:crown-linear" height="18" width="18" /> Get
+              Pro</span
+            >
+          </v-btn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

components/layout/full/logo/Logo.vue

@@ -0,0 +1,3 @@
+<template>
+  <LayoutFullLogoDark />
+</template>

components/layout/full/logo/LogoDark.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Logoimg from "/images/logos/logo.svg";
+</script>
+<template>
+  <div class="logo">
+    <NuxtLink to="/">
+      <img :src="Logoimg" alt="home" />
+    </NuxtLink>
+  </div>
+</template>

components/layout/full/vertical-header/NotificationDD.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+</script>
+<template>
+    <v-btn icon class="custom-hover-primary" size="small" variant="text" rounded="circle" color="primary" >
+        <v-badge dot color="primary" offset-x="-5" offset-y="-3">
+            <Icon icon="solar:bell-bing-line-duotone" height="22" />
+        </v-badge>
+    </v-btn>
+</template>

components/layout/full/vertical-header/ProfileDD.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { UserIcon, MailIcon, ListCheckIcon } from 'vue-tabler-icons';
+</script>
+
+<template>
+    <!-- ---------------------------------------------- -->
+    <!-- notifications DD -->
+    <!-- ---------------------------------------------- -->
+    <v-menu :close-on-content-click="false">
+        <template v-slot:activator="{ props }">
+            <v-btn class="profileBtn custom-hover-primary" variant="text" rounded="circle" v-bind="props" icon>
+                <v-avatar size="35">
+                    <img src="/images/profile/user-1.jpg" height="35" alt="user" />
+                </v-avatar>
+            </v-btn>
+        </template>
+        <v-sheet rounded="md" width="200" elevation="10" class="mt-2">
+            <v-list class="py-0" lines="one" density="compact">
+                <v-list-item value="item1" active-color="primary" >
+                    <template v-slot:prepend>
+                        <UserIcon stroke-width="1.5" size="20"/>
+                    </template>
+                    <v-list-item-title class="pl-4 text-body-1">My Profile</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="item2" active-color="primary">
+                    <template v-slot:prepend>
+                        <MailIcon stroke-width="1.5" size="20"/>
+                    </template>
+                    <v-list-item-title  class="pl-4 text-body-1">My Account</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="item3" active-color="primary"> 
+                    <template v-slot:prepend>
+                        <ListCheckIcon stroke-width="1.5"  size="20"/>
+                    </template>
+                    <v-list-item-title class="pl-4 text-body-1">My Task</v-list-item-title>
+                </v-list-item>
+            </v-list>
+            <div class="pt-4 pb-4 px-5 text-center">
+                <v-btn to="/auth/login" color="primary" variant="outlined" block>Logout</v-btn>
+            </div>
+        </v-sheet>
+    </v-menu>
+</template>

components/layout/full/vertical-sidebar/Dropdown/index.vue

@@ -0,0 +1,53 @@
+<script setup>
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+  <div class="mb-0">
+    <!---Single Item-->
+    <v-list-item
+      :href="item.external ? item.to : undefined"
+      :to="!item.external ? item.to : undefined"
+      rounded="lg"
+      class=""
+      color=""
+      :ripple="false"
+      :disabled="item.disabled"
+      :target="item.external === true ? '_blank' : undefined"
+    >
+      <!---If icon-->
+      <template v-slot:prepend>
+        <Icon
+          :icon="'solar:' + item.icon"
+          height="18"
+          width="18"
+          :level="level"
+          class="dot"
+          :class="'text-' + item.BgColor"
+        />
+      </template>
+      <v-list-item-title class="text-body-1 text-darkText">{{
+        item.title
+      }}</v-list-item-title>
+      <!---If Caption-->
+      <v-list-item-subtitle
+        v-if="item.subCaption"
+        class="text-caption mt-n1 hide-menu"
+      >
+        {{ item.subCaption }}
+      </v-list-item-subtitle>
+
+      <!---If any chip or label-->
+      <template v-slot:append v-if="item.chip">
+        <v-chip
+          color="secondary"
+          class="font-weight-bold"
+          size="x-small"
+          rounded="sm"
+        >
+          {{ item.chip }}
+        </v-chip>
+      </template>
+    </v-list-item>
+  </div>
+</template>

components/layout/full/vertical-sidebar/Icon.vue

@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+  <template v-if="level > 0">
+    <component
+      :is="item"
+      size="5"
+      fill="currentColor"
+      stroke-width="1.5"
+      class="iconClass"
+    ></component>
+  </template>
+  <template v-else>
+    <component
+      :is="item"
+      size="20"
+      stroke-width="1.5"
+      class="iconClass"
+    ></component>
+  </template>
+</template>

components/layout/full/vertical-sidebar/NavCollapse/index.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+  <!-- ---------------------------------------------- -->
+  <!---Item Childern -->
+  <!-- ---------------------------------------------- -->
+  <div class="mb-1">
+    <v-list-group no-action>
+      <!-- ---------------------------------------------- -->
+      <!---Dropdown  -->
+      <!-- ---------------------------------------------- -->
+      <template v-slot:activator="{ props }">
+        <v-list-item
+          v-bind="props"
+          :value="item.title"
+          :ripple="false"
+
+        >
+          <!---Icon  -->
+          <template v-slot:prepend>
+                    <Icon :icon="'solar:' + item.icon" height="18" width="18" :level="level" class="dot" :class="'text-' + item.BgColor" />
+                </template>
+          <!---Title  -->
+          <v-list-item-title class="mr-auto">{{ item.title}}</v-list-item-title>
+          <!---If Caption-->
+          <v-list-item-subtitle
+            v-if="item.subCaption"
+            class="text-caption mt-n1 hide-menu"
+          >
+            {{ item.subCaption }}
+          </v-list-item-subtitle>
+        </v-list-item>
+      </template>
+      <!-- ---------------------------------------------- -->
+      <!---Sub Item-->
+      <!-- ---------------------------------------------- -->
+      <div class="sublinks">
+        <template
+          v-for="(subitem, i) in item.children"
+          :key="i"
+          v-if="item.children"
+        >
+          <LayoutFullVerticalSidebarNavCollapse
+            :item="subitem"
+            v-if="subitem.children"
+            :level="level + 1"
+          />
+          <LayoutFullVerticalSidebarDropdown
+            :item="subitem"
+            :level="level + 1"
+            v-else
+          ></LayoutFullVerticalSidebarDropdown>
+        </template>
+      </div>
+    </v-list-group>
+  </div>
+  <!-- ---------------------------------------------- -->
+  <!---End Item Sub Header -->
+  <!-- ---------------------------------------------- -->
+</template>

components/layout/full/vertical-sidebar/NavGroup/index.vue

@@ -0,0 +1,7 @@
+<script setup>
+const props = defineProps({ item: Object });
+</script>
+
+<template>
+    <v-list-subheader color="darkText" class="smallCap text-uppercase text-subtitle-2 mt-5 font-weight-bold mini-text">{{ props.item.header}}</v-list-subheader>
+</template>

components/layout/full/vertical-sidebar/NavItem/index.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { Icon } from '@iconify/vue';
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+    <!---Single Item-->
+    <v-list-item
+        :href="item.external ? item.to : undefined"
+        :to="!item.external ? item.to : undefined"
+        rounded
+        class="mb-1"
+        :disabled="item.disabled"
+        :target="item.external === true ? '_blank' : undefined">
+        <!---If icon-->
+        <template v-slot:prepend>
+            <Icon :icon="'solar:' + item.icon" height="18" width="18" :level="level" class="dot" :class="'text-' + item.BgColor"/>
+        </template>
+        <v-list-item-title>{{item.title}}</v-list-item-title>
+        <!---If Caption-->
+        <v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
+            {{ item.subCaption }}
+        </v-list-item-subtitle>
+        <!---If any chip or label-->
+        <template v-slot:append v-if="item.chip">
+            <v-chip color="secondary" class="font-weight-bold" size="x-small" rounded="sm">
+                {{ item.chip }}
+            </v-chip>
+        </template>
+    </v-list-item>
+</template>

components/layout/full/vertical-sidebar/UpgradeBox/index.vue

@@ -0,0 +1,15 @@
+
+<template>
+    <v-sheet rounded="md" color="lightprimary" class="ExtraBox hide-menu mx-1 px-4 py-3">
+        <div class="d-flex align-center justify-space-between">
+            <div>
+                <h6 class="text-h6 text-10 mb-3">Check Pro Version</h6>
+                <v-btn href="https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=56#product-demo-section"  target="_blank" color="primary" flat>Check</v-btn>
+            </div>
+            <div class="position-relative me-n8">
+                <img src="/images/backgrounds/rupee.png" height="90" width="90" />
+            </div>
+        </div>
+    </v-sheet>
+</template>
+

components/layout/full/vertical-sidebar/sidebarItem.ts

@@ -0,0 +1,110 @@
+export interface menu {
+  header?: string;
+  title?: string;
+  icon?: any;
+  to?: string;
+  chip?: string;
+  BgColor?: string;
+  chipBgColor?: string;
+  chipColor?: string;
+  chipVariant?: string;
+  chipIcon?: string;
+  children?: menu[];
+  disabled?: boolean;
+  type?: string;
+  subCaption?: string;
+  external?: boolean;
+}
+
+const sidebarItem: menu[] = [
+  { header: "Home" },
+  {
+    title: "Dashboard",
+    icon: "adhesive-plaster-outline",
+    to: "/",
+  },
+  {
+    title: "Front Pages",
+    icon: "home-angle-linear",
+    to: "/front",
+    children: [
+      {
+        title: "Coba VueForm",
+        to: "/coba",
+        external: false,
+      },
+      {
+        title: "Coba VueForm2",
+        to: "/coba2",
+        external: false,
+      },
+      {
+        title: "Homepage",
+        to: "https://matdash-nuxt-main.netlify.app/front-pages/homepage",
+        chip: "Pro",
+        external: true,
+      },
+    ],
+  },
+  { header: "utilities" },
+  {
+    title: "Typography",
+    icon: "text-circle-outline",
+    to: "/ui/typography",
+  },
+  {
+    title: "Shadow",
+    icon: "watch-square-minimalistic-charge-line-duotone",
+    to: "/ui/shadow",
+  },
+
+  { header: "Pages" },
+  {
+    title: "Sample Page",
+    icon: "planet-3-line-duotone",
+    to: "/sample-page",
+  },
+
+
+  { header: "Ui" },
+  {
+    title: "Alert",
+    icon: "volume-small-broken",
+    to: "/ui-components/alerts",
+  },
+  {
+    title: "Button",
+    icon: "tag-horizontal-outline",
+    to: "/ui-components/buttons",
+  },
+  {
+    title: "Cards",
+    icon: "cardholder-linear",
+    to: "/ui-components/cards",
+  },
+  {
+    title: "Tables",
+    icon: "suspension-outline",
+    to: "/ui-components/tables",
+  },
+
+  { header: "auth" },
+  {
+    title: "Login",
+    icon: "login-3-line-duotone",
+    to: "/auth/login",
+  },
+  {
+    title: "Register",
+    icon: "user-plus-rounded-line-duotone",
+    to: "/auth/register",
+  },
+  { header: "Extra" },
+  {
+    title: "Tabler Icons",
+    icon: "sticker-smile-circle-2-line-duotone",
+    to: "/icons",
+  },
+];
+
+export default sidebarItem;