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>
|
<body>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<nav class="sidebar">
|
<nav class="sidebar">
|
||||||
<button class="sidebar-collapse-btn" id="sidebar-collapse-btn" title="Collapse sidebar">‹</button>
|
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<h2>ETF Tracker</h2>
|
<h2>ETF Tracker</h2>
|
||||||
</div>
|
</div>
|
||||||
<ul class="sidebar-menu">
|
<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-icon">📊</span>
|
||||||
<span class="menu-text">Dashboard</span>
|
<span class="menu-text">Dashboard</span>
|
||||||
</li>
|
</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-icon">💼</span>
|
||||||
<span class="menu-text">Portfolio</span>
|
<span class="menu-text">Portfolio</span>
|
||||||
</li>
|
</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-icon">📋</span>
|
||||||
<span class="menu-text">Trade History</span>
|
<span class="menu-text">Trade History</span>
|
||||||
</li>
|
</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-icon">📈</span>
|
||||||
<span class="menu-text">Gains/Losses</span>
|
<span class="menu-text">Gains/Losses</span>
|
||||||
</li>
|
</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-icon">➕</span>
|
||||||
<span class="menu-text">Add Trade</span>
|
<span class="menu-text">Add Trade</span>
|
||||||
</li>
|
</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-icon">🧮</span>
|
||||||
<span class="menu-text">CGT Settings</span>
|
<span class="menu-text">CGT Settings</span>
|
||||||
</li>
|
</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-icon">👥</span>
|
||||||
<span class="menu-text">Admin Panel</span>
|
<span class="menu-text">Admin Panel</span>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
43
script.js
43
script.js
@ -12,7 +12,6 @@ class ETFTradeTracker {
|
|||||||
this.bindEvents();
|
this.bindEvents();
|
||||||
this.bindNavigation();
|
this.bindNavigation();
|
||||||
this.bindAuthEvents();
|
this.bindAuthEvents();
|
||||||
this.bindSidebarToggle();
|
|
||||||
this.setDefaultDateTime();
|
this.setDefaultDateTime();
|
||||||
|
|
||||||
// Check if user is logged in
|
// 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) {
|
showPage(pageId) {
|
||||||
const pages = document.querySelectorAll('.page');
|
const pages = document.querySelectorAll('.page');
|
||||||
|
|||||||
119
styles.css
119
styles.css
@ -32,82 +32,6 @@ body {
|
|||||||
z-index: 1000;
|
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 {
|
.sidebar-header {
|
||||||
padding: 30px 20px;
|
padding: 30px 20px;
|
||||||
@ -152,8 +76,6 @@ body {
|
|||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-text {
|
.menu-text {
|
||||||
@ -204,11 +126,6 @@ body {
|
|||||||
margin-left: 260px;
|
margin-left: 260px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
transition: margin-left 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content.sidebar-collapsed {
|
|
||||||
margin-left: 60px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-header {
|
.top-header {
|
||||||
@ -240,30 +157,6 @@ body {
|
|||||||
color: #333;
|
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 {
|
#page-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -298,10 +191,6 @@ body {
|
|||||||
width: 280px;
|
width: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar.collapsed {
|
|
||||||
width: 280px; /* Keep full width on mobile when collapsed */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.open {
|
.sidebar.open {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
@ -310,18 +199,10 @@ body {
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content.sidebar-collapsed {
|
|
||||||
margin-left: 0; /* No change on mobile */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-toggle {
|
.sidebar-toggle {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-collapse-btn {
|
|
||||||
display: none; /* Hide collapse button on mobile */
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-area {
|
.content-area {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user