exchange-2.0/resources/views/partials/header.blade.php

<div class="container-fluid p-r-15 p-l-15 position-fixed" style="z-index: 1050;">
    <div class="row bg-primary-complete-gradient align-items-center justify-content-center">
        <div class="col">
            <div class="container-fluid container-fixed-lg no-padding">
                <div class="row align-items-center justify-content-center">
                    <div class="col-auto d-none">
                        <a href="#" class="btn-link toggle-sidebar fa fa-bars text-white" data-toggle="horizontal-menu"></a>
                    </div>
                    <div class="col-auto d-xs-none bg-complete-light p-t-10 p-b-10 p-l-30 p-r-30">
                        <a href="{{route('dashboard')}}"><div class="row">
                            <div class="col">
                                <img src="{{asset('images/logo-light.png')}}" alt="logo" height="22">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="m-t-5 all-caps fs-10 text-white hint-text">Overseas Transfers Management</div>
                            </div>
                        </div>
                        </a>
                    </div>
                    <div class="col text-right p-r-30 ">
                        <div class="row justify-content-end">
                            <div class="col text-left">
                                <div class="row justify-content-end">
                                    <div class="col-auto p-r-20">
                                        <a href="{{route('dashboard')}}"><div class="text-white all-caps fs-12">Dashboard</div></a>
                                    </div>
                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
                                        <a href="{{route('booking.complete')}}">
                                            <div class="text-white all-caps fs-12">Completed Transfers</div>
                                        </a>
                                    </div>
                                    <div class="col-auto p-r-20 hide">
                                        <div class="text-white all-caps fs-12">Payments & Billing</div>
                                    </div>
                                    @if(!env('IS_PRODUCTION'))
                                    <div v-if="!$store.getters.isAdmin" class="col-auto p-r-20">
                                        <a href="{{route('bank')}}"><div class="text-white all-caps fs-12">Bank Accounts</div></a>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto p-r-30">
                        <div class="row no-margin">
                            <div class="col-auto m-r-5 hide">
                                <div class="row align-items-center justify-content-center b-a b-thick h-100" style="border-color: #ffffff3d">
                                    <div class="col p-r-10 p-l-10">
                                        <i class="fa fa-bell fs-12 text-primary-lighter"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto m-r-20">
                                <div class="row align-items-center p-t-5 p-b-5 b-a b-thick" style="border-color: #ffffff3d">
                                    <div class="col-auto">
                                        <div class="fs-12 text-primary-lighter">Hi, <span v-text="$store.getters.getUserName.split(' ').slice(0,2).join(' ')"></span>!</div>
                                    </div>
                                    <div class="col-auto p-l-0 p-r-10 hide">
                                        <div class="btn btn-xs btn-primary p-t-0 p-b-0 text-primary-lighter" style="background-color: rgba(255, 255, 255, 0.2);">
                                            <i class="fa fa-angle-down fs-14 m-t-5"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto m-r-5" v-if="$store.getters.isAdmin">
                                <a href="{{route('settings')}}">
                                    <div class="row align-items-center justify-content-center b-a b-thick h-100" style="border-color: #ffffff3d">
                                        <div class="col p-r-10 p-l-10">
                                            <i class="fa fa-cog fs-12 text-primary-lighter"></i>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-auto">
                                <log-out-form-component></log-out-form-component>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>