Vue ADS Layout

A Vue plugin to quickly generate a webapplication layout.

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-ads-layout@latest/dist/vue-ads-layout.css">
<script src="https://unpkg.com/vue-ads-layout@latest/dist/vue-ads-layout.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    <div id="app">
        <vue-ads-layout
            :full-bar="false"
        >
            <vue-ads-bar
                slot="toolbar"
                :fixed="true"
                class="bg-red"
            >
                <vue-ads-hide-button
                    slot="first"
                    :hidden="hiddenLeft"
                    @clicked="hideLeft"
                />
                <vue-ads-hide-button
                    slot="last"
                    :hidden="hiddenRight"
                    @clicked="hideRight"
                />
            </vue-ads-bar>
            <vue-ads-bar
                slot="footer"
                :fixed="true"
                :footer="true"
                class="bg-green"
            >
            </vue-ads-bar>
            <vue-ads-drawer
                slot="left-drawer"
                :fixed="true"
                :minified="minifiedLeft"
                :hidden="hiddenLeft"
                class="bg-yellow"
                @minify="minifyLeft"
                @hide="hideLeft"
            >
                <div slot="top">Navigation</div>
                <vue-ads-minify-button
                    slot="bottom"
                    :minified="minifiedLeft"
                    @clicked="minifyLeft"
                />
            </vue-ads-drawer>
            <vue-ads-drawer
                slot="right-drawer"
                :fixed="false"
                :minified="minifiedRight"
                :hidden="hiddenRight"
                :right="true"
                class="bg-blue"
                @minify="minifyRight"
                @hide="hideRight"
  ...

Vue

const VueAdsLayout = window["vue-ads-layout"].VueAdsLayout;
const VueAdsBar = window["vue-ads-layout"].VueAdsBar;
const VueAdsDrawer = window["vue-ads-layout"].VueAdsDrawer;
const VueAdsHideButton = window["vue-ads-layout"].VueAdsHideButton;
const VueAdsMinifyButton = window["vue-ads-layout"].VueAdsMinifyButton;

new Vue({
    el: "#app",
    
    components: {
        VueAdsMinifyButton,
        VueAdsHideButton,
        VueAdsDrawer,
        VueAdsBar,
        VueAdsLayout,
    },

    data () {
        return {
            minifiedLeft: false,
            minifiedRight: false,
            hiddenLeft: false,
            hiddenRight: false,
        };
    },

    methods: {
        minifyLeft (minified) {
            this.minifiedLeft = minified;
        },

        hideLeft (hidden) {
            this.hiddenLeft = hidden;
        },

        minifyRight (minified) {
            this.minifiedRight = minified;
        },

        hideRight (hidden) {
            this.hiddenRight = hidden;
        },
    },
});