103 lines
3.9 KiB
Vue
103 lines
3.9 KiB
Vue
<template>
|
|
<div class="card card-dash sidebar-base">
|
|
<div class="card-body flex">
|
|
<!-- Avatar and Name -->
|
|
<div class="flex items-center">
|
|
<div class="avatar h-10">
|
|
<div class="rounded-full">
|
|
<img src="../assets/user.svg" alt="User" />
|
|
</div>
|
|
</div>
|
|
<div class="mx-5 grow">
|
|
<label class="text-2xl">User Name</label>
|
|
</div>
|
|
<button class="btn btn-square rounded-lg p-2">
|
|
<img src="../assets/left.svg" alt="Menu Button" class="opacity-50">
|
|
</button>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<ul class="menu h-full w-full">
|
|
<li v-for="item in items" class="text-lg my-1">
|
|
<a>
|
|
<img class="h-[1em] opacity-50 mx-1" :src="item.icon" alt="An icon" />
|
|
{{ item.msg }}
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="mb-5">
|
|
<label class="swap swap-rotate">
|
|
<!-- this hidden checkbox controls the state -->
|
|
<input type="checkbox" class="theme-controller" value="synthwave" />
|
|
|
|
<!-- sun icon -->
|
|
<svg class="swap-off h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path
|
|
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
|
|
</svg>
|
|
|
|
<!-- moon icon -->
|
|
<svg class="swap-on h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path
|
|
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
|
</svg>
|
|
</label>
|
|
|
|
<label class="toggle text-base-content">
|
|
<input type="checkbox" value="synthwave" class="theme-controller">
|
|
|
|
<svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
|
|
<circle cx="12" cy="12" r="4"></circle>
|
|
<path d="M12 2v2"></path>
|
|
<path d="M12 20v2"></path>
|
|
<path d="m4.93 4.93 1.41 1.41"></path>
|
|
<path d="m17.66 17.66 1.41 1.41"></path>
|
|
<path d="M2 12h2"></path>
|
|
<path d="M20 12h2"></path>
|
|
<path d="m6.34 17.66-1.41 1.41"></path>
|
|
<path d="m19.07 4.93-1.41 1.41"></path>
|
|
</g>
|
|
</svg>
|
|
|
|
<svg aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
|
|
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
|
</g>
|
|
</svg>
|
|
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import iconMenu from "../assets/menu.svg"
|
|
|
|
const items = [
|
|
{ id: 1, icon: iconMenu, msg: "btn1" },
|
|
{ id: 2, icon: iconMenu, msg: "btn2" },
|
|
{ id: 3, icon: iconMenu, msg: "btn3" },
|
|
{ id: 4, icon: iconMenu, msg: "btn4" },
|
|
]
|
|
</script>
|
|
|
|
<style scoped lang="postcss">
|
|
@import "../assets/main.css";
|
|
|
|
.sidebar-base {
|
|
@apply shadow-xl w-80 h-screen
|
|
}
|
|
|
|
.sidebar-open {}
|
|
|
|
.sidebar-close {}
|
|
</style>
|