@iservice365/layer-common 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 0.0.3
+
+### Patch Changes
+
+- ef16085: adjust services to navigation drawer
+
 ## 0.0.2
 
 ### Patch Changes

package/components/Layout/Header.vue

@@ -1,12 +1,7 @@
 <template>
   <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
     <div style="width: 264px" class="ml-2">
-      <nuxt-link
-        class="text-h6 font-weight-medium text-decoration-none APP_NAME"
-        :to="{ name: APP_NAME_ROUTE }"
-      >
-        {{ APP_NAME }}
-      </nuxt-link>
+      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
     </div>
 
     <v-row no-gutters>
@@ -32,86 +27,6 @@
         @click="toggleTheme"
       />
 
-      <v-menu offset="10px" :close-on-content-click="false">
-        <template #activator="{ props }">
-          <v-btn icon="mdi-dots-grid" variant="text" v-bind="props" />
-        </template>
-
-        <v-card
-          width="380"
-          max-height="400px"
-          elevation="2"
-          rounded="xl"
-          class="pa-4"
-        >
-          <v-row no-gutters>
-            <v-col cols="12">
-              <v-card width="100%" variant="tonal" rounded="t-xl b-0">
-                <v-row class="pa-4">
-                  <v-col cols="4">
-                    <v-btn
-                      prepend-icon="mdi-account"
-                      stacked
-                      rounded="xl"
-                      variant="text"
-                      class="text-capitalize text-subtitle-2"
-                      @click="redirect(APP_ACCOUNT, 'home')"
-                    >
-                      Account
-                    </v-btn>
-                  </v-col>
-
-                  <v-col cols="4">
-                    <v-btn
-                      prepend-icon="mdi-security"
-                      stacked
-                      rounded="xl"
-                      variant="text"
-                      class="text-capitalize text-subtitle-2"
-                      @click="redirect(APP_ADMIN, 'home')"
-                    >
-                      Admin
-                    </v-btn>
-                  </v-col>
-                </v-row>
-              </v-card>
-            </v-col>
-
-            <v-col cols=" 12" class="mt-2">
-              <v-card
-                width="100%"
-                min-height="50px"
-                variant="tonal"
-                rounded="b-xl"
-              >
-                <v-card-title class="text-center pb-0"> Apps </v-card-title>
-
-                <v-row no-gutters class="px-2 pb-2">
-                  <v-col
-                    v-for="item in apps"
-                    :key="item.title"
-                    cols="4"
-                    class="pa-2"
-                  >
-                    <v-btn
-                      stacked
-                      width="100%"
-                      :prepend-icon="item.icon"
-                      rounded="xl"
-                      variant="text"
-                      class="text-center text-capitalize text-caption"
-                      @click="redirect(item.link, item.landingPage)"
-                    >
-                      {{ item.title }}
-                    </v-btn>
-                  </v-col>
-                </v-row>
-              </v-card>
-            </v-col>
-          </v-row>
-        </v-card>
-      </v-menu>
-
       <v-menu offset="10px" :close-on-content-click="false">
         <template #activator="{ props }">
           <v-btn fab variant="text" icon v-bind="props" class="mx-2">
@@ -181,10 +96,11 @@ import { useTheme } from "vuetify";
 
 const search = defineModel("search", { type: String });
 
-const { redirect, apps } = useLocal();
+const { drawer } = useLocal();
+
+const { redirect } = useUtils();
 
-const { APP_ACCOUNT, APP_ADMIN, APP_NAME, APP_NAME_ROUTE } =
-  useRuntimeConfig().public;
+const { APP_ACCOUNT, APP_NAME, APP_NAME_ROUTE } = useRuntimeConfig().public;
 
 const theme = useTheme();
 

package/components/Layout/NavigationDrawer.vue

@@ -1,7 +1,19 @@
 <template>
-  <v-navigation-drawer permanent floating class="pr-2">
+  <v-navigation-drawer
+    v-model="drawer"
+    permanent
+    floating
+    class="pr-2 bg-primary"
+  >
     <v-list>
-      <slot name="action"/>
+      <v-list-item>
+        <v-list-item-content>
+          <v-list-item-title class="text-h6 text-white">
+            {{ APP_NAME }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      <slot name="action" />
       <template
         v-for="(navigationItem, navigationIndex) in props.navigationItems"
         :key="`${navigationItem.route.name}-${navigationIndex}`"
@@ -13,6 +25,21 @@
           :children="navigationItem.children"
         />
       </template>
+
+      <v-list-subheader>
+        <span class="font-weight-bold text-white">Services</span>
+      </v-list-subheader>
+      <template
+        v-for="(service, serviceIndex) in services"
+        :key="`${service.id}-${serviceIndex}`"
+      >
+        <NavigationItem
+          :name="`${service.id}-${serviceIndex}`"
+          :title="service.title"
+          :icon="service.icon"
+          :link="service.link"
+        />
+      </template>
     </v-list>
   </v-navigation-drawer>
 </template>
@@ -21,4 +48,43 @@
 const props = defineProps({
   navigationItems: { type: Array<TNavigationItem>, required: true },
 });
+
+const { drawer } = useLocal();
+
+const {
+  APP_NAME,
+  APP_SECURITY,
+  APP_HYGIENE,
+  APP_PROPERTY_MANAGEMENT,
+  APP_MECHANICAL_ELECTRICAL,
+} = useRuntimeConfig().public;
+
+const services = computed(() => {
+  return [
+    {
+      id: "security",
+      title: "Security",
+      icon: "mdi-shield",
+      link: APP_SECURITY,
+    },
+    {
+      id: "hygiene",
+      title: "Hygiene",
+      icon: "mdi-spray",
+      link: APP_HYGIENE,
+    },
+    {
+      id: "property-management",
+      title: "Property Management",
+      icon: "mdi-home",
+      link: APP_PROPERTY_MANAGEMENT,
+    },
+    {
+      id: "mechanical-electrical",
+      title: "Mechanical & Electrical",
+      icon: "mdi-wrench",
+      link: APP_MECHANICAL_ELECTRICAL,
+    },
+  ];
+});
 </script>

package/components/NavigationItem.vue

@@ -22,7 +22,8 @@
   </v-list-group>
 
   <v-list-item
-    v-else
+    v-if="props.route.name"
+    :key="props.name"
     :prepend-icon="icon"
     :to="props.route"
     rounded="e-pill"
@@ -30,6 +31,17 @@
   >
     {{ title }}
   </v-list-item>
+
+  <v-list-item
+    v-if="props.link"
+    :key="props.name"
+    :prepend-icon="icon"
+    :href="props.link"
+    rounded="e-pill"
+    class="text-subtitle-2"
+  >
+    {{ title }}
+  </v-list-item>
 </template>
 
 <script setup lang="ts">
@@ -50,10 +62,20 @@ const props = defineProps({
       return { name: "", params: {} };
     },
   },
+  link: {
+    type: String,
+    required: false,
+    default: "",
+  },
   children: {
     type: Array<TNavigationItem>,
     required: false,
     default: () => [],
   },
+  name: {
+    type: String,
+    required: false,
+    default: "",
+  },
 });
 </script>

package/nuxt.config.ts

@@ -21,6 +21,12 @@ export default defineNuxtConfig({
       APP_ACCOUNT: (process.env.APP_ACCOUNT as string) ?? "",
       APP_ADMIN: (process.env.APP_ADMIN as string) ?? "",
       APP_ORG: (process.env.APP_ORG as string) ?? "",
+      APP_HYGIENE: (process.env.APP_HYGIENE as string) ?? "",
+      APP_SECURITY: (process.env.APP_SECURITY as string) ?? "",
+      APP_PROPERTY_MANAGEMENT:
+        (process.env.APP_PROPERTY_MANAGEMENT as string) ?? "",
+      APP_MECHANICAL_ELECTRICAL:
+        (process.env.APP_MECHANICAL_ELECTRICAL as string) ?? "",
     },
   },
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"