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"/>
|
<meta charset="utf-8"/>
|
||||||
<title>General Bots</title>
|
<title>General Bots</title>
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
<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/app.css" type="text/css">
|
||||||
<link rel="stylesheet" href="css/chat.css">
|
<script src="js/lib/gsap.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
<script src="js/lib/marked.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>
|
|
||||||
<script src="js/mock-data.js"></script>
|
<script src="js/mock-data.js"></script>
|
||||||
<script src="js/auth.js"></script>
|
<script src="js/auth.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Include shared navbar -->
|
|
||||||
<div id="navbar-container"></div>
|
<div id="navbar-container"></div>
|
||||||
|
|
||||||
<!-- Main chat content -->
|
<!-- Main chat content -->
|
||||||
|
|
@ -33,15 +30,6 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Load navbar template -->
|
<script src="js/layout.js"></script>
|
||||||
<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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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>
|
<span>General Bots</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-links">
|
<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
|
<i class="icon">💬</i> Chat
|
||||||
</a>
|
</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
|
<i class="icon">📁</i> Drive
|
||||||
</a>
|
</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
|
<i class="icon">📊</i> Tables
|
||||||
</a>
|
</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
|
<i class="icon">✅</i> Tasks
|
||||||
</a>
|
</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
|
<i class="icon">✉️</i> Mail
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue