Nuxt•3mo ago

DashboardSidebar customisations

I'm using the latest nuxt ui 4.0.0-alpha.2 and for a UDashboardSidebar i'm trying to customise the default slideover in the <lg breakpoints like this

:menu="{
    class: 'max-w-[300px]',
    ui: {
      header: 'flex items-center gap-1.5 px-2 sm:px-4 min-h-16', // Complete header override
    },

:menu="{
    class: 'max-w-[300px]',
    ui: {
      header: 'flex items-center gap-1.5 px-2 sm:px-4 min-h-16', // Complete header override
    },

the max-w-[300px] is taking effect but the px-2 sm:px-4 isn't :| how to do this

8 Replies

kapa.ai•3mo ago

Hi @SamKaizen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct that the class property (e.g., max-w-[300px]) is applied directly, but the ui.header override for the slideover's header in mobile (<lg) is not taking effect. This is because, according to the Nuxt UI Pro theme system, the sidebar's slideover mode uses its own theme configuration for slots and variants, and the ui prop for the sidebar's menu only affects certain slots. From the DashboardSidebar theme documentation, the sidebar's theme defines slots like header, body, footer, etc. However, when the sidebar is in slideover mode (on mobile), it actually renders a USlideover component under the hood. The slideover's slots and their styling are controlled by the slideover theme, not the sidebar's theme. The ui prop you pass to the sidebar's menu is merged with the sidebar's theme, but it does not propagate to the internal slideover's slots. This means that customizations like ui.header for the slideover header won't be applied this way. How to customize the slideover header in mobile: To customize the slideover's header, you need to override the slideover's theme in your app.config.ts (or vite.config.ts) under the ui.slideover.slots.header key. For example:

// app.config.ts
export default defineAppConfig({
  ui: {
    slideover: {
      slots: {
        header: 'flex items-center gap-1.5 px-2 sm:px-4 min-h-16'
      }
    }
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    slideover: {
      slots: {
        header: 'flex items-center gap-1.5 px-2 sm:px-4 min-h-16'
      }
    }
  }
})

This will apply your custom classes to the slideover's header globally, including when the sidebar is rendered as a slideover on mobile. If you need per-instance customization, the current version does not support passing ui overrides directly to the internal slideover from the sidebar props. Summary:
- class on menu works for the sidebar container. - ui.header on menu does not affect the slideover header. - To customize the slideover header, override the ui.slideover.slots.header in your app config. References:
- DashboardSidebar Theme - Slideover Theme - Components Theme System ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•3mo ago

@kapa.ai but that would be an app wide change.. the documentation says under props table for menu entry :

class?: any

ui?: { overlay?: ClassNameValue; content?: ClassNameValue; header?: ClassNameValue; wrapper?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; close?: ClassNameValue; }

class?: any

ui?: { overlay?: ClassNameValue; content?: ClassNameValue; header?: ClassNameValue; wrapper?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; close?: ClassNameValue; }

doesn't this mean both class (which is working) and ui are appropriate keys within :menu?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, according to the documentation, both class and ui are valid keys for the menu prop in UDashboardSidebar. The ui object is intended to allow you to override classes for specific slots of the underlying dialog (modal, slideover, or drawer), including header, body, footer, etc. This is explicitly shown in the props table for menu:

ui?: { overlay?: ClassNameValue; content?: ClassNameValue; header?: ClassNameValue; wrapper?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; close?: ClassNameValue; }

ui?: { overlay?: ClassNameValue; content?: ClassNameValue; header?: ClassNameValue; wrapper?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; close?: ClassNameValue; }

source So, in theory, your usage is correct and should work:

:menu="{
  class: 'max-w-[300px]',
  ui: {
    header: 'flex items-center gap-1.5 px-2 sm:px-4 min-h-16'
  }
}"

:menu="{
  class: 'max-w-[300px]',
  ui: {
    header: 'flex items-center gap-1.5 px-2 sm:px-4 min-h-16'
  }
}"

However, if the ui.header override is not taking effect, it may be due to how the classes are merged or applied internally in the current version (4.0.0-alpha.2). The documentation does not provide further details about any known issues or limitations with this feature. Summary:
- Both class and ui are documented as valid and appropriate keys for the menu prop. - If ui.header is not working as expected, it may be a bug or limitation in the current alpha version, not a misuse of the API. If you continue to experience issues, you may want to check for updates or report this as a potential bug to the Nuxt UI team, as your usage aligns with the documented API.
DashboardSidebar Props ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•3mo ago

@kapa.ai i also saw difficulties in getting the dashboardsidebar resize to work.. the resizehandle by default just doesn't show up for some reason :| has there been a change in how v4 handles this compared to v3?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the available knowledge sources, the expected behavior for the UDashboardSidebar in both v3 and v4 is that the resize handle should appear automatically when the resizable prop is set. You do not need to add the resize handle manually. The documentation states:

The DashboardResizeHandle component is used by the DashboardSidebar and DashboardPanel components.
It is automatically displayed when the resizable prop is set, you don't have to add it manually.

If you want to customize the handle, you can use the resize-handle slot, but for default usage, simply adding resizable should suffice:

<UDashboardSidebar resizable>
  <Placeholder class="h-96" />
</UDashboardSidebar>

<UDashboardSidebar resizable>
  <Placeholder class="h-96" />
</UDashboardSidebar>

DashboardResizeHandle Usage There is no mention in the knowledge sources of a change in v4 that would require a different approach compared to v3. If the handle is not showing up, it could be due to CSS (e.g., hidden on small screens, as the default theme uses hidden lg:block), or a potential bug in the alpha version. The theme for the handle is:

dashboardResizeHandle: {
  base: 'hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5'
}

dashboardResizeHandle: {
  base: 'hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5'
}

This means the handle is only visible on lg and up by default. If you are testing on a smaller screen, it will be hidden.
DashboardResizeHandle Theme Summary:
- No documented change in how resizing works between v3 and v4. - The handle is hidden on screens smaller than lg by default. - If it’s not showing on lg screens, it may be a bug or a CSS conflict. If you are still experiencing issues on large screens, it may be worth checking for open issues or reporting this to the Nuxt UI team. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

DashboardSidebar customisations

Did you find this page helpful?