Tips for creating a scrollable sidebar while ensuring that the deeply nested child pop-up element does not adhere to the scrollable properties

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

Answer №1

To display the menu properly, it is recommended to render it outside the overflow-y-scroll element. One way to achieve this is by using the <Teleport> component.

Here is a basic example to help you begin:

  1. Enclose the <MenuItems> within <Teleport>:

    <Teleport to="body">
      <transition …>
        <MenuItems …>
    

    This action moves the sub-menu outside the overflow-y-scroll element, but the elements may not be positioned correctly.

  2. Assign template refs to each of the top-level menu items:

    <li … :ref="(el) => item.el = el">
    
  3. Set atop value equivalent to the distance from the top edge of the top-level menu item to the top of the viewport:

    <MenuItems
      … 
      :style="{ top: item.el?.getBoundingClientRect().top + 'px' }"
    >
    

For a working demonstration, refer to the following example on StackBlitz.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The website is showing up blank when accessed on mobile devices

One of the websites we recently worked on used to appear correctly on iPhone and Blackberry, but now it shows up as blank on both devices. Interestingly, the site still displays as usual on iPad even though we never created a specific mobile version for ...

Tips for aligning divs in Zurb Foundation 3 framework

My design conundrum involves a 12 column row and trying to make a series of four div blocks stay in a row without stacking as the browser size decreases. Currently, the divs start to stack when the browser gets smaller. I have 4 divs that should be displa ...

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

Is there a way to get rid of the tiny black line beside the Instagram icon?

Here is the display on my website This is the code that was used I am struggling to identify the source of the small black "-" line next to the Instagram icon logo. ...

django is not able to load staticfiles from the statifiles_dirs directory

I have placed my style.css in the directory appname/static/appname/. In my settings.py, this is what I have: STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static/"), ) When I try to load it in my base.html like t ...

Determine the variable height of a div containing dynamic content in order to execute a transform

Looking to create a dynamic container that expands when a button/link is clicked? The challenge lies in achieving this expansion effect with a smooth transition. By using the height: auto property, the container can expand to fit its content, but incorpora ...

Is it not possible to change node labels in D3.js after clicking on a node?

After being inspired by this link, I successfully created a basic network visualization app using D3.js. The app reads node names from a textarea on an HTML page and then constructs a network where all nodes are interconnected. All the relevant code can ...

bootstrap thumbnail displayed without a border

I have decided to incorporate Bootstrap into my latest project: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS ...

Uninterrupted text streaming with dynamic content that seamlessly transitions without any gaps

I'm currently facing a challenge with an outdated element like <marquee>. Here's a fiddle where you can check it out: https://jsfiddle.net/qbqz0kay/1/ This is just one of the many attempts I've made, and I'm struggling with two m ...

Is the CSS3 bar chart flipped?

I'm currently developing a responsive bar chart, and everything seems to be going smoothly except for one issue - when viewing it in full screen, the bars appear to be flipped upside down. It's quite puzzling as all other elements such as text an ...

Using CSS to center the text and adding a separator line in blank spaces for a clean and stylish look

Request to Create Centered Date Element with Line Borders I am looking to design an element where the date is positioned at the center, while two horizontal lines fill the empty space on either side. Ideal Design I Want to Achieve: My Current Approach a ...

Is there a way to identify when a radio button's value has changed without having to submit the form again?

Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...

Alter the URL and CSS upon clicking an element

Currently, I am faced with a challenge on my website where I have multiple pages that utilize PHP to include content and jQuery to toggle the display of said content by adjusting CSS properties. However, I am encountering difficulty in implementing this ...

adjust the dimensions of the clickable icon's background

Is there a way to expand the pressable area of a close icon without altering its size? For example, if the icon is 19X19 pixels, can the pressable area be increased to 39X39 pixels? The concern lies with the div element containing the close button and the ...

The innovative technique of using pure CSS to secure the bottom edge of a div to the viewport

Is there a way to keep two container divs positioned x pixels from the bottom of the viewport without using position absolute|fixed? I want them to remain as position: relative for proper DOM flow. Searching for a CSS-only solution that works in IE7+. Mos ...

What is the best way to connect data so that when a user clicks on a specific card, it appears on a popup card

When a user clicks on any card containing data retrieved from a backend API GET method, that data should be displayed in a pop-up card. In my situation, I have two components: DisplayNotes.vue and UpdateNotes.vue. Whenever a user clicks on a displayed card ...

The div seems to be resistant to centering no matter the effort. Applying padding doesn't seem to be the solution, and even setting

I often come across this question but I can never seem to find the answer when it comes to padding or margin. It's strange that I'm having trouble properly centering the ul element within the div, especially considering that the div needs to be i ...

Enhancing user experience with jQuery tooltips

Having trouble adding a tooltip to a glyphicon. The JSFiddle example provided does not work for me as I am using jQuery to create the HTML elements like this: var trashIcon = $('<i>').addClass('glyphicon glyphicon-trash'); How ...

Exploring the origins of CSS through patch design

Want to learn how to create a background like this using CSS? Check out this link for inspiration! ...

Changing position with flair in CSS

Is there a way to create a transition effect on an element when it changes position from static to fixed? I attempted using the code: transition: position 2s linear;, however, it does not seem to have any impact. Are there any other methods I could experi ...