Easca

# Sidebar

The component <easca-sidebar> is a wrapper that positions branding, navigation, and other elements into a concise sidebar.

# Example

# Source Code

<template>
  <aside class="easca-sidebar">
    <div class="brand">
      <!-- @slot Use this slot title -->
      <slot name="title"></slot>
    </div>
    <b-nav vertical>
      <!-- @slot Use this slot navigation -->
      <slot name="navigation"></slot>
    </b-nav>
  </aside>
</template>

<script>
import "./Sidebar.scss";

export default {
  name: "easca-sidebar",
  mounted: () => {
    var dropdowns = document.getElementsByClassName("dropdown");
    for (const dropdown of dropdowns) {
      for (const nav_item of dropdown.children) {
        if (nav_item.getElementsByClassName("nav-link")[0].classList.contains("active")) {
          dropdown.style.removeProperty("display");
          dropdown.classList.add("show");
        }
      }
    }
  }
};
</script>

<style></style>

# Slots

# title

<template v-slot:title>...</template>

<template v-slot:navigation>...</template>

For navigation links use <b-nav-item>.

<b-nav-item active>Dashboard</b-nav-item>

For dropdowns use a combination of <b-button> and <b-collapse>.

<b-button v-b-toggle="'account'">Account</b-button>
<b-collapse id='account' class='dropdown'>
  <b-nav-item>Profile</b-nav-item>
  <b-nav-item>Billing</b-nav-item>
  <b-nav-item>Security</b-nav-item>
</b-collapse>

←