mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-21 13:33:57 +00:00
Dillon Ngo
218 lines
12 KiB
PHP
218 lines
12 KiB
PHP
<div class="container-fluid p-r-15 p-l-15 position-fixed" style="z-index: 1050;" v-cloak>
|
|
<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 header-nav-row">
|
|
<div class="col-auto d-xs-none bg-complete-light p-t-10 p-b-10 p-l-30 p-r-30 header-logo-section">
|
|
<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 align-items-center">
|
|
<!-- Always visible items -->
|
|
<div class="col-auto p-r-20">
|
|
<a href="{{route('dashboard')}}"><div class="text-white all-caps fs-12">Dashboard</div></a>
|
|
</div>
|
|
<div v-if="authStore.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="authStore.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>
|
|
|
|
<!-- Admin items container -->
|
|
<div v-if="authStore.isAdmin" class="d-flex flex-nowrap align-items-center" id="admin-nav-container">
|
|
<div id="admin-nav-items" class="d-contents" style="display: contents;">
|
|
<div class="col-auto p-r-20" data-nav-item data-original-index="0">
|
|
<a href="{{route('payments')}}"><div class="text-white all-caps fs-12"> Payments</div></a>
|
|
</div>
|
|
<div class="col-auto p-r-20" data-nav-item data-original-index="1">
|
|
<a href="{{route('billings')}}"><div class="text-white all-caps fs-12">Billings</div></a>
|
|
</div>
|
|
<div class="col-auto p-r-20" data-nav-item data-original-index="2">
|
|
<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" data-nav-item data-original-index="3">
|
|
<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" data-nav-item data-original-index="4">
|
|
<a href="{{route('bookings')}}"><div class="text-white all-caps fs-12">Transfers</div></a>
|
|
</div>
|
|
<div class="col-auto p-r-20" data-nav-item data-original-index="5">
|
|
<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" data-nav-item data-original-index="6">
|
|
<a href="{{route('customers')}}"><div class="text-white all-caps fs-12">Customers</div></a>
|
|
</div>
|
|
<div class="col-auto p-r-20" data-nav-item data-original-index="7">
|
|
<a href="{{route('wallet.wallets')}}"><div class="text-white all-caps fs-12">Wallets</div></a>
|
|
</div>
|
|
<div class="col-auto p-r-20" data-nav-item data-original-index="8">
|
|
<a href="{{route('admin.download')}}"><div class="text-white all-caps fs-12">Downloads</div></a>
|
|
</div>
|
|
</div>
|
|
<!-- More dropdown -->
|
|
<div class="col-auto p-r-20 dropdown-hover" id="more-dropdown" style="display: none;">
|
|
<div class="text-white all-caps fs-12 pointer x-dropdown-hover-trigger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
More <i class="fa fa-caret-down"></i>
|
|
</div>
|
|
<div class="dropdown-menu dropdown-menu-right dropdown-hover-menu" id="more-dropdown-menu">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto pr-1 pr-md-4 header-right-section">
|
|
<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="authStore.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="uiStore.toggleSection('sideMenu', 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>
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
function adjustNavigation() {
|
|
var moreDropdown = document.getElementById('more-dropdown');
|
|
var moreMenu = document.getElementById('more-dropdown-menu');
|
|
var adminNavContainer = document.getElementById('admin-nav-container');
|
|
var adminNavItems = document.getElementById('admin-nav-items');
|
|
var headerRow = document.querySelector('.header-nav-row');
|
|
var leftSection = document.querySelector('.header-logo-section');
|
|
var rightSection = document.querySelector('.header-right-section');
|
|
|
|
if (!moreDropdown || !moreMenu || !adminNavContainer || !adminNavItems || !headerRow || !leftSection || !rightSection) return;
|
|
|
|
moreMenu.innerHTML = '';
|
|
|
|
var items = adminNavContainer.querySelectorAll('[data-nav-item]');
|
|
|
|
// Reset all items to visible
|
|
items.forEach(function(item) {
|
|
item.style.display = '';
|
|
});
|
|
|
|
// Calculate available space
|
|
var headerRect = headerRow.getBoundingClientRect();
|
|
var leftRect = leftSection.getBoundingClientRect();
|
|
var rightRect = rightSection.getBoundingClientRect();
|
|
|
|
var availableWidth = headerRect.width - leftRect.width - rightRect.width - 360;
|
|
|
|
var totalWidth = 0;
|
|
items.forEach(function(item) {
|
|
item.style.visibility = 'hidden';
|
|
item.style.display = '';
|
|
totalWidth += item.offsetWidth + 20;
|
|
});
|
|
|
|
items.forEach(function(item) {
|
|
item.style.visibility = '';
|
|
});
|
|
|
|
// If all items fit, no need for dropdown
|
|
if (totalWidth <= availableWidth) {
|
|
moreDropdown.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
// Items to hide - start from the last ones (maintaining original order for visible items)
|
|
var itemsToHide = [];
|
|
|
|
// Iterate from the end to find items that need to be hidden
|
|
for (var i = items.length - 1; i >= 0; i--) {
|
|
var item = items[i];
|
|
item.style.visibility = 'hidden';
|
|
var itemWidth = item.offsetWidth + 20;
|
|
|
|
if (totalWidth - itemWidth <= availableWidth) {
|
|
// This item can be shown, stop hiding
|
|
totalWidth -= itemWidth;
|
|
item.style.visibility = '';
|
|
break;
|
|
} else {
|
|
// This item needs to be hidden
|
|
itemsToHide.push(item);
|
|
totalWidth -= itemWidth;
|
|
}
|
|
item.style.visibility = '';
|
|
}
|
|
|
|
// Reverse to get them in original order for dropdown
|
|
itemsToHide.reverse();
|
|
|
|
// Add hidden items to dropdown in their original order
|
|
itemsToHide.forEach(function(item) {
|
|
var link = item.querySelector('a');
|
|
if (link) {
|
|
var menuItem = document.createElement('a');
|
|
menuItem.href = link.href;
|
|
menuItem.className = 'dropdown-item';
|
|
menuItem.innerHTML = '<span class="all-caps fs-12">' + link.textContent.trim() + '</span>';
|
|
moreMenu.appendChild(menuItem);
|
|
}
|
|
item.style.display = 'none';
|
|
});
|
|
|
|
moreDropdown.style.display = moreMenu.children.length > 0 ? 'block' : 'none';
|
|
}
|
|
|
|
adjustNavigation();
|
|
window.addEventListener('resize', adjustNavigation);
|
|
setTimeout(adjustNavigation, 500);
|
|
});
|
|
</script>
|
|
@endpush
|