SikongJueluo/FPGA_WebLab
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finish basic sidebar

Browse Source
This commit is contained in:
SikongJueluo
2025-03-14 19:04:15 +08:00
parent 9200befaf8
commit 8f18560a38
9 changed files with 215 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/Sidebar.vue
View File

@@ -1,17 +1,21 @@
<template>
<div class="card card-dash sidebar-base">
<div :class="themeSidebar">
<div class="card-body flex">
<!-- Avatar and Name -->
<div class="flex items-center">
<!-- Img -->
<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>
<!-- Text -->
<div v-if="!isClose" class="mx-5 grow">
<label class="text-2xl">用户名</label>
</div>
<button class="btn btn-square rounded-lg p-2">
<!-- Toggle Button -->
<button class="btn btn-square rounded-lg p-2" @click="toggleSidebar">
<img src="../assets/left.svg" alt="Menu Button" class="opacity-50">
</button>
</div>
@@ -21,8 +25,8 @@
<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 }}
<img class="h-[1.5em] opacity-50 mx-1" :src="item.icon" alt="An icon" />
<p v-if="!isClose">{{ item.msg }}</p>
</a>
</li>
@@ -30,49 +34,15 @@
<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>
<ul class="menu w-full">
<li class="mb-5">
<a @click="theme.toggleTheme" class="text-xl">
<ThemeControlButton />
<p v-if="!isClose">改变主题</p>
<ThemeControlToggle v-if="!isClose" />
</a>
</li>
</ul>
</div>
</div>
@@ -80,6 +50,13 @@
<script setup lang="ts">
import iconMenu from "../assets/menu.svg"
import { useThemeStore } from "@/stores/theme";
import { ref } from "vue";
import ThemeControlButton from "./ThemeControlButton.vue";
import ThemeControlToggle from "./ThemeControlToggle.vue";
const theme = useThemeStore()
const isClose = ref(false)
const items = [
{ id: 1, icon: iconMenu, msg: "btn1" },
@@ -87,16 +64,46 @@ const items = [
{ id: 3, icon: iconMenu, msg: "btn3" },
{ id: 4, icon: iconMenu, msg: "btn4" },
]
const themeSidebar = ref("")
function closeSidebar() {
isClose.value = true;
console.info("Close sidebar")
}
function openSidebar() {
isClose.value = false;
console.info("Open sidebar")
}
function toggleSidebar() {
if (isClose.value) {
openSidebar()
themeSidebar.value = "card-dash sidebar-base sidebar-open"
}
else {
closeSidebar()
themeSidebar.value = "card-dash sidebar-base sidebar-close"
}
}
</script>
<style scoped lang="postcss">
@import "../assets/main.css";
@reference "../assets/main.css";
.sidebar-base {
@apply shadow-xl w-80 h-screen
@apply card shadow-xl h-screen;
}
.sidebar-open {}
.sidebar-open {
@apply w-80
}
.sidebar-close {}
.sidebar-close {
@apply w-31
}
@custom-variant
</style>

36
src/components/ThemeControlButton.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div>
<label class="swap swap-rotate">
<!-- this hidden checkbox controls the state -->
<input type="checkbox" value="synthwave" @click="theme.toggleTheme" :checked="checkState" />
<!-- 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>
</div>
</template>
<script setup lang="ts">
import { useThemeStore } from '@/stores/theme';
import { computed } from 'vue';
const theme = useThemeStore();
const checkState = computed(() => {
return theme.isDarkTheme()
})
</script>
<style scoped lang="postcss">
@import "../assets/main.css"
</style>

45
src/components/ThemeControlToggle.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div>
<label class="toggle text-base-content">
<input type="checkbox" value="synthwave" class="theme-controller" @click="theme.toggleTheme"
:checked="checkState">
<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>
</template>
<script setup lang="ts">
import { useThemeStore } from '@/stores/theme';
import { computed } from 'vue';
const theme = useThemeStore();
const checkState = computed(() => {
return theme.isDarkTheme()
})
</script>
<style scoped lang="postcss">
@import "../assets/main.css"
</style>