Vue/TailwindCSS - Content is behind Sidebar

Question

Currently I am working on a project where VueJS + Nuxt and TailwindCSS is used.

Within this project there is a Sidebar Component defined as follows:

<template>
  <div >
    <!-- Static sidebar for desktop -->
    <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
      <!-- Sidebar component, swap this element with another sidebar if you like -->
      <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6">
        <div class="flex h-16 shrink-0 items-center">
          <NuxtLink class="flex items-center" to="/">
            <img
                class="h-8 w-auto"
                src="../../assets/logo.svg"
                style="height: 40px; width: 40px"
                alt="Company"
            />
            <p class="font-nunito text-2xl">
              {{ $t('App.LogoTitle') }}</p>
          </NuxtLink>
        </div>
        <nav class="flex flex-1 flex-col">
          <ul role="list" class="flex flex-1 flex-col gap-y-7">
            <li>
              <ul role="list" class="-mx-2 space-y-1">
                <li v-for="item in navigation" :key="item.name">
                  <a v-if="!item.children" :href="item.href" :class="[item.current ? 'bg-gray-50' : 'hover:bg-gray-50', 'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-700']">
                    <component :is="item.icon" class="h-6 w-6 shrink-0 text-gray-400" aria-hidden="true" />
                    {{ item.name }}
                  </a>
                  <Disclosure as="div" v-else v-slot="{ open }">
                    <DisclosureButton :class="[item.current ? 'bg-gray-50' : 'hover:bg-gray-50', 'flex items-center w-full text-left rounded-md p-2 gap-x-3 text-sm leading-6 font-semibold text-gray-700']">
                      <component :is="item.icon" class="h-6 w-6 shrink-0 text-gray-400" aria-hidden="true" />
                      {{ item.name }}
                      <ChevronRightIcon :class="[open ? 'rotate-90 text-gray-500' : 'text-gray-400', 'ml-auto h-5 w-5 shrink-0']" aria-hidden="true" />
                    </DisclosureButton>
                    <DisclosurePanel as="ul" class="mt-1 px-2">
                      <li v-for="subItem in item.children" :key="subItem.name">
                        <!-- 44px -->
                        <DisclosureButton as="a" :href="subItem.href" :class="[subItem.current ? 'bg-gray-50' : 'hover:bg-gray-50', 'block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700']">{{ subItem.name }}</DisclosureButton>
                      </li>
                    </DisclosurePanel>
                  </Disclosure>
                </li>
              </ul>
            </li>
            <li class="-mx-6 mt-auto">
              <a href="#" class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
                <img class="h-8 w-8 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
                <span class="sr-only">Your profile</span>
                <span aria-hidden="true">Tom Cook</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <div class=" top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden">
      <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" @click="sidebarOpen = true">
        <span class="sr-only">Open sidebar</span>
        <Bars3Icon class="h-6 w-6" aria-hidden="true" />
      </button>
      <div class="flex-1 text-sm font-semibold leading-6 text-gray-900">Dashboard</div>
      <a href="#">
        <span class="sr-only">Your profile</span>
        <img class="h-8 w-8 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
      </a>
    </div>

  </div>

</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue'
import {AcademicCapIcon, Bars3Icon, ChartPieIcon, ChevronRightIcon} from '@heroicons/vue/24/outline'

const { t } = useI18n();

const navigation = [
  { name: t('Components.SidebarComponent.Primary.Dashboard'), href: '#', icon: ChartPieIcon, current: true },
  {
    name: t('Components.SidebarComponent.Primary.Knowledge'),
    icon: AcademicCapIcon,
    current: false
  },
]

const sidebarOpen = ref(false)
</script>

The corresponding layout for it looks as follows:

<template>
  <SidebarComponent />
  <slot />
</template>

<style></style>

<script setup lang="ts">
</script>

When I now use this layout for a page and "slot" is replaced with another Component the content of it is displayed behind the Sidebar.

Is there a way that all content which is not defined inside the Sidebar Component is displayed on the right side of it?

Answer 1

<template>
  <div class="flex">
    <SidebarComponent />
    <div>
      <slot />
    </div>
  </div>
</template>

<style></style>

<script setup lang="ts">
</script>