gufaUIMenu Sidebar #
Menu sidebar.
Child Components #
Usage #
Import #
ts
import { Amsidebar } from "@agufaui/${framework name}";
Html #
<amsidebar /> or <Amsidebar />
Configuration #
Theme component name: amsidebar
Showcase #
- Example is using two slots "header" and "footer".
Click to see code
vue
<template>
<div class="flex doc">
<amsidebar :mpanel="mpanel" mpanelc="bg-gray-8">
<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>
</amsidebar>
</div>
</template>
<script lang="ts">
export default {
name: "DocMenuSidebar",
};
</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",
},
},
],
},
],
};
</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 { IAMsidebarProps } from "../../types/navigation/AMsidebar";
export const DAMsidebarDefault = {
c: "w-64",
};
export const DAMsidebar: Readonly<Record<string, Partial<IAMsidebarProps>>> = {
[CDefaultType]: DAMsidebarDefault,
};
Attributes (Properties) #
Default Values #
vue
Unique #
ts
import type { IAMpanelProps } from "./AMpanel";
export interface IAMsidebarProps extends IProps {
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
}