SAML; Dashboard

app/assets/app/dash/NavBar.component.js

@@ -0,0 +1,65 @@
+import { Component } from '../../lib/vues6/vues6.js'
+import { event_bus } from '../service/EventBus.service.js'
+import { session } from '../service/Session.service.js'
+import { message_service } from '../service/Message.service.js'
+
+const template = `
+<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
+    <button id="menu-toggle" class="btn" @click="toggle_sidebar">
+        <i class="fa fa-ellipsis-v"></i>
+    </button>
+    <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 id="navbarSupportedContent" class="collapse navbar-collapse">
+        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
+            <li class="nav-item dropdown">
+                <a
+                    href="#"
+                    role='button'
+                    data-toggle='dropdown'
+                    aria-haspopup='true'
+                    aria-expanded='false'
+                    id="navbarDropdown"
+                    class="nav-link dropdown-toggle"
+                >{{ first_name }} {{ last_name }}</a>
+                <div
+                    class="dropdown-menu dropdown-menu-right"
+                    aria-labelledby="navbarDropdown"
+                >
+                    <h6 class="dropdown-header">Hello, {{ first_name }}.</h6>
+                    <a href="/dash/profile" class="dropdown-item">My Profile</a>
+                    <div class="dropdown-divider"></div>
+                    <a href="/auth/logout" class="dropdown-item">Sign-Out of {{ app_name }}</a>
+                </div>
+            </li>
+        </ul>
+    </div>
+</nav>
+`
+
+export default class NavBarComponent extends Component {
+    static get selector() { return 'coreid-navbar' }
+    static get template() { return template }
+    static get props() { return [] }
+
+    constructor() {
+        super()
+        this.toggle_event = event_bus.event('sidebar.toggle')
+        this.first_name = session.get('user.first_name')
+        this.last_name = session.get('user.last_name')
+        this.app_name = session.get('app.name')
+    }
+
+    toggle_sidebar() {
+        this.toggle_event.fire()
+    }
+}