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

finish basic struction of sidebar

This commit is contained in:
SikongJueluo 2025-03-11 21:48:37 +08:00
parent 8b8eeb8207
commit 9200befaf8
No known key found for this signature in database
8 changed files with 114 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import LoginCard from './components/LoginCard.vue';
</script>
<template>

1
src/assets/left.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741694962521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M684.29 799.276L393.929 513.019 684.29 226.762c37.685-37.153 38.003-97.625 0.707-134.384-37.297-36.758-98.646-36.435-136.331 0.718l-357.43 352.378c-0.155 0.153-0.297 0.314-0.451 0.468-0.084 0.082-0.172 0.157-0.256 0.239-18.357 18.092-27.581 41.929-27.743 65.902-0.004 0.311-0.017 0.623-0.018 0.934 0.001 0.316 0.014 0.632 0.018 0.948 0.165 23.97 9.389 47.803 27.743 65.892 0.083 0.082 0.171 0.157 0.255 0.239 0.154 0.154 0.296 0.315 0.452 0.468l357.43 352.378c37.685 37.153 99.034 37.476 136.331 0.718 37.297-36.758 36.979-97.231-0.707-134.384z" fill="#141414" p-id="3588"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 919 B

2
src/assets/main.css
View File

@ -1,5 +1,5 @@
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default;
themes: winter --default, night;
}

1
src/assets/menu.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741694797806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2622" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M192 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2623"></path><path d="M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2624"></path><path d="M192 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2625"></path><path d="M864 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 480H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 800H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32z" p-id="2626"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 870 B

1
src/assets/right.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741694970690" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4546" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M803.758 514.017c-0.001-0.311-0.013-0.622-0.018-0.933-0.162-23.974-9.386-47.811-27.743-65.903-0.084-0.082-0.172-0.157-0.256-0.239-0.154-0.154-0.296-0.315-0.451-0.468L417.861 94.096c-37.685-37.153-99.034-37.476-136.331-0.718-37.297 36.758-36.979 97.231 0.707 134.384l290.361 286.257-290.362 286.257c-37.685 37.153-38.004 97.625-0.707 134.383 37.297 36.758 98.646 36.435 136.331-0.718l357.43-352.378c0.155-0.153 0.297-0.314 0.451-0.468 0.084-0.082 0.172-0.157 0.256-0.239 18.354-18.089 27.578-41.922 27.743-65.892 0.004-0.315 0.017-0.631 0.018-0.947z" fill="#141414" p-id="4547"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 923 B

102
src/components/Sidebar.vue
View File

@ -0,0 +1,102 @@
<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>

4
src/router/index.ts
View File

@ -3,7 +3,7 @@ import LoginView from "@/views/LoginView.vue"
import User from '@/views/UserView.vue'
const routes = [
{ path: "/", redirect: "/login" },
{ path: "/", redirect: "/user" },
{ path: "/login", name: "Login", component: LoginView },
{ path: "/user", name: "User", component: User },
]
@ -13,4 +13,4 @@ const router = createRouter({
routes,
})
export default router
export default router

9
src/views/UserView.vue
View File

@ -1,10 +1,13 @@
<template>
<div>
</div>
<main>
<div class="w-full h-full">
<Sidebar />
</div>
</main>
</template>
<script setup lang="ts">
import Sidebar from '../components/Sidebar.vue'
</script>
<style scoped>