vue-beercss-navigation

A Vue.js component that provides a customizable navigation rail or drawer, with support to configure entries with icons and labels, with a focus on responsiveness and following Material Design 3 guidelines, implemented with BeerCSS.

Installation

npm install vue-beercss-navigation

Include BeerCSS in your application: Add the following lines to your main.js or app.js file to include BeerCSS and Material Dynamic Colors:

import 'beercss'
import 'material-dynamic-colors'

Usage

Here's how to use the VueBeercssNavigation component in your Vue.js application:

<template>
  <div>
    <VueBeercssNavigation :modelValue="navigationEntries" @close="handleClose" @activeteEntry="handleActiveEntry">
      <template v-slot:top>
        <!-- Custom content for the top slot -->
      </template>
      <template v-slot:bottom>
        <!-- Custom content for the bottom slot -->
      </template>
    </VueBeercssNavigation>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navigationEntries: [
        { name: 'home', label: 'Home', icon: 'home', path: '/' },
        {
          name: 'settings',
          label: 'Settings',
          icon: 'settings',
          entrys: [
            { name: 'profile', label: 'Profile', icon: 'person', path: '/profile' },
            { name: 'account', label: 'Account', icon: 'account_circle', path: '/account' }
          ]
        }
      ]
    };
  },
  methods: {
    handleClose() {
      console.log('Navigation closed');
    },
    handleActiveEntry(entry) {
      console.log('Active entry:', entry);
    }
  }
};
</script>

Props

| Prop | Type | Default | Description | |-----------------|-----------------|-----------------|-----------------| | modelValue | Array | [] | The array of navigation entries.

Object entry

| Prop | Type | Description| |--------------|--------|------------------------------------------| | path | String | The route path for the navigation entry. | | icon | String | The icon for the navigation entry. | | label | String | The label for the navigation entry. | | name | String | The unique name for the navigation entry.| | entrys | Array | An array of child navigation entries. |

Events

The component emits the following events: | Event | Description | |---------------|----------------------------------------| | @close | Emitted when the navigation is closed.| | @activeteEntry | Emitted when an entry is activated. The event payload contains the activated entry object.|

Slots

| Slot | Description | |-------|----------------------------------------------------------------------| | top | Slot for custom content to be placed at the top of the navigation. | | bottom| Slot for custom content to be placed at the bottom of the navigation.|

License

This project is licensed under the MIT License.