180 lines
12 KiB
PHP
180 lines
12 KiB
PHP
<?php
|
|
// components/layout_sidebar.php
|
|
$current_page = basename($_SERVER['PHP_SELF']);
|
|
$is_settings_page = ($current_page === 'admin_settings.php');
|
|
$t = function($class_str) use ($is_settings_page) {
|
|
return $is_settings_page ? str_replace('emerald', 'blue', $class_str) : $class_str;
|
|
};
|
|
?>
|
|
<div id="sidebar-backdrop" class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-30 hidden lg:hidden transition-opacity opacity-0 pointer-events-none"></div>
|
|
|
|
<aside id="sidebar" class="w-64 bg-white/90 lg:bg-white/70 backdrop-blur-xl border-r border-white/50 flex flex-col shadow-[4px_0_24px_rgba(34,197,94,0.05)] z-40 transition-transform duration-300 fixed lg:sticky top-0 h-screen overflow-y-auto -translate-x-full lg:translate-x-0">
|
|
<div class="p-5 border-b <?php echo $t('border-emerald-500/10'); ?> mb-6 relative">
|
|
<div class="flex items-center gap-3.5">
|
|
<!-- Logo with effects -->
|
|
<div class="relative shrink-0 w-14 h-14 group">
|
|
<div class="absolute inset-0 <?php echo $t('bg-emerald-400/30'); ?> rounded-full filter blur-md group-hover:<?php echo $t('bg-emerald-400/50'); ?> transition-colors duration-500"></div>
|
|
<div class="relative w-full h-full bg-white/90 backdrop-blur-md rounded-full <?php echo $t('shadow-[0_2px_12px_rgba(16,185,129,0.15)]'); ?> border-2 border-white flex items-center justify-center p-0 overflow-hidden">
|
|
<img src="../img/logo.png" alt="Logo" class="w-full h-full object-cover scale-110 drop-shadow-sm rounded-full relative z-10">
|
|
<div class="animate-shine"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text -->
|
|
<div class="flex flex-col pt-1">
|
|
<?php
|
|
require_once(__DIR__."/../core/settings.php");
|
|
$app_settings = get_app_settings();
|
|
?>
|
|
<h2 class="<?php echo $t('text-emerald-700'); ?> font-extrabold text-[17px] leading-tight tracking-tight">
|
|
<?php
|
|
// Split the text to make it break nicely if needed, though Tailwind leading-tight helps
|
|
echo htmlspecialchars($app_settings['sidebar_header_main']);
|
|
?>
|
|
</h2>
|
|
<div class="text-[11px] text-slate-500 mt-1 font-medium tracking-wide">
|
|
<?php echo htmlspecialchars($app_settings['sidebar_header_sub']); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Close Button -->
|
|
<button id="sidebar-close" class="absolute top-4 right-4 lg:hidden p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="flex flex-col gap-2 px-4 flex-1">
|
|
<?php
|
|
$is_dashboard = ($current_page == 'dashboard.php');
|
|
$dash_classes = $is_dashboard
|
|
? $t('bg-emerald-100 text-emerald-700 font-semibold shadow-sm')
|
|
: $t('text-slate-500 font-medium hover:bg-emerald-50/60 hover:text-emerald-600');
|
|
?>
|
|
<a href="dashboard.php" class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-300 group <?php echo $dash_classes; ?>">
|
|
<svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-125" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
|
|
หน้าหลัก (Dashboard)
|
|
</a>
|
|
|
|
<?php
|
|
$is_search = ($current_page == 'search.php' || $current_page == 'patient_detail.php');
|
|
$search_classes = $is_search
|
|
? $t('bg-emerald-100 text-emerald-700 font-semibold shadow-sm')
|
|
: $t('text-slate-500 font-medium hover:bg-emerald-50/60 hover:text-emerald-600');
|
|
?>
|
|
<a href="search.php" class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-300 group <?php echo $search_classes; ?>">
|
|
<svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-125" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
|
ค้นหาเวชระเบียน
|
|
</a>
|
|
|
|
<div class="mt-4 mb-2 border-t <?php echo $t('border-emerald-500/10'); ?> pt-4"></div>
|
|
|
|
<?php
|
|
$is_ncd = ($current_page == 'ncd_registry.php');
|
|
$ncd_classes = $is_ncd
|
|
? $t('bg-emerald-100 text-emerald-700 font-semibold shadow-sm')
|
|
: $t('text-slate-500 font-medium hover:bg-emerald-50/60 hover:text-emerald-600');
|
|
?>
|
|
<div class="flex flex-col">
|
|
<a href="ncd_registry.php?clinic=ALL" class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-300 group <?php echo $ncd_classes; ?>">
|
|
<svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-125" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
|
|
ทะเบียนผู้ป่วย NCD
|
|
</a>
|
|
<?php if ($is_ncd): ?>
|
|
<div class="ml-11 mt-1 flex flex-col gap-1 border-l-2 <?php echo $t('border-emerald-500/20'); ?> pl-3">
|
|
<?php
|
|
$curr_clinic = $_GET['clinic'] ?? 'ALL';
|
|
$ncd_clinics = [
|
|
'ALL' => 'DASHBOARD รวม',
|
|
'DM' => 'คลินิกเบาหวาน (DM)',
|
|
'HT' => 'คลินิกความดันฯ (HT)',
|
|
'DLP' => 'คลินิกไขมันฯ (DLP)',
|
|
'CKD' => 'คลินิกโรคไต (CKD)'
|
|
];
|
|
foreach ($ncd_clinics as $c_id => $c_name):
|
|
$is_active = ($curr_clinic === $c_id);
|
|
$sub_classes = $is_active
|
|
? $t('text-emerald-700 font-bold')
|
|
: $t('text-slate-500 hover:text-emerald-600');
|
|
?>
|
|
<a href="ncd_registry.php?clinic=<?= $c_id ?>" class="py-1.5 text-[14px] transition-colors <?= $sub_classes ?>">
|
|
<?= $c_name ?>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="mt-6 mb-2 border-t <?php echo $t('border-emerald-500/10'); ?> pt-6">
|
|
<span class="px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2 block">ช่วยเหลือ</span>
|
|
<?php
|
|
$is_manual = ($current_page == 'manual.php');
|
|
$manual_classes = $is_manual
|
|
? $t('bg-emerald-100 text-emerald-700 font-semibold shadow-sm')
|
|
: $t('text-slate-500 font-medium hover:bg-emerald-50/60 hover:text-emerald-600');
|
|
?>
|
|
<a href="manual.php" class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-300 group <?php echo $manual_classes; ?>">
|
|
<svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-125 group-hover:-rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
|
|
คู่มือการใช้งาน
|
|
</a>
|
|
</div>
|
|
|
|
<?php
|
|
// Only show settings to admins
|
|
$current_user = $_SESSION['account'] ?? '';
|
|
if (function_exists('is_admin') && is_admin($current_user)):
|
|
$is_settings = ($current_page == 'admin_settings.php');
|
|
$settings_classes = $is_settings
|
|
? $t('bg-emerald-100 text-emerald-700 font-semibold shadow-sm')
|
|
: $t('text-slate-500 font-medium hover:bg-emerald-50/60 hover:text-emerald-600');
|
|
?>
|
|
|
|
<div class="mt-6 mb-2 border-t <?php echo $t('border-emerald-500/10'); ?> pt-6">
|
|
<span class="px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2 block">สำหรับผู้ดูแลระบบ</span>
|
|
<a href="admin_settings.php" class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-300 group <?php echo $settings_classes; ?>">
|
|
<svg class="w-5 h-5 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
|
ตั้งค่าระบบ
|
|
</a>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- Extensibility for other links if needed -->
|
|
</nav>
|
|
|
|
<div class="mt-auto p-4 border-t <?php echo $t('border-emerald-500/10'); ?>">
|
|
<a href="login.php?action=logout" class="flex items-center gap-3 px-4 py-3 rounded-2xl text-rose-500 font-medium hover:bg-rose-50/80 transition-all duration-300 mt-2 group">
|
|
<svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-125 group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
|
|
ออกจากระบบ
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<script>
|
|
// Sidebar Toggle Logic
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const toggleBtn = document.getElementById('sidebar-toggle');
|
|
const closeBtn = document.getElementById('sidebar-close');
|
|
const backdrop = document.getElementById('sidebar-backdrop');
|
|
|
|
function openSidebar() {
|
|
sidebar.classList.remove('-translate-x-full');
|
|
backdrop.classList.remove('hidden', 'pointer-events-none');
|
|
// Small delay to allow display:block to apply before animating opacity
|
|
setTimeout(() => backdrop.classList.remove('opacity-0'), 10);
|
|
document.body.style.overflow = 'hidden'; // Prevent background scrolling
|
|
}
|
|
|
|
function closeSidebar() {
|
|
sidebar.classList.add('-translate-x-full');
|
|
backdrop.classList.add('opacity-0', 'pointer-events-none');
|
|
setTimeout(() => backdrop.classList.add('hidden'), 300); // Wait for transition
|
|
document.body.style.overflow = ''; // Restore scrolling
|
|
}
|
|
|
|
if (toggleBtn) toggleBtn.addEventListener('click', openSidebar);
|
|
if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
|
|
if (backdrop) backdrop.addEventListener('click', closeSidebar);
|
|
});
|
|
</script>
|