<template>
    <nav class="navbar navbar-expand-lg navbar-absolute"
         :class="{'bg-white': showMenu, 'navbar-transparent': !showMenu}">
      <div class="container-fluid">
        <div class="navbar-wrapper">
          <a class="navbar-brand" href="#dashboard">Smart Helmet Case Monitoring <strong> > Case A</strong></a>
        </div>
        <div>
          <a class="navbar-text" href="#dashboard">{{now}}</a>
        </div>
      </div>
    </nav>
</template>
<script>
import {CollapseTransition} from 'vue2-transitions';
import Modal from '@/components/Modal';

export default {
    components: {
      CollapseTransition,
      Modal
    },
    computed: {
      routeName() {
        const { name } = this.$route;
        return this.capitalizeFirstLetter(name);
      },
      isRTL() {
        return this.$rtl.isRTL;
      }
    },
    data() {
      return {
        headerAlert: 'header-alert',
        activeNotifications: false,
        showMenu: false,
        searchModalVisible: false,
        searchQuery: '',
        now: ''
      };
    },
    methods: {
      capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
      },
      toggleNotificationDropDown() {
        this.activeNotifications = !this.activeNotifications;
      },
      closeDropDown() {
        this.activeNotifications = false;
      },
      toggleSidebar() {
        this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
      },
      hideSidebar() {
        this.$sidebar.displaySidebar(false);
      },
      toggleMenu() {
        this.showMenu = !this.showMenu;
      },
      setNow() {
        this.now = new Date()
      }
    },
    mounted() {
      setInterval(this.setNow, 1000)
    }
  };
</script>
<style>
</style>
