feat: consolidate assets and improve navigation structure
- Consolidated CSS and JS assets by moving them to local files (app.css, gsap.min.js, marked.min.js) - Removed livekit-client CDN dependency as it appears unused - Moved navbar logic to separate layout.js file for better organization - Changed navigation links to use hash-based routing (#chat, #drive, etc) - Removed redundant navbar template fetching in favor of static inclusion - Simplified HTML structure by removing commented code and redundant elements These changes improve maintainability and performance by reducing external dependencies and better organizing frontend assets.
This commit is contained in:
parent
4b185f00f9
commit
3014822ace
7 changed files with 217 additions and 21 deletions
64
web/desktop/css/app.css
Normal file
64
web/desktop/css/app.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/* Main app styles */
|
||||
@import url('../shared/styles.css');
|
||||
@import url('chat.css');
|
||||
|
||||
/* Navbar styles */
|
||||
.navbar {
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 0.5rem 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
margin-right: 2rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: #0066ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-link i {
|
||||
margin-right: 0.5rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.nav-link.active i {
|
||||
color: #0066ff;
|
||||
}
|
||||
|
|
@ -4,16 +4,13 @@
|
|||
<meta charset="utf-8"/>
|
||||
<title>General Bots</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<link rel="stylesheet" href="shared/styles.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/chat.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/livekit-client/dist/livekit-client.umd.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<link rel="stylesheet" href="css/app.css" type="text/css">
|
||||
<script src="js/lib/gsap.min.js"></script>
|
||||
<script src="js/lib/marked.min.js"></script>
|
||||
<script src="js/mock-data.js"></script>
|
||||
<script src="js/auth.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include shared navbar -->
|
||||
<div id="navbar-container"></div>
|
||||
|
||||
<!-- Main chat content -->
|
||||
|
|
@ -33,15 +30,6 @@
|
|||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Load navbar template -->
|
||||
<script>
|
||||
fetch('shared/navbar.html')
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
document.getElementById('navbar-container').innerHTML = html;
|
||||
// Set active nav link
|
||||
document.querySelector(`.nav-link[data-target="chat"]`).classList.add('active');
|
||||
});
|
||||
</script>
|
||||
<script src="js/layout.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
56
web/desktop/js/layout.js
Normal file
56
web/desktop/js/layout.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
class Layout {
|
||||
static currentPage = 'chat';
|
||||
|
||||
static init() {
|
||||
this.setCurrentPage();
|
||||
this.loadNavbar();
|
||||
this.setupNavigation();
|
||||
}
|
||||
|
||||
static setCurrentPage() {
|
||||
const hash = window.location.hash.substring(1) || 'chat';
|
||||
this.currentPage = hash;
|
||||
this.updateContent();
|
||||
}
|
||||
|
||||
static async loadNavbar() {
|
||||
try {
|
||||
const response = await fetch('shared/navbar.html');
|
||||
const html = await response.text();
|
||||
|
||||
if (!document.querySelector('.navbar')) {
|
||||
document.body.insertAdjacentHTML('afterbegin', html);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.classList.toggle('active', link.dataset.target === this.currentPage);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to load navbar:', error);
|
||||
}
|
||||
}
|
||||
|
||||
static updateContent() {
|
||||
// Add your content loading logic here
|
||||
// For example: fetch(`pages/${this.currentPage}.html`)
|
||||
// and update the main content area
|
||||
}
|
||||
|
||||
static setupNavigation() {
|
||||
document.addEventListener('click', (e) => {
|
||||
const navLink = e.target.closest('.nav-link');
|
||||
if (navLink) {
|
||||
e.preventDefault();
|
||||
const target = navLink.dataset.target;
|
||||
window.location.hash = target;
|
||||
this.currentPage = target;
|
||||
this.loadNavbar();
|
||||
this.updateContent();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize on load and also on navigation
|
||||
Layout.init();
|
||||
window.addEventListener('popstate', () => Layout.init());
|
||||
11
web/desktop/js/lib/gsap.min.js
vendored
Normal file
11
web/desktop/js/lib/gsap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
web/desktop/js/lib/livekit-client.min.js
vendored
Normal file
8
web/desktop/js/lib/livekit-client.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
69
web/desktop/js/lib/marked.min.js
vendored
Normal file
69
web/desktop/js/lib/marked.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -4,19 +4,19 @@
|
|||
<span>General Bots</span>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="./index.html" class="nav-link active" data-target="chat">
|
||||
<a href="#chat" class="nav-link active" data-target="chat">
|
||||
<i class="icon">💬</i> Chat
|
||||
</a>
|
||||
<a href="./drive/index.html" class="nav-link" data-target="drive">
|
||||
<a href="#drive" class="nav-link" data-target="drive">
|
||||
<i class="icon">📁</i> Drive
|
||||
</a>
|
||||
<a href="./tables/index.html" class="nav-link" data-target="tables">
|
||||
<a href="#tables" class="nav-link" data-target="tables">
|
||||
<i class="icon">📊</i> Tables
|
||||
</a>
|
||||
<a href="./tasks/index.html" class="nav-link" data-target="tasks">
|
||||
<a href="#tasks" class="nav-link" data-target="tasks">
|
||||
<i class="icon">✅</i> Tasks
|
||||
</a>
|
||||
<a href="./mail/index.html" class="nav-link" data-target="mail">
|
||||
<a href="#mail" class="nav-link" data-target="mail">
|
||||
<i class="icon">✉️</i> Mail
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue