gufaUIMenu Mobile Sidebar #
Menu mobile sidebar.
Child Components #
Usage #
Import #
ts
import { Ammsidebar } from "@agufaui/${framework name}";
Html #
<ammsidebar /> or <Ammsidebar />
Configuration #
Theme component name: ammsidebar
Showcase #
- Example is using two slots "header" and "footer".
Click to see code
vue
<template>
<div class="flex w-full doc">
<ammsidebar :mpanel="mpanel" mpanelc="bg-gray-8 w-14rem" :show="true" @close="close">
<template #header>
<aa
href="https://google.com"
i="i-logos:google"
ic="text-5xl"
c="flex-shrink-0 bg-gray-9 rounded-none"
/>
</template>
<template #footer>
<div class="bg-gray-9">
<abutton
v="signout"
i="i-ic:sharp-logout"
ic="text-lg"
spacex="space-x-4"
c="flex-shrink-0 text-white rounded-none"
/>
</div>
</template>
</ammsidebar>
</div>
</template>
<script lang="ts">
export default {
name: "DocMenuMobileSidebar",
};
</script>
<script setup lang="ts">
import type { IAMpanelProps } from "@agufaui/theme";
const mpanel: IAMpanelProps = {
t: "dark",
sections: [
{
items: [
{
name: "dropdown",
props: {
v: "Sites",
i: "i-majesticons:sitemap",
t: "sidebarDark",
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebarDark",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
t: "sidebarDark",
href: "https://github.com",
i: "i-logos:github-icon",
ic: "bg-gray-2 rounded-lg",
},
},
],
},
},
{
name: "dropdown",
props: {
v: "Another Sites",
i: "i-dashicons:admin-site",
t: "sidebarDark",
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebarDark",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
t: "sidebarDark",
href: "https://github.com",
i: "i-logos:github-icon",
ic: "bg-gray-2 rounded-lg",
},
},
],
},
},
],
},
{
title: "Links",
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebarDark",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
],
},
],
};
const close = () => {
console.log("close");
};
</script>Slot #
Two slots, one named "header", one named "footer".
AgufaUI provided Theme #
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IAMmsidebarProps } from "../../types/navigation/AMmsidebar";
export const DAMmsidebarDefault = {
overlayc: "bg-gray-6 opacity-75",
closec:
"mt-2 mr-0.5 h-10 aspect-square rounded-full focus:(outline-none ring-2 ring-inset ring-white)",
closeic: "text-white text-xl",
sidebarc: "max-w-xs w-full bg-gray-9",
};
export const DAMmsidebar: Readonly<Record<string, Partial<IAMmsidebarProps>>> = {
[CDefaultType]: DAMmsidebarDefault,
};
Attributes (Properties) #
Default Values #
vue
closei: "i-ph:x-bold",Unique #
ts
import type { IAMpanelProps } from "./AMpanel";
export interface IAMmsidebarProps extends IProps {
show?: boolean; // if show sidebar
overlayc?: string; // css classes for background overlay 'div' html element
closec?: string; // css classes for close button 'button' html element
closei?: string; // css close button icon
closeic?: string; // css classes for close button icon 'span' html element
sidebarc?: string; // css classes for sidebar container 'div' html element
mpanel: IAMpanelProps; // menu panel
mpanelc?: string; // css classes for menu panel contaienr 'nav' html element
}Inherit from IProps #
ts
export interface IProps {
t?: string; // user defined or AgufaUI provided component type. Not configurable
c?: string; // css classes for component root html element
}Events #
ts
export interface IAMmsidebarEmits {
(e: "close"): void; // close alert event
}