38 lines
1.7 KiB
JavaScript
38 lines
1.7 KiB
JavaScript
const navItems = [
|
|
{ icon: 'message-square', text: '聊天', href: './chat.html' },
|
|
{ icon: 'book-open', text: '日记', href: './diary.html' },
|
|
{ icon: 'crosshair', text: '话题', href: './topic_tracker.html' },
|
|
{ icon: 'milestone', text: '人生轨迹', href: './life_milestones.html' },
|
|
{ icon: 'layout-dashboard', text: '个人展板', href: './personal_dashboard.html' }
|
|
];
|
|
|
|
function createBottomNav() {
|
|
const navPlaceholder = document.getElementById('bottom-nav-placeholder');
|
|
if (!navPlaceholder) return;
|
|
|
|
const navContainer = document.createElement('nav');
|
|
navContainer.className = 'fixed bottom-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm shadow-[0_-2px_10px_rgba(0,0,0,0.05)] flex justify-around py-2 border-t border-gray-200/80';
|
|
|
|
const currentPath = window.location.pathname.split('/').pop();
|
|
|
|
navItems.forEach(item => {
|
|
const itemPath = item.href.substring(2); // remove './' for comparison
|
|
const isActive = currentPath === itemPath;
|
|
const link = document.createElement('a');
|
|
link.href = item.href;
|
|
link.className = `flex flex-col items-center justify-center text-xs p-2 rounded-md transition-colors w-20 ${isActive ? 'text-tech-blue bg-tech-blue/10 font-semibold' : 'text-text-medium hover:bg-gray-100 hover:text-tech-blue'}`;
|
|
link.innerHTML = `
|
|
<i data-lucide="${item.icon}" class="w-5 h-5 mb-1"></i>
|
|
<span>${item.text}</span>
|
|
`;
|
|
navContainer.appendChild(link);
|
|
});
|
|
|
|
navPlaceholder.appendChild(navContainer);
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', createBottomNav);
|