Help with creating a layout utilizing Nav and Sidebar.

[Bond-Addict]

I'm trying to duplicate the layout for the docs page which I know is using flexbox. I've already followed the integration for Tailwind css. I wouldnt have thought I needed to introduce flexbox manually, but that the only way I can get close to the layout. Is there some layout component that just isn't documented? Both the docs page and the Vuestic admin dashboard example (https://vuestic.epicmax.co/admin/dashboard) have the exact same layout and functionality.

I really want to use the sidebar, but I cant if it will not fit on the side of the main content and then either go on top of or next to the content when shown.

This is what gets me close, but still looks wrong.

<template>
  <div class="flex flex-wrap">
    <NavBar class="h-25" :title="title" @toggle="toggle"></NavBar>
    <div class="flex flex-wrap flex-column">
      <Sidebar class="w-10" :nav-items="navItems" ref="sidebar"></Sidebar>
      <router-view class="w-90" />
    </div>
  </div>
</template>

NavBar:

<template>
  <va-navbar class="navbar">
    <template #left class="navbar-toggler">
      <va-navbar-item>
        <va-icon name="menu" @click="toggle"></va-icon>
      </va-navbar-item>
    </template>
    <va-navbar-item class="navbar">
      <a class="navbar-brand" href="/">{{ title }}</a>
    </va-navbar-item>
  </va-navbar>
</template>

Sidebar:

<template>
  <va-sidebar v-model="show" minimized-width="64px">
    <va-sidebar-item>
      <va-sidebar-item-content>
        <va-icon name="menu"></va-icon>
      </va-sidebar-item-content>
    </va-sidebar-item>
    <template v-for=" nav of navItems">
      <va-sidebar-item>
        <va-sidebar-item-content>
          <va-icon :name="nav.icon"></va-icon>
        </va-sidebar-item-content>
      </va-sidebar-item>
    </template>
  </va-sidebar>
</template>

For the sake of understanding the process:
NavBar has the menu icon which when clicks emits a event up to App.vue which then calls a toggle function on the Sidebar via a ref.

TIA

[m0ksem]

Hi, @Bond-Addict. I can recommend to use grid instead of flex here. Not sure how to make well it in tailwind with attributes (will be something awful like grid-cols-[min-content_1fr_min-content]), but here is a more readable CSS example:

<template>
  <div class="page-layout">
    <Navbar />
    <main class="page-layout__main">
      <Sidebar class="page-layout__sidebar" />
      <div class="page-layout__content">
        <section v-for="box in boxes" class="box" @click="boxes++">
          Add one more box
        </section>
      </div>
    </main>
  </div>
</template>

<style>
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr;
  gap: 0;
  height: 100%;
  width: 100%;
}

.page-layout__main {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: 1fr;
  gap: 1rem;
}

.page-layout__content {
  height: 100%;
  overflow-x: auto;
}

.page-layout__sidebar {
  height: 100%;
}
</style>

Here you can play with it: https://codesandbox.io/p/sandbox/ecstatic-pateu-2zwoov?file=%2Fsrc%2FApp.vue&selection=%5B%7B%22endColumn%22%3A13%2C%22endLineNumber%22%3A24%2C%22startColumn%22%3A13%2C%22startLineNumber%22%3A24%7D%5D

There are plans to make a component, but it is still in plans.

[Bond-Addict]

Thats what I was trying to avoid. I had just noticed that the docs page and admin page have the same layout and upon inspection they are using flex.

[Bond-Addict]

I provided my solution at #3354 (comment)