mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test
This commit is contained in:
Dillon Ngo
@@ -22,15 +22,28 @@
|
||||
<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 -->
|
||||
<div class="d-flex flex-nowrap align-items-center" id="admin-nav-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>
|
||||
@@ -120,97 +133,186 @@
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
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');
|
||||
|
||||
<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 (!customerNavContainer || !customerMoreDropdown || !customerMoreMenu || !headerRow || !leftSection || !rightSection) return;
|
||||
|
||||
if (!moreDropdown || !moreMenu || !adminNavContainer || !adminNavItems || !headerRow || !leftSection || !rightSection) return;
|
||||
var customerItems = customerNavContainer.querySelectorAll('[data-nav-item]');
|
||||
if (customerItems.length === 0) return;
|
||||
|
||||
moreMenu.innerHTML = '';
|
||||
// Reset all items to visible
|
||||
customerItems.forEach(function(item) {
|
||||
item.style.display = '';
|
||||
});
|
||||
|
||||
var items = adminNavContainer.querySelectorAll('[data-nav-item]');
|
||||
// Calculate available space
|
||||
var headerRect = headerRow.getBoundingClientRect();
|
||||
var leftRect = leftSection.getBoundingClientRect();
|
||||
var rightRect = rightSection.getBoundingClientRect();
|
||||
var availableWidth = headerRect.width - leftRect.width - rightRect.width - 360;
|
||||
|
||||
// Reset all items to visible
|
||||
items.forEach(function(item) {
|
||||
item.style.display = '';
|
||||
});
|
||||
var totalWidth = 0;
|
||||
customerItems.forEach(function(item) {
|
||||
item.style.visibility = 'hidden';
|
||||
item.style.display = '';
|
||||
totalWidth += item.offsetWidth + 20;
|
||||
});
|
||||
|
||||
// Calculate available space
|
||||
var headerRect = headerRow.getBoundingClientRect();
|
||||
var leftRect = leftSection.getBoundingClientRect();
|
||||
var rightRect = rightSection.getBoundingClientRect();
|
||||
customerItems.forEach(function(item) {
|
||||
item.style.visibility = '';
|
||||
});
|
||||
|
||||
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';
|
||||
// If all items fit, no need for dropdown
|
||||
if (totalWidth <= availableWidth) {
|
||||
customerMoreDropdown.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
adjustNavigation();
|
||||
window.addEventListener('resize', adjustNavigation);
|
||||
setTimeout(adjustNavigation, 500);
|
||||
// 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');
|
||||
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';
|
||||
}
|
||||
|
||||
adjustCustomerNavigation();
|
||||
adjustAdminNavigation();
|
||||
window.addEventListener('resize', function() {
|
||||
adjustCustomerNavigation();
|
||||
adjustAdminNavigation();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
setTimeout(function() {
|
||||
adjustCustomerNavigation();
|
||||
adjustAdminNavigation();
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user