stash

frontend/src/components/BaseLayout.vue

@@ -6,8 +6,11 @@
                 <a class="sidebar-toggle d-flex" @click="toggleSidebar">
                     <i class="hamburger align-self-center"></i>
                 </a>
+                <SearchBox/>
                 <div class="navbar-collapse collapse">
                     <ul class="navbar-nav navbar-align">
+                        <Notifications :notifications="notifications"/>
+                        <Messages :messages="messages"/>
                         <UserDropdown/>
                     </ul>
                 </div>
@@ -19,17 +22,27 @@
 </template>
 
 <script>
-/* global closeAllDropdowns */
+import {mapGetters, mapMutations, mapState} from 'vuex';
+import Notifications from "@/components/Notifications.vue";
+import Messages from "@/components/Messages.vue";
 import Footer from "@/components/Footer.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import UserDropdown from "@/components/UserDropdown.vue";
+import SearchBox from "@/components/SearchBox.vue";
 
 export default {
     name: 'BaseLayout',
     components: {
+        SearchBox,
         UserDropdown,
+        Sidebar,
         Footer,
-        Sidebar
+        Messages,
+        Notifications
+    },
+    computed: {
+        ...mapState(['messages']),
+        ...mapGetters(['notifications']),
     },
     props: {
         hideSearch: {
@@ -124,4 +137,43 @@ export default {
     }
 }
 
+
+</style>
+
+<style>
+.nav-flag::after, .nav-icon::after {
+    display: none !important;
+}
+
+.nav-flag .feather, .nav-flag svg, .nav-icon .feather, .nav-icon svg {
+    width: 20px;
+    height: 20px;
+}
+
+.nav-flag, .nav-icon {
+    padding: .1rem .8rem;
+    display: block;
+    font-size: 1.5rem;
+    color: #6c757d;
+    transition: background .1s ease-in-out, color .1s ease-in-out;
+    line-height: 1.4;
+}
+
+.nav-item .indicator {
+    background: #3b7ddd;
+    box-shadow: 0 .1rem .2rem #0000000d;
+    border-radius: 50%;
+    display: block;
+    height: 18px;
+    width: 18px;
+    padding: 1px;
+    position: absolute;
+    top: 0;
+    right: -8px;
+    text-align: center;
+    transition: top .1s ease-out;
+    font-size: .675rem;
+    color: #fff;
+}
+
 </style>