Implemented Toolbar component

src/AppMenu.vue

@@ -44,6 +44,7 @@
                 <div>
                     <router-link to="/panel">&#9679; Panel</router-link>
                     <router-link to="/fieldset">&#9679; Fieldset</router-link>
+                    <router-link to="/toolbar">&#9679; Toolbar</router-link>
                 </div>
             </div>
 

src/assets/styles/primevue.css

@@ -3,4 +3,5 @@
 @import '../../components/listbox/ListBox.css';
 @import '../../components/button/Button.css';
 @import '../../components/panel/Panel.css';
-@import '../../components/fieldset/Fieldset.css';
+@import '../../components/fieldset/Fieldset.css';
+@import '../../components/toolbar/Toolbar.css';

src/components/toolbar/Toolbar.css

@@ -0,0 +1,17 @@
+.p-toolbar {
+    padding: .25em .5em;
+}
+
+.p-toolbar:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.p-toolbar-group-left {
+    float:left
+}
+
+.p-toolbar-group-right {
+    float:right
+}

src/components/toolbar/Toolbar.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="p-toolbar p-component">
+        <div class="p-toolbar-group-left">
+             <slot name="left"></slot>
+        </div>
+        <div class="p-toolbar-group-right">
+             <slot name="right"></slot>
+        </div>
+    </div>
+</template>

src/main.js

@@ -6,6 +6,7 @@ import ListBox from './components/listbox/ListBox';
 import Button from './components/button/Button';
 import Panel from './components/panel/Panel';
 import Fieldset from './components/fieldset/Fieldset';
+import Toolbar from './components/toolbar/Toolbar';
 
 import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
@@ -18,6 +19,7 @@ Vue.component('p-button', Button);
 Vue.component('p-listBox', ListBox);
 Vue.component('p-panel', Panel);
 Vue.component('p-fieldset', Fieldset);
+Vue.component('p-toolbar', Toolbar);
 
 new Vue({
   router,

src/router.js

@@ -35,6 +35,11 @@ export default new Router({
         path: '/fieldset',
         name: 'fieldset',
         component: () => import('./views/fieldset/FieldsetDemo.vue')
+    },
+    {
+        path: '/toolbar',
+        name: 'toolbar',
+        component: () => import('./views/toolbar/ToolbarDemo.vue')
     }
   ]
 });

src/views/toolbar/ToolbarDemo.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Toolbar</h1>
+                <p>Toolbar is a grouping component for buttons and other content.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <p-toolbar>
+                <template slot="left">
+                    <p-button label="New" icon="pi pi-plus" style="margin-right: .25em" />
+                    <p-button label="Upload" icon="pi pi-upload" class="p-button-success" />
+                    <i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
+                    <p-button label="Save" icon="pi pi-check" class="p-button-warning" />
+                </template>
+                
+                <template slot="right">
+                    <p-button icon="pi pi-search" style="margin-right: .25em" />
+                    <p-button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
+                    <p-button icon="pi pi-times" class="p-button-danger" />
+                </template>
+            </p-toolbar>
+        </div>
+    </div>
+</template>