98 lines
4.4 KiB
PHP
98 lines
4.4 KiB
PHP
<div x-data="sidebar()" x-init="init()" class="bg-white border-end d-flex flex-column"
|
|
:class="collapsed ? 'w-25' : 'w-75'" style="min-height: 100vh; transition: width 0.3s;">
|
|
|
|
<!-- Logo Section -->
|
|
<div class="text-center border-bottom" :style="collapsed ? 'height: 64px;' : 'height: 65px;'">
|
|
<template x-if="!collapsed">
|
|
<img src="https://via.placeholder.com/100x40?text=LOGO" alt="Logo" style="height: 100%;">
|
|
</template>
|
|
<template x-if="collapsed">
|
|
<div class="py-4" style="background: url('https://via.placeholder.com/40') no-repeat center / contain;"></div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="nav flex-column flex-grow-1 overflow-auto pt-3">
|
|
<template x-for="item in navigation" :key="item.label">
|
|
<template x-if="!item.child">
|
|
<a class="nav-link text-dark px-4" :href="item.path">
|
|
<i :class="item.icon + ' me-2'"></i>
|
|
<span x-show="!collapsed" x-text="item.label"></span>
|
|
</a>
|
|
</template>
|
|
|
|
<template x-if="item.child">
|
|
<div class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle text-dark px-4" href="#" data-bs-toggle="dropdown">
|
|
<i :class="item.icon + ' me-2'"></i>
|
|
<span x-show="!collapsed" x-text="item.label"></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<template x-for="sub in item.child" :key="sub.label">
|
|
<li><a class="dropdown-item" :href="sub.path" x-text="sub.label"></a></li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Toggle Button -->
|
|
<button @click="toggle()" class="btn btn-outline-secondary m-3 align-self-end">
|
|
<i :class="collapsed ? 'bi bi-chevron-right' : 'bi bi-chevron-left'"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
function sidebar() {
|
|
return {
|
|
collapsed: false,
|
|
navigation: [
|
|
{ label: 'Dashboard', path: '/dashboard', icon: 'bi-speedometer2' },
|
|
{ label: 'Notifications', path: '/notifications', icon: 'bi-bell' },
|
|
{
|
|
label: 'Member Management', path: '#', icon: 'bi-credit-card', child: [
|
|
{ label: 'Card Member', path: '/member-management/card-member' },
|
|
{ label: 'Locked Accounts', path: '/member-management/lock-account' }
|
|
]
|
|
},
|
|
{
|
|
label: 'Home Page (Mobile)', path: '#', icon: 'bi-house', child: [
|
|
{ label: 'Photo Slider', path: '/home-page/photo-slider' }
|
|
]
|
|
},
|
|
{ label: 'Top-Up', path: '/top-up', icon: 'bi-plus-circle' },
|
|
{
|
|
label: 'About Us', path: '#', icon: 'bi-info-circle', child: [
|
|
{ label: 'Card Types', path: '/about-us/card-types' },
|
|
{ label: 'Terms & Privacy', path: '/about-us/term-privacy' }
|
|
]
|
|
},
|
|
{
|
|
label: 'Reports', path: '#', icon: 'bi-file-text', child: [
|
|
{ label: 'Registration Report', path: '/reports/registration-report' },
|
|
{ label: 'Top-Up Usage Report', path: '/reports/top-up' },
|
|
{ label: 'Mobile Usage Report', path: '/reports/mobile-report' },
|
|
{ label: 'Station Rating Report', path: '/reports/station-rating' },
|
|
]
|
|
},
|
|
{
|
|
label: 'Station Locator', path: '#', icon: 'bi-geo-alt', child: [
|
|
{ label: 'Branches', path: '/branches' },
|
|
{ label: 'Stations', path: '/stations' },
|
|
{ label: 'Fuels', path: '/fuels' },
|
|
]
|
|
},
|
|
],
|
|
|
|
init() {
|
|
this.collapsed = JSON.parse(localStorage.getItem('sidebar-collapsed')) ?? false;
|
|
},
|
|
toggle() {
|
|
this.collapsed = !this.collapsed;
|
|
localStorage.setItem('sidebar-collapsed', JSON.stringify(this.collapsed));
|
|
}
|
|
}
|
|
}
|
|
</script>
|