studytweaks-vuejs-layout

Components

Layout

Main component. Import the component in your app's main.js, then include it in your app's template as the top-level component.

# main.js

import Layout from '@studytweaks/vuejs-layout'
Vue.use(Layout)

# App.vue

<template>
  <Layout>
    :appVersion="version"
    :enableSidebar="isLoggedIn"
    :enableSidebarToggle="isLoggedIn">
    <Logo slot="logo" />
    <Sidebar slot="sidebar" />
    <studytweaksUserMenu
      :divider="false"
      profile="profile"
      slot="nav-right" />
  </Layout>
</template>

<script>
import Logo from './components/Logo'
import Sidebar from './components/Sidebar'

export default {
  components: {
    Logo,
    Sidebar
  },

  computed: {
    isLoggedIn () {
      return this.$studytweaksAuth.isLoggedIn()
    },

    version () {
      return process.env.APP_VERSION
    }
  },

  name: 'app'
</script>

Props

prop	type	default	explanation
appVersion	String, any		The app version to display in the footer
enableSidebar	Boolean, any	true	Whether to display the sidebar
enableSidebarToggle	Boolean, any	̨ true	Whether to display the sidebar toggle
flatten	Boolean, any	true	Whether to flatten any nav components in the top nav (dropdowns will show expanded, and the dropdown toggle will be hidden)
layout	String, any	Flex	The layout to use. Currently "Flex" is the only avaiable value

Slots

logo

A component to be displayed as the top nav's nav-brand component.

main

The content fo the page. This should include <router-view />.

nav-center

A component to be displayed as the top nav's centered nav. The Layout component expects this component to follow bootstrap's conventions for navs.

nav-right

A component to be displayed as the top nav's right-aligned nav. The Layout component expects this component to follow bootstrap's conventions for navs.

sidebar

A component to be displayed as the layout's sidebar.

Version

Displays the app version is suitable style. By default, this is displayed in the footer.

Props

prop	type	default	explanation
appVersion	String, any		The app version to display in the footer