fifi97
91 lines
3.5 KiB
Vue
91 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<ol class="list-reset flex text-grey-dark mb-4 rounded">
|
|
<li class="bg-gray-500 py-2 px-4 rounded text-white">
|
|
<a href="#" class=""
|
|
><i class="far fa-folder mr-2"></i>
|
|
|
|
Home</a
|
|
>
|
|
</li>
|
|
<li class="mt-2"><span class="mx-2"><i class="fas fa-angle-double-right"></i></span></li>
|
|
<li class="bg-gray-500 py-2 px-4 rounded text-white">
|
|
<a href="#" class=""><i class="far fa-folder mr-2"></i> Library</a>
|
|
</li>
|
|
<li class="mt-2"><span class="mx-2"><i class="fas fa-angle-double-right"></i></span></li>
|
|
<li class="bg-yellow-600 py-2 px-4 rounded text-white">
|
|
<a href="">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
class="w-4 h-4 stroke-current inline mr-1"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
></path>
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
</svg>
|
|
Dashboard</a
|
|
>
|
|
</li>
|
|
|
|
<li v-for="(item, index) in $props.items" :key="index" class="mt-2 pl-2">
|
|
<button
|
|
:class="[
|
|
'relative px-4 py-2 overflow-hidden',
|
|
'transition-colors duration-200',
|
|
'bg-black text-white',
|
|
'hover:bg-gray-400 hover:text-black'
|
|
]"
|
|
:disabled="$data.index === index"
|
|
v-text="item.title"
|
|
/>
|
|
</li>
|
|
|
|
<!-- TODO FA replacement -->
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default{
|
|
props:{
|
|
items: {
|
|
type: Array,
|
|
default: () => [
|
|
{
|
|
title: "Totam",
|
|
content:
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, deleniti. Dolore corporis quidem sequi repellat cupiditate, possimus, excepturi praesentium iste ad voluptatem modi adipisci nulla laborum fugiat nemo placeat tempore numquam. Delectus quae ratione veniam excepturi quisquam nihil libero numquam.",
|
|
},
|
|
{
|
|
title: "Natus",
|
|
content:
|
|
"Laboriosam aperiam corrupti veniam numquam sint ipsam deleniti iusto esse omnis cumque incidunt provident nisi fugiat consequatur, recusandae perspiciatis nobis atque, molestiae aliquid quaerat et delectus sequi sed? Fugit deleniti perspiciatis, laborum necessitatibus unde fugiat. Mollitia fugit ducimus consequatur veritatis?",
|
|
},
|
|
{
|
|
title: "Tempora",
|
|
content:
|
|
"Praesentium odit consectetur deleniti quae possimus reprehenderit magni! Quos officiis, perferendis dolores, quo assumenda possimus quibusdam quaerat similique quas deserunt qui alias aut provident. Eos dolorem magni fugit blanditiis, natus rerum inventore dignissimos quia, sunt consequatur neque quis adipisci. Dicta.",
|
|
},
|
|
{
|
|
title: "Eaque",
|
|
content:
|
|
"Impedit omnis autem labore obcaecati atque ea, non delectus iusto nemo enim possimus. Commodi deleniti perspiciatis iure laboriosam doloribus hic neque, sed possimus pariatur totam quis quos earum incidunt voluptate blanditiis veniam quibusdam id vel optio? Commodi dolores nulla minus?",
|
|
}
|
|
]
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|