quasar-ui-danx 0.3.2 → 0.3.3

package/src/components/Navigation/NavigationMenu.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+      class="p-4"
+      :class="{ 'is-collapsed': collapsed }"
+  >
+    <div
+        v-for="item in allowedItems"
+        :key="'nav-item-' + item.label"
+    >
+      <a class="nav-link" @click="item.onClick">
+        <component
+            :is="item.icon"
+            class="nav-icon"
+        />
+        <div class="label ml-2">{{ item.label }}</div>
+        <QTooltip v-if="collapsed">{{ item.label }}</QTooltip>
+      </a>
+      <QSeparator
+          v-if="item.separator"
+          :key="'separator-' + item.label"
+          class="my-2"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  collapsed: Boolean,
+  items: {
+    type: Array,
+    required: true
+  }
+});
+
+const allowedItems = computed(() => props.items.filter((item) => !item.hidden));
+</script>
+
+<style lang="scss">
+.nav-link {
+  display: block !important;
+  padding: 1.2em;
+  border-radius: 0.5em;
+  font-weight: bold;
+  font-size: 14px;
+  color: black;
+  height: 3.8em;
+  width: 13em;
+  transition: all 150ms;
+
+  &:hover {
+    @apply bg-gray-200;
+    .nav-icon {
+      @apply text-gray-700;
+    }
+  }
+
+  &.is-active {
+    @apply bg-blue-100;
+  }
+
+  &.is-disabled {
+    @apply bg-inherit;
+  }
+
+  .label {
+    @apply transition-all;
+  }
+
+  .nav-icon {
+    @apply w-5 h-5 flex-shrink-0 text-black;
+  }
+}
+
+.is-collapsed {
+  .nav-link {
+    width: 3.8em;
+  }
+
+  .label {
+    @apply opacity-0;
+  }
+}
+</style>

package/src/components/Navigation/index.ts

@@ -0,0 +1 @@
+export { default as NavigationMenu } from "./NavigationMenu.vue";

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./ActionTable";
 export * from "./AuditHistory";
 export * from "./DragAndDrop";
+export * from "./Navigation";
 export * from "./PanelsDrawer";
 export * from "./Utility";

package/src/styles/general.scss

@@ -0,0 +1,18 @@
+body {
+  height: 100vh;
+
+  #app,
+  #main-layout,
+  main {
+    height: 100%;
+  }
+}
+
+a {
+  cursor: pointer;
+
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/src/styles/index.scss

@@ -3,3 +3,4 @@
 @tailwind utilities;
 
 @import 'quasar-reset';
+@import "general";