andy/westone-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css scroll Navbar Menu

Browse Source
This commit is contained in:
Stephen
2024-08-14 19:56:06 +07:00
parent 9169cb492d
commit 4770be54f4
2 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
css/styles.css
View File

@@ -28,3 +28,39 @@
body {
font-family: "Roboto", sans-serif;
}
.scroll-container {
scroll-padding: 50px 0 0 50px;
}
::-webkit-scrollbar {
width: 7px;
}
/* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
background-color: #E3F2FD;
}
/* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: #2196F3;
;
}
/* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: #E3F2FD;
;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
background-color: black;
}

10
globalcomponent/one-menu.vue
View File

@@ -1,18 +1,18 @@
<template>
<v-navigation-drawer style="border: 0;"class="pa-2" v-model="drawer" :width="320">
<v-navigation-drawer style="border: 0;"class="pa-4" v-model="drawer" :width="380">
<!-- <v-navigation-drawer temporary class="blue lighten-2" v-model="drawer" dark fixed app> -->
<v-list density="compact">
<v-list>
<v-list-item class="my-5">
<v-img :aspect-ratio="1" max-height="42px" max-width="132px" class="bg-white" src="images/logo.png"></v-img>
<v-img :aspect-ratio="1" max-height="42px" max-width="132px" class="bg-white" src="../globalimages/logo.png"></v-img>
</v-list-item>
<!-- LEVEL 0 -->
<template v-for="(lev_0, i) in level_0" :key="lev_0.id" >
<v-list-item v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0.url)" color="primary" rounded="lg">
<v-list-item v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0.url)" color="primary" rounded="lg" class="my-2">
<v-list-item-title >{{ lev_0.name }}</v-list-item-title>
</v-list-item>
<v-list-group v-else :value="lev_0.name" >
<template v-slot:activator="{ props }">
<v-list-item v-bind="props" color="primary" rounded="lg" >
<v-list-item v-bind="props" color="primary" rounded="lg" class="mb-3">
<v-list-item-title>{{ lev_0.name }}</v-list-item-title>
</v-list-item>
</template>