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-between">
                    <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 d-none d-md-inline">
                        <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('payments')}}">
                                            <div class="text-white all-caps fs-12">Payments</div>
                                        </a>
                                    </div>
                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
                                        <a href="{{route('billings')}}">
                                            <div class="text-white all-caps fs-12">Billings</div>
                                        </a>
                                    </div>
                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
                                        <a href="{{route('currency_orders')}}">
                                            <div class="text-white all-caps fs-12">Currency Orders</div>
                                        </a>
                                    </div>
                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
                                        <a href="{{route('supplier.payments')}}">
                                            <div class="text-white all-caps fs-12">Supplier Currency Orders</div>
                                        </a>
                                    </div>
                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
                                        <a href="{{route('bookings')}}">
                                            <div class="text-white all-caps fs-12">Transfers</div>
                                        </a>
                                    </div>
                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
                                        <a href="{{route('bookings.urgent')}}">
                                            <div class="text-white all-caps fs-12">Urgent List</div>
                                        </a>
                                    </div>
                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
                                        <a href="{{route('customers')}}">
                                            <div class="text-white all-caps fs-12">customers</div>
                                        </a>
                                    </div>
                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
                                        <a href="{{route('wallet.wallets')}}">
                                            <div class="text-white all-caps fs-12">Wallets</div>
                                        </a>
                                    </div>
                                    <div v-if="$store.getters.isCustomer" class="col-auto p-r-20">
                                        <a href="{{route('banks')}}"><div class="text-white all-caps fs-12">Bank Accounts</div></a>
                                    </div>
                                    <div v-if="$store.getters.isCustomer" class="col-auto p-r-20">
                                        <a href="https://www.cief-malaysia.com/foreign-payment-service-e-invoice" target="_blank"><div class="text-white all-caps fs-12">E-Invoice Guideline</div></a>
                                    </div>
                                    <!-- <div v-if="$store.getters.isCustomer" class="col-auto p-r-20">
                                        <a href="{{route('rewards')}}"><div class="text-white all-caps fs-12">Vouchers</div></a>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto pr-1 pr-md-4">
                        <div class="row no-margin">
                            <div class="col-auto m-r-20 d-none d-md-inline">
                                <div class="row align-items-center p-t-5 p-b-5 b-a b-thick d-inline-flex h-100" 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 hide">
                                <notification-section-component section="section"></notification-section-component>
                            </div>
                            <div class="col-auto m-r-5 d-none d-md-inline">
                                <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-12 col-md-auto text-right d-none d-md-inline">
                                <log-out-form-component></log-out-form-component>
                            </div>

                            <div class="col-auto d-md-none pointer" @click="$store.dispatch('toggleSection', {name: 'sideMenu', status: true})">
                                <i class="fa fa-bars fs-18 text-white"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if(env('APP_ENV') === 'development')
        <div class="row">
            <div class="col no-padding">
                <div class="alert alert-danger" role="alert">
                    <i class="fa fa-times float-right text-danger pointer" data-dismiss="alert"></i>
                    <strong>Development: </strong>Your are currently browsing the application on a development server, it is safe to make changes here!
                </div>
            </div>
        </div>
    @endif
</div>