From 83e62f595843787cb085aed557066f80eaed0914 Mon Sep 17 00:00:00 2001
From: busti <mbust@live.de>
Date: Thu, 14 Nov 2019 03:59:17 +0100
Subject: [PATCH] finish navbar layout

---
 src/App.vue               | 67 ++-------------------------------------
 src/components/Navbar.vue | 61 +++++++++++++++++++++++++++++++++++
 src/main.js               |  4 +--
 src/store/index.js        |  5 ++-
 4 files changed, 70 insertions(+), 67 deletions(-)
 create mode 100644 src/components/Navbar.vue

diff --git a/src/App.vue b/src/App.vue
index 5d2737d..3162373 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,69 +1,6 @@
 <template>
     <div id="app">
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
-            <div class="dropdown">
-                <button class="btn text-light dropdown-toggle" type="button" id="dropdownMenuButton"
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    36c3
-                </button>
-                <div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
-                    <a class="dropdown-item text-light" href="#">Action</a>
-                    <a class="dropdown-item text-light" href="#">Another action</a>
-                    <a class="dropdown-item text-light" href="#">Something else here</a>
-                </div>
-            </div>
-
-            <!--<ul class="navbar-nav mr-auto">
-                <li class="nav-item active">
-                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">Link</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-                </li>
-                <li class="nav-item">
-                    <form class="form-inline my-2 my-lg-0">
-                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-                    </form>
-                </li>
-            </ul>-->
-
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav">
-                    <li class="nav-item active">
-                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#">Link</a>
-                    </li>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
-                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Dropdown
-                        </a>
-                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                            <a class="dropdown-item" href="#">Action</a>
-                            <a class="dropdown-item" href="#">Another action</a>
-                            <div class="dropdown-divider"></div>
-                            <a class="dropdown-item" href="#">Something else here</a>
-                        </div>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-                    </li>
-                </ul>
-            </div>
-
-            <input class="form-control mr-sm-1" type="search" placeholder="Search" aria-label="Search">
-
-        </nav>
+        <Navbar/>
 
         <div class="input-group mt-2 mx-2">
             <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
@@ -149,8 +86,10 @@
 </template>
 
 <script>
+import Navbar from '@/components/Navbar';
 export default {
   name: 'app',
+  components: {Navbar},
 };
 </script>
 
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..550fa71
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,61 @@
+<template>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
+        <div class="dropdown">
+            <button class="btn text-light dropdown-toggle" type="button" id="dropdownMenuButton"
+                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                {{ activeEvent }}
+            </button>
+            <div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item text-light" href="#" v-for="(event, index) in events" v-bind:key="index"
+                   :class="{ active: event === activeEvent }">{{ event }}</a>
+            </div>
+        </div>
+
+        <div class="custom-control-inline">
+            <button type="button" class="btn mx-1 text-nowrap" v-for="(button, index) in buttons" v-bind:key="index" :class="['btn-' + button.color]">
+                <font-awesome-icon :icon="button.icon"/>&nbsp;{{ button.title }}
+            </button>
+        </div>
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline">
+            <input class="form-control w-100" type="search" placeholder="Search" aria-label="Search">
+        </form>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item" v-for="(link, index) in links" v-bind:key="index">
+                    <a class="nav-link text-nowrap" href="#">{{ link }}</a>
+                </li>
+            </ul>
+        </div>
+
+    </nav>
+</template>
+
+<script>
+import {mapState} from 'vuex';
+
+
+export default {
+  name: 'Navbar',
+  data: () => ({
+    links: ['items', 'boxes', 'mass-edit'],
+    buttons: [
+      { title: 'Add', icon: 'plus', color: 'success' },
+      { title: 'Refresh', icon: 'sync-alt', color: 'primary' },
+      { title: 'Placeholder', icon: 'cat', color: 'warning' },
+    ]
+  }),
+  computed: {
+    ...mapState({
+      events: state => state.events,
+      activeEvent: state => state.activeEvent
+    })
+  }
+};
+</script>
diff --git a/src/main.js b/src/main.js
index 4a6d239..7a1fa64 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,10 +9,10 @@ import 'bootstrap/dist/js/bootstrap.min.js';
 
 // fontawesome
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlus, faCheckCircle, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-library.add(faPlus, faCheckCircle, faEdit, faTrash);
+library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
diff --git a/src/store/index.js b/src/store/index.js
index 880d5ed..a3bab1b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,5 +4,8 @@ import Vuex from 'vuex';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-
+  state: {
+    events: ['35c3', 'camp19', '36c3'],
+    activeEvent: '35c3'
+  }
 });