@goweekdays/layer-common 1.0.3 → 1.0.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @goweekdays/layer-common
 
+## 1.0.5
+
+### Patch Changes
+
+- 34c8471: Update custom navigation
+
+## 1.0.4
+
+### Patch Changes
+
+- e2ffd16: Add dark theme
+
 ## 1.0.3
 
 ### Patch Changes

package/components/Layout/NavigationDrawer.vue

@@ -1,7 +1,13 @@
 <template>
-  <v-navigation-drawer v-model="drawer" permanent floating class="pr-2">
-    <v-list class="py-1">
-      <slot name="action"></slot>
+  <v-navigation-drawer
+    v-model="drawer"
+    permanent
+    floating
+    :class="props.class"
+    :location="props.location"
+  >
+    <slot name="action"></slot>
+    <v-list>
       <template
         v-for="(navigationItem, navigationIndex) in props.navigationItems"
         :key="`${navigationItem.title}-${navigationIndex}`"
@@ -12,15 +18,34 @@
           :route="navigationItem.route"
           :children="navigationItem.children"
           :disabled="navigationItem.disabled"
+          :rounded="props.rounded"
         />
       </template>
     </v-list>
+
+    <template #append>
+      <slot name="append"></slot>
+    </template>
   </v-navigation-drawer>
 </template>
 
 <script setup lang="ts">
+import type { PropType } from "vue";
+
 const props = defineProps({
   navigationItems: { type: Array<TNavigationItem>, required: true },
+  rounded: {
+    type: String,
+    default: "e-pill",
+  },
+  class: {
+    type: String,
+    default: "pr-2",
+  },
+  location: {
+    type: String as PropType<"left" | "right">,
+    default: "left",
+  },
 });
 
 const { drawer } = useLocal();

package/components/NavigationItem.vue

@@ -4,8 +4,8 @@
       <v-list-item
         v-bind="props"
         :prepend-icon="icon"
-        rounded="e-pill"
-        class="text-subtitle-2"
+        class="text-subtitle-2 font-weight-medium px-3"
+        :rounded="prop.rounded"
       >
         {{ title }}
       </v-list-item>
@@ -19,23 +19,24 @@
       :route="child.route"
       :children="child.children"
       :disabled="child.disabled"
+      :rounded="prop.rounded"
     />
   </v-list-group>
 
   <v-list-item
     v-else
     :prepend-icon="icon"
-    :to="props.route"
-    rounded="e-pill"
-    class="text-subtitle-2"
-    :disabled="props.disabled"
+    :to="prop.route"
+    :rounded="prop.rounded"
+    class="text-subtitle-2 font-weight-medium px-3"
+    :disabled="prop.disabled"
   >
     {{ title }}
   </v-list-item>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
+const prop = defineProps({
   title: {
     type: String,
     required: true,
@@ -62,5 +63,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+
+  rounded: {
+    type: String,
+    required: false,
+    default: "e-pill",
+  },
 });
 </script>

package/package.json

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

package/plugins/vuetify.ts

@@ -10,6 +10,10 @@ const defaultTheme = {
   dark: false,
 };
 
+const darkTheme = {
+  dark: true,
+};
+
 export default defineNuxtPlugin((app) => {
   const vuetify = createVuetify({
     defaults: {
@@ -34,6 +38,7 @@ export default defineNuxtPlugin((app) => {
       defaultTheme: "defaultTheme",
       themes: {
         defaultTheme,
+        darkTheme,
       },
     },
     icons: {