Remove collapsible sidebar functionality
- Remove collapse button from sidebar header - Remove all collapsed state CSS styling - Remove JavaScript sidebar toggle functionality - Remove tooltip functionality and data-tooltip attributes - Restore sidebar to fixed 260px width - Clean up mobile responsive CSS - Remove localStorage sidebar state persistence - Return to original static sidebar behavior Sidebar now: - Fixed 260px width (no collapsing) - Clean header without collapse button - Standard menu items with icons + text - Original mobile slide-out behavior maintained - Simplified codebase without collapse complexity 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kris
parent
38e72221c9
commit
16e77850cd
15
index.html
15
index.html
@ -9,36 +9,35 @@
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<nav class="sidebar">
|
||||
<button class="sidebar-collapse-btn" id="sidebar-collapse-btn" title="Collapse sidebar">‹</button>
|
||||
<div class="sidebar-header">
|
||||
<h2>ETF Tracker</h2>
|
||||
</div>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="menu-item active" data-page="dashboard" data-tooltip="Dashboard">
|
||||
<li class="menu-item active" data-page="dashboard">
|
||||
<span class="menu-icon">📊</span>
|
||||
<span class="menu-text">Dashboard</span>
|
||||
</li>
|
||||
<li class="menu-item" data-page="portfolio" data-tooltip="Portfolio">
|
||||
<li class="menu-item" data-page="portfolio">
|
||||
<span class="menu-icon">💼</span>
|
||||
<span class="menu-text">Portfolio</span>
|
||||
</li>
|
||||
<li class="menu-item" data-page="trade-history" data-tooltip="Trade History">
|
||||
<li class="menu-item" data-page="trade-history">
|
||||
<span class="menu-icon">📋</span>
|
||||
<span class="menu-text">Trade History</span>
|
||||
</li>
|
||||
<li class="menu-item" data-page="gains-losses" data-tooltip="Gains/Losses">
|
||||
<li class="menu-item" data-page="gains-losses">
|
||||
<span class="menu-icon">📈</span>
|
||||
<span class="menu-text">Gains/Losses</span>
|
||||
</li>
|
||||
<li class="menu-item menu-separator" data-page="add-trade" data-tooltip="Add Trade">
|
||||
<li class="menu-item menu-separator" data-page="add-trade">
|
||||
<span class="menu-icon">➕</span>
|
||||
<span class="menu-text">Add Trade</span>
|
||||
</li>
|
||||
<li class="menu-item" data-page="cgt-settings" data-tooltip="CGT Settings">
|
||||
<li class="menu-item" data-page="cgt-settings">
|
||||
<span class="menu-icon">🧮</span>
|
||||
<span class="menu-text">CGT Settings</span>
|
||||
</li>
|
||||
<li class="menu-item admin-only" data-page="admin" data-tooltip="Admin Panel" style="display: none;">
|
||||
<li class="menu-item admin-only" data-page="admin" style="display: none;">
|
||||
<span class="menu-icon">👥</span>
|
||||
<span class="menu-text">Admin Panel</span>
|
||||
</li>
|
||||
|
||||
43
script.js
43
script.js
@ -12,7 +12,6 @@ class ETFTradeTracker {
|
||||
this.bindEvents();
|
||||
this.bindNavigation();
|
||||
this.bindAuthEvents();
|
||||
this.bindSidebarToggle();
|
||||
this.setDefaultDateTime();
|
||||
|
||||
// Check if user is logged in
|
||||
@ -74,48 +73,6 @@ class ETFTradeTracker {
|
||||
});
|
||||
}
|
||||
|
||||
bindSidebarToggle() {
|
||||
const sidebarCollapseBtn = document.getElementById('sidebar-collapse-btn');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const mainContent = document.querySelector('.main-content');
|
||||
|
||||
// Load saved sidebar state from localStorage
|
||||
const savedState = localStorage.getItem('sidebarCollapsed');
|
||||
if (savedState === 'true') {
|
||||
sidebar.classList.add('collapsed');
|
||||
mainContent.classList.add('sidebar-collapsed');
|
||||
sidebarCollapseBtn.setAttribute('title', 'Expand sidebar');
|
||||
sidebarCollapseBtn.innerHTML = '›';
|
||||
}
|
||||
|
||||
sidebarCollapseBtn.addEventListener('click', () => {
|
||||
const isCollapsed = sidebar.classList.contains('collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
// Expand sidebar
|
||||
sidebar.classList.remove('collapsed');
|
||||
mainContent.classList.remove('sidebar-collapsed');
|
||||
sidebarCollapseBtn.setAttribute('title', 'Collapse sidebar');
|
||||
sidebarCollapseBtn.innerHTML = '‹';
|
||||
localStorage.setItem('sidebarCollapsed', 'false');
|
||||
} else {
|
||||
// Collapse sidebar
|
||||
sidebar.classList.add('collapsed');
|
||||
mainContent.classList.add('sidebar-collapsed');
|
||||
sidebarCollapseBtn.setAttribute('title', 'Expand sidebar');
|
||||
sidebarCollapseBtn.innerHTML = '›';
|
||||
localStorage.setItem('sidebarCollapsed', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
// Handle mobile sidebar toggle (existing functionality)
|
||||
const sidebarToggle = document.querySelector('.sidebar-toggle');
|
||||
if (sidebarToggle) {
|
||||
sidebarToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('open');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showPage(pageId) {
|
||||
const pages = document.querySelectorAll('.page');
|
||||
|
||||
119
styles.css
119
styles.css
@ -32,82 +32,6 @@ body {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-text,
|
||||
.sidebar.collapsed .sidebar-header h2,
|
||||
.sidebar.collapsed .user-info span,
|
||||
.sidebar.collapsed .logout-btn,
|
||||
.sidebar.collapsed .sidebar-footer {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-text,
|
||||
.sidebar-header h2,
|
||||
.user-info span,
|
||||
.logout-btn {
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-icon {
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 1.3rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-item {
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
margin: 2px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-item:hover::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
left: 70px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
animation: tooltip-fade-in 0.2s ease-out forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes tooltip-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(-5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-menu {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-header {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 30px 20px;
|
||||
@ -152,8 +76,6 @@ body {
|
||||
font-size: 1.2rem;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
@ -204,11 +126,6 @@ body {
|
||||
margin-left: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.main-content.sidebar-collapsed {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.top-header {
|
||||
@ -240,30 +157,6 @@ body {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sidebar-collapse-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 10px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.sidebar-collapse-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-collapse-btn {
|
||||
right: 15px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#page-title {
|
||||
margin: 0;
|
||||
@ -298,10 +191,6 @@ body {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 280px; /* Keep full width on mobile when collapsed */
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@ -310,18 +199,10 @@ body {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main-content.sidebar-collapsed {
|
||||
margin-left: 0; /* No change on mobile */
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-collapse-btn {
|
||||
display: none; /* Hide collapse button on mobile */
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user