DashboardSidebar / DashboardResizeHandle

[jmbuss]

Description

I am implementing a dashboard with 2 sidebars, one on the left and one on the right with some content in-between them. I want the sidebars to be resizable, and have implemented this on the left sidebar using the resize-handle slot (https://ui.nuxt.com/components/dashboard-resize-handle#within-resize-handle-slot). I tried implementing the same thing on the right sidebar, but I cannot get the resize handle to appear on the left of the component. Can you provide me an example of what props / classes I need to use to accomplish this?

I also want to have a "Sidebar" at the bottom of the center content. I know that the components only define a right / left side as a prop. Is there any way to do vertical collapse / resizing on these or should I implement that as a custom component using UCollapsible?

[benjamincanac]

Would you mind sharing a reproduction of what you're trying to do?

[jmbuss]

Sure thing, visually this is what I am trying to build -

The main page component follows this format -

<script setup lang="ts">

</script>

<template>
  <div>
    <AppBar />
    <UDashboardGroup>
      <UDashboardSidebar side="left">
        <!-- left bar components -->
      </UDashboardSidebar>
      <UDashboardPanel>
        <Canvas />
        <UCollapsible>
          <!-- bottom bar components -->
        </UCollapsible>
      </UDashboardPanel>
      <UDashboardSidebar side="right">
        <!-- right bar components -->
      </UDashboardSidebar>
    </UDashboardGroup>
  </div>
</template>

I should have stated this in the issue, but we are using these versions -

 "@nuxt/ui": "^3.0.0",
 "@nuxt/ui-pro": "^3.0.0",

version 3.1.0 produced some build errors because of imported types. Maybe what I am trying to do is fixed in that version?