package list from viandwi24

components/Dashboard/Navbar.vue

@@ -0,0 +1,65 @@
+<template>
+  <BuilderNavbar>
+    <template #menu>
+      <div class="relative hidden lg:flex items-center ml-auto">
+        <div class="flex items-center justify-center">
+          <img
+            class="w-6 h-6 rounded-full"
+            src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+            alt="Avatar of Jonathan Reinink"
+          />
+          <span class="ml-2 text-sm font-semibold">Alfian</span>
+          <IconUil:angle-down />
+        </div>
+        <div
+          class="flex space-x-4 border-l ml-6 pl-6 border-gray-900/10 dark:border-gray-50/[0.2]"
+        >
+          <LanguageSwitcher />
+          <ThemeSwitcher />
+          <Anchor
+            class="hover:no-underline hover:text-slate-900 hover:dark:text-white text-lg flex self-center items-center"
+            href="boilarplate"
+            title="Github"
+          >
+            <IconMdi:github-face />
+          </Anchor>
+        </div>
+      </div>
+    </template>
+    <template #options="{ toggleOptions }">
+      <ActionSheet @on-close="toggleOptions(false)">
+        <ActionSheetBody>
+          <ActionSheetHeader text="Menu" />
+          <div class="mt-6 text-sm font-bold capitalize">
+            {{ $t('components.theme_switcher.change_theme') }}
+          </div>
+          <div class="mt-2">
+            <ThemeSwitcher type="select-box" />
+          </div>
+          <div class="mt-6 text-sm font-bold capitalize">
+            {{ $t('components.language_switcher.change_language') }}
+          </div>
+          <div class="mt-2">
+            <LanguageSwitcher type="select-box" />
+          </div>
+        </ActionSheetBody>
+        <Button
+          type="secondary"
+          title="Github"
+          href="boilarplate"
+        >
+          <IconMdi:github-face />
+          <span class="ml-1">Github</span>
+        </Button>
+        <Button
+          text="Close"
+          type="secondary"
+          @click.prevent="toggleOptions(false)"
+        />
+      </ActionSheet>
+    </template>
+    <template #drawer>
+      <slot name="drawer" />
+    </template>
+  </BuilderNavbar>
+</template>

components/Dashboard/Sidebar.vue

@@ -0,0 +1,64 @@
+<script lang="ts">
+export default defineComponent({
+  props: {
+    mode: {
+      type: String,
+      default: 'normal',
+    },
+  },
+  setup() {
+    const sidebar = ref(null)
+
+    onMounted(() => {
+      // const { onScroll } = useSticky(sidebar.value, -1000)
+      // setTimeout(() => onScroll(), 50)
+    })
+
+    return {
+      sidebar,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    ref="sidebar"
+    :class="{
+      'fixed top-0 hidden pt-12 lg:flex lg:w-60 xl:w-80 h-screen':
+        mode === 'normal',
+      'relative flex-1 flex flex-col w-full': mode === 'mobile',
+    }"
+  >
+    <div class="flex-1 overflow-y-auto pl-4 lg:pl-0 pr-4 py-4">
+      <ul>
+        <li v-for="i in 29" :key="i">
+          <Anchor
+            :to="{ name: 'dashboard' }"
+            class="group flex items-center mb-4 hover:no-underline"
+          >
+            <div
+              class="flex items-center mr-4 px-2 py-2 rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10 group-hover:shadow-sky-200 dark:highlight-white/10"
+              :class="{
+                'text-white dark:text-white group-hover:bg-sky-500 bg-sky-500':
+                  i === 1,
+                'text-slate-500 dark:text-gray-100 group-hover:bg-gray-200 bg-gray-100 dark:group-hover:bg-slate-600 dark:bg-slate-700':
+                  i !== 1,
+              }"
+            >
+              <IconUil:apps class="text-xs" />
+            </div>
+            <span
+              class="text-sm font-semibold capitalize"
+              :class="{
+                'font-extrabold text-sky-500 dark:text-sky-400': i === 1,
+              }"
+            >
+              {{ $t('pages.dashboard.index.nav') }}
+            </span>
+          </Anchor>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>