Settings Navigation | YouCan Developer

A navigation sidebar used to display a list of settings.

Usage

javascript

import { SettingsNav, SettingsNavItem } from '@youcan/alto';
import { ref } from 'vue';

const SETTINGS = [...];
const activeTab = ref(SETTINGS[0].label);

const handleClick = (tab: string) => {...};

vue

<SettingsNav>
  <template #header>
    <p>Settings</p>
  </template>
  <template #items>
    <SettingsNavItem
      v-for="item in SETTINGS"
      :key="item.label"
      :label="item.label"
      :icon="item.icon"
      :active="activeTab === item.label"
      @click="() => handleClick(item.label)"
    />
  </template>
</SettingsNav>

API Reference