Initial commit

resources/js/views/demos/components/list/DemoListNav.vue

@@ -0,0 +1,60 @@
+<script setup>
+const items = [
+  {
+    title: 'My Files',
+    value: 1,
+    prependIcon: 'tabler-folder',
+  },
+  {
+    title: 'Shared with me',
+    value: 2,
+    prependIcon: 'tabler-users',
+  },
+  {
+    title: 'Starred',
+    value: 3,
+    prependIcon: 'tabler-star',
+  },
+  {
+    title: 'Recent',
+    value: 4,
+    prependIcon: 'tabler-history',
+  },
+  {
+    title: 'Offline',
+    value: 5,
+    prependIcon: 'tabler-circle-check',
+  },
+  {
+    title: 'Uploads',
+    value: 6,
+    prependIcon: 'tabler-upload',
+  },
+  {
+    title: 'Backups',
+    value: 7,
+    prependIcon: 'tabler-cloud-upload',
+  },
+]
+</script>
+
+<template>
+  <VList
+    nav
+    :lines="false"
+  >
+    <VListItem
+      v-for="item in items"
+      :key="item.value"
+      :value="item.value"
+    >
+      <template #prepend>
+        <VIcon :icon="item.prependIcon" />
+      </template>
+
+      <VListItemTitle>
+        {{ item.title }}
+      </VListItemTitle>
+    </VListItem>
+  </VList>
+</template>