Components
Drawer
The best way to navigate through your app on mobile devices.
Usage
<template>
<NXW-Drawer expand-on-hover>
<div
v-for="item in drawerItems"
:key="item.text"
class="h-14 w-full flex items-center cursor-pointer px-2 gap-10 hover:bg-primary-400/50 transition-color ease-in-out duration-300"
>
<div class="w-12 grid place-items-center">
<UIcon :name="item.icon" class="size-7" />
</div>
<div>
{{ item.text }}
</div>
</div>
</NXW-Drawer>
</template>
absolute
boolean
Default
false
border
string
|
boolean
Default
border-r dark:border-zinc-700 border-gray-500
color
object
Default
<template>
<NXW-Drawer
:color="{ bg: 'bg-gray-200 dark:bg-zinc-900', overlayBg: 'bg-black/50' }"
/>
</template>
disable-overflow
boolean
Default
true
expand-on-hover
object
|
boolean
Default
<template>
<NXW-Drawer :expand-on-hover="{ width: 'w-12', hoverWidth: 'hover:w-80' }" />
</template>
fixed
boolean
Default
true
height
string
Default
h-screen
mobile-width
number
Default
768
no-mobile
boolean
Default
false
overlay
boolean
Default
true
permanent
boolean
Default
false
right
boolean
Default
false
transition
object
|
boolean
Default
<template>
<NXW-Drawer :transition="{ duration: 'duration-300', ease: 'ease-in-out' }" />
</template>
width
string
Default
w-80
z-index
string
Default
z-[100]