cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-19 04:23:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)

Browse Source
This commit is contained in:
Dillon Ngo
2026-07-03 21:17:22 +08:00
parent bf166fcf82
commit bd5a6eff69
1 changed files with 110 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/partials/header.blade.php
+110 -9
View File
@@ -22,11 +22,24 @@
<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>
<!-- Customer items container -->
<div v-if="authStore.isCustomer" class="d-flex flex-nowrap align-items-center" id="customer-nav-container">
<div id="customer-nav-items" class="d-contents" style="display: contents;">
<div class="col-auto p-r-20" data-nav-item>
<a href="{{route('banks')}}"><div class="text-white all-caps fs-12">Bank Accounts</div></a>
</div>
<div class="col-auto p-r-20" data-nav-item>
<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>
<!-- More dropdown for customers -->
<div class="col-auto p-r-20 dropdown-hover" id="customer-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="customer-more-dropdown-menu">
</div>
</div>
</div>
<!-- Admin items container -->
@@ -124,7 +137,88 @@
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
function adjustNavigation() {
function adjustCustomerNavigation() {
var customerNavContainer = document.getElementById('customer-nav-container');
var customerMoreDropdown = document.getElementById('customer-more-dropdown');
var customerMoreMenu = document.getElementById('customer-more-dropdown-menu');
var headerRow = document.querySelector('.header-nav-row');
var leftSection = document.querySelector('.header-logo-section');
var rightSection = document.querySelector('.header-right-section');
if (!customerNavContainer || !customerMoreDropdown || !customerMoreMenu || !headerRow || !leftSection || !rightSection) return;
var customerItems = customerNavContainer.querySelectorAll('[data-nav-item]');
if (customerItems.length === 0) return;
// Reset all items to visible
customerItems.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;
customerItems.forEach(function(item) {
item.style.visibility = 'hidden';
item.style.display = '';
totalWidth += item.offsetWidth + 20;
});
customerItems.forEach(function(item) {
item.style.visibility = '';
});
// If all items fit, no need for dropdown
if (totalWidth <= availableWidth) {
customerMoreDropdown.style.display = 'none';
return;
}
// Items to hide - start from the last ones
var itemsToHide = [];
for (var i = customerItems.length - 1; i >= 0; i--) {
var item = customerItems[i];
item.style.visibility = 'hidden';
var itemWidth = item.offsetWidth + 20;
if (totalWidth - itemWidth <= availableWidth) {
totalWidth -= itemWidth;
item.style.visibility = '';
break;
} else {
itemsToHide.push(item);
totalWidth -= itemWidth;
}
item.style.visibility = '';
}
// Reverse to get them in original order for dropdown
itemsToHide.reverse();
// Add hidden items to dropdown
customerMoreMenu.innerHTML = '';
itemsToHide.forEach(function(item) {
var link = item.querySelector('a');
if (link) {
var menuItem = document.createElement('a');
menuItem.href = link.href;
menuItem.target = link.target || '';
menuItem.className = 'dropdown-item';
menuItem.innerHTML = '<span class="all-caps fs-12">' + link.textContent.trim() + '</span>';
customerMoreMenu.appendChild(menuItem);
}
item.style.display = 'none';
});
customerMoreDropdown.style.display = customerMoreMenu.children.length > 0 ? 'block' : 'none';
}
function adjustAdminNavigation() {
var moreDropdown = document.getElementById('more-dropdown');
var moreMenu = document.getElementById('more-dropdown-menu');
var adminNavContainer = document.getElementById('admin-nav-container');
@@ -209,9 +303,16 @@ document.addEventListener('DOMContentLoaded', function() {
moreDropdown.style.display = moreMenu.children.length > 0 ? 'block' : 'none';
}
adjustNavigation();
window.addEventListener('resize', adjustNavigation);
setTimeout(adjustNavigation, 500);
adjustCustomerNavigation();
adjustAdminNavigation();
window.addEventListener('resize', function() {
adjustCustomerNavigation();
adjustAdminNavigation();
});
setTimeout(function() {
adjustCustomerNavigation();
adjustAdminNavigation();
}, 500);
});
</script>
@endpush