64 lines
3.2 KiB
Vue
64 lines
3.2 KiB
Vue
<template>
|
|
<div class="vp-raw flex flex-col relative">
|
|
<Sidebar class="!h-full relative">
|
|
<SidebarItem>
|
|
<template #icon>
|
|
<svg
|
|
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
viewBox="0 0 22 21"
|
|
>
|
|
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
|
|
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
|
|
</svg>
|
|
</template>
|
|
<template #default>Dashboard</template>
|
|
</SidebarItem>
|
|
<SidebarItem>
|
|
<template #icon>
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
|
|
/>
|
|
</svg>
|
|
</template>
|
|
<template #default>Kanban</template>
|
|
<template #suffix>
|
|
<span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
|
|
</template>
|
|
</SidebarItem>
|
|
<SidebarDropdownItem>
|
|
<template #icon>
|
|
<svg
|
|
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
viewBox="0 0 22 21"
|
|
>
|
|
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
|
|
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
|
|
</svg>
|
|
</template>
|
|
<template #trigger> E-commerce </template>
|
|
<template #default>
|
|
<SidebarItem class="pl-11"> Products </SidebarItem>
|
|
<SidebarItem class="pl-11"> Sign In </SidebarItem>
|
|
<SidebarItem class="pl-11"> Sign Up </SidebarItem>
|
|
</template>
|
|
</SidebarDropdownItem>
|
|
</Sidebar>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { Sidebar, SidebarItem, SidebarDropdownItem } from '../../../../src/index'
|
|
</script>
|