I have managed to create a sleek sidebar with a curved edge that seamlessly integrates into the body of the page. However, I am struggling to remove the semi-transparent ripple effect that appears when clicking on a list item. The current effect clashes with my desired white active state for the item. I want the only effect to be the custom styling for the active item.
<template>
<q-drawer show-if-above v-model="leftDrawerOpen" :width="drawerWidth" side="left" behavior="desktop">
<div class="window-height bg-black text-white">
<div class="q-py-xl">
</div>
<div class="q-py-xl">
<q-list class="curved-parent-ul">
<q-item v-for="(menuItem, index) in primaryMenuArr" :key="index" class="curved-child-li"
:active="activeMenuItem === menuItem.name"
@click="activeMenuItem = menuItem.name"
active-class="active"
clickable
manual-focus>
<q-icon size="sm" :name="menuItem.icon" class="absolute-center" />
</q-item>
</q-list>
</div>
</div>
</q-drawer>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const leftDrawerOpen: Ref<boolean> = ref(true)
const drawerWidth: Ref<number> = ref(100)
const activeMenuItem: Ref<string> = ref('Home')
interface menuArr {
name: string;
ariaLabel: string;
icon: string;
link: string;
}
const primaryMenuArr: menuArr[ ] = [
{ name: 'Home', ariaLabel: 'Home', icon: 's_dashboard', link: '#' },
{ name: 'Upload', ariaLabel: 'Upload', icon: 's_drive_folder_upload', link: '#' },
{ name: 'Management', ariaLabel: 'Management', icon: 's_work', link: '#' },
]
</script>
<style scoped>
.curved-parent-ul {
background: #000000;
padding: 20px 0 10px 10px;
width: 100%;
transition: 0.5s;
overflow: hidden;
}
.curved-parent-ul .curved-child-li {
list-style: none;
padding: 30px;
padding-right: 0;
color: white;
font-size: 15px;
margin-bottom: 30px;
cursor: pointer;
position: relative;
transition: 0.5s;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.curved-parent-ul .curved-child-li.active:before {
content: '';
position: absolute;
top:-30px;
right: 0px;
width: 30px;
height:30px;
background: transparent;
border-radius: 50%;
box-shadow: 15px 15px 0 #fff;
}
.curved-parent-ul .curved-child-li.active:after {
content: '';
position: absolute;
bottom:-30px;
right: 0px;
width: 30px;
height:30px;
background: transparent;
border-radius: 50%;
box-shadow: 15px -15px 0 #fff;
}
.curved-parent-ul .curved-child-li.active {
background: #fff;
color: #000;
}
</style>