Update dashboard CSS to use new color scheme matching visual identity, replacing CSS variables with specific color values. Improved button hover state with background transition instead of opacity. Expanded layout.js with additional application sections including dashboard, editor, player, and settings to support new navigation structure.
44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
const sections = {
|
|
drive: 'drive/drive.html',
|
|
tasks: 'tasks/tasks.html',
|
|
mail: 'mail/mail.html',
|
|
dashboard: 'dashboard/dashboard.html',
|
|
editor: 'editor/editor.html',
|
|
player: 'player/player.html',
|
|
paper: 'paper/paper.html',
|
|
settings: 'settings/settings.html',
|
|
tables: 'tablesv2/tables.html',
|
|
news: 'news/news.html'
|
|
};
|
|
|
|
async function loadSectionHTML(path) {
|
|
const response = await fetch(path);
|
|
if (!response.ok) throw new Error('Failed to load section');
|
|
return await response.text();
|
|
}
|
|
|
|
async function switchSection(section) {
|
|
const mainContent = document.getElementById('main-content');
|
|
|
|
try {
|
|
const html = await loadSectionHTML(sections[section]);
|
|
mainContent.innerHTML = html;
|
|
window.history.pushState({}, '', `#${section}`);
|
|
Alpine.initTree(mainContent);
|
|
} catch (err) {
|
|
console.error('Error loading section:', err);
|
|
mainContent.innerHTML = `<div class="error">Failed to load ${section} section</div>`;
|
|
}
|
|
}
|
|
|
|
// Handle initial load based on URL hash
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const initialSection = window.location.hash.substring(1) || 'drive';
|
|
switchSection(initialSection);
|
|
});
|
|
|
|
// Handle browser back/forward navigation
|
|
window.addEventListener('popstate', () => {
|
|
const section = window.location.hash.substring(1) || 'drive';
|
|
switchSection(section);
|
|
});
|