mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-22 07:46:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(style): menu scrollbar

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-14 18:45:47 +02:00
parent 8d9f924177
commit 483cf66db9
No known key found for this signature in database
GPG key ID: DBD997E935996158
2 changed files with 20 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/layouts/base.layout.vue
View file

@ -30,42 +30,24 @@ const m = toolsByCategory.map(category => ({
<template> <template>
<n-layout has-sider> <n-layout has-sider>
<n-layout-sider <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="260" :collapsed="collapsed"
bordered @collapse="collapsed = true" @expand="collapsed = false" :show-trigger="false">
collapse-mode="width" <n-scrollbar>
:collapsed-width="64" <router-link to="/"
:width="240" style="text-decoration: none; color: grey; display: block; text-align: center; margin:25px 0; font-size: 25px;">
:collapsed="collapsed" <strong>IT-Tools</strong>
show-trigger </router-link>
@collapse="collapsed = true"
@expand="collapsed = false"
>
<router-link
to="/"
style="text-decoration: none; color: grey; display: block; text-align: center; margin:25px 0; font-size: 25px;"
>
<strong>IT-Tools</strong>
</router-link>
<n-menu <n-menu :value="route.name" class="menu" :collapsed="collapsed" :collapsed-width="64"
:value="route.name" :collapsed-icon-size="22" :options="m" v-model:value="activeKey" />
class="menu"
:collapsed="collapsed" </n-scrollbar>
:collapsed-width="64"
:collapsed-icon-size="22"
:options="m"
v-model:value="activeKey"
/>
</n-layout-sider> </n-layout-sider>
<n-layout class="content"> <n-layout class="content">
<div class="bar-wrapper"> <div class="bar-wrapper">
<search-bar /> <search-bar />
<n-button <n-button circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme">
circle
quaternary
@click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
>
<n-icon size="large" v-if="styleStore.isDarkTheme"> <n-icon size="large" v-if="styleStore.isDarkTheme">
<LightModeFilled /> <LightModeFilled />
</n-icon> </n-icon>
@ -82,20 +64,24 @@ const m = toolsByCategory.map(category => ({
<style lang="less" scoped> <style lang="less" scoped>
.bar-wrapper { .bar-wrapper {
display: flex; display: flex;
& > *:not(:first-child) {
&>*:not(:first-child) {
margin-left: 15px; margin-left: 15px;
} }
& > :first-child {
&> :first-child {
flex-grow: 1; flex-grow: 1;
} }
} }
.content { .content {
// background-color: #f1f5f9; // background-color: #f1f5f9;
::v-deep(.n-layout-scroll-container) { ::v-deep(.n-layout-scroll-container) {
padding: 26px; padding: 26px;
} }
} }
.n-layout { .n-layout {
height: 100vh; height: 100vh;
} }

2
src/plugins/naive.plugin.ts
View file

@ -48,9 +48,11 @@ import {
NTable, NTable,
NUploadDragger, NUploadDragger,
NImage, NImage,
NScrollbar,
} from 'naive-ui'; } from 'naive-ui';
const components = [ const components = [
NScrollbar,
NImage, NImage,
NUploadDragger, NUploadDragger,
NTable, NTable,