In my project, I am using Vue 3 along with Tailwind CSS and Headless UI. The challenge I am facing is making the sidebar navigation scrollable while ensuring that the pop-up menu appears outside the sidebar. As the number of menu items in the sidebar will increase over time, I need to make sure the sidebar remains scrollable. However, when I try to add "overflow-y-scroll" to the main parent element, the pop-up menu ends up appearing inside the dimensions of the sidebar instead of outside it. How can this issue be resolved? If anyone can offer guidance or shed some light on this problem, I would greatly appreciate it as I have been stuck on this for weeks now.
Code:
<template>
<div
:class="[
!sidebarCollapse ? 'sm:w-52' : 'sm:w-12',
'hidden sm:fixed sm:bottom-0 sm:left-0 sm:top-12 sm:z-50 sm:block sm:overflow-y-scroll sm:border-r sm:border-gray-200 sm:bg-neutral-50 sm:pb-4',
]"
>
... // code continues (omitted for brevity)
</div>
</template>
<script>
import { ref } from 'vue'
import {
Menu,
MenuButton,
MenuItem,
MenuItems,
Disclosure,
DisclosureButton,
DisclosurePanel,
} from '@headlessui/vue'
import {
Bars3Icon,
CalendarIcon,
ChartPieIcon,
DocumentDuplicateIcon,
FolderIcon,
HomeIcon,
UsersIcon,
} from '@heroicons/vue/24/outline'
import { ChevronRightIcon } from '@heroicons/vue/20/solid'
const navigation = [
{ name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
... // data continues (omitted for brevity)
]
const sidebarCollapse = ref(true)
</script>
Current Scenario: https://i.sstatic.net/Whzqc.gif
Expected Result: https://i.sstatic.net/i1nRn.gif