diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index 799e316..272d418 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -149,14 +149,17 @@
position: fixed;
top: 2rem;
left: 2rem;
- width: 160px;
+ width: 200px;
max-height: calc(100vh - 4rem);
overflow-y: auto;
- background: transparent;
- padding: 0;
- font-size: 0.75rem;
- line-height: 1.4;
+ background: var(--bg-color);
+ padding: 1rem;
+ font-size: 0.8rem;
+ line-height: 1.5;
z-index: 100;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.nav-sidebar::-webkit-scrollbar {
@@ -257,6 +260,103 @@
font-size: 0.8rem;
}
+ /* Sidebar search box */
+ .sidebar-search {
+ margin-bottom: 1.5rem;
+ position: relative;
+ }
+
+ .sidebar-search input {
+ width: 100%;
+ padding: 0.5rem 0.5rem 0.5rem 1.8rem;
+ border: 1px solid var(--border-color-dark);
+ border-radius: 3px;
+ font-size: 0.75rem;
+ background: var(--bg-color);
+ color: var(--text-color);
+ transition: border-color 0.2s;
+ }
+
+ .sidebar-search input:focus {
+ outline: none;
+ border-color: var(--text-tertiary);
+ }
+
+ .sidebar-search::before {
+ content: '🔍';
+ position: absolute;
+ left: 0.5rem;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 0.8rem;
+ opacity: 0.5;
+ }
+
+ /* Recently viewed section */
+ .recently-viewed {
+ margin-bottom: 1.5rem;
+ }
+
+ .recently-viewed h3 {
+ display: flex;
+ align-items: center;
+ gap: 0.3rem;
+ }
+
+ .recently-viewed h3::before {
+ content: '🕐';
+ font-size: 0.85rem;
+ }
+
+ .recently-viewed ul {
+ max-height: 150px;
+ overflow-y: auto;
+ }
+
+ .recently-viewed li {
+ font-size: 0.75rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .recently-viewed .empty-state {
+ font-size: 0.7rem;
+ color: var(--text-tertiary);
+ font-style: italic;
+ padding: 0.5rem 0;
+ }
+
+ /* Navigation section icons */
+ .nav-sidebar .nav-icon {
+ display: inline-block;
+ width: 1.2rem;
+ font-size: 0.9rem;
+ margin-right: 0.3rem;
+ }
+
+ /* Resource grouping */
+ .resource-group {
+ margin-bottom: 1.5rem;
+ }
+
+ .resource-group h4 {
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--text-tertiary);
+ font-weight: 600;
+ margin: 1rem 0 0.5rem 0;
+ padding-top: 0.5rem;
+ border-top: 1px solid var(--border-color);
+ }
+
+ .resource-group:first-of-type h4 {
+ border-top: none;
+ margin-top: 0;
+ padding-top: 0;
+ }
+
/* Sidebar collapse functionality */
#sidebar-toggle {
display: none;
@@ -340,7 +440,10 @@
}
.sidebar-toggle-btn::before {
- content: '+';
+ content: 'Sidebar';
+ font-size: 0.65rem;
+ font-weight: 600;
+ letter-spacing: 0.02em;
}
#sidebar-toggle:checked ~ .nav-sidebar {
@@ -354,16 +457,40 @@
}
#sidebar-toggle:checked ~ .sidebar-toggle-container .sidebar-toggle-btn::before {
- content: '-';
+ content: '×';
+ font-size: 1.5rem;
}
/* Responsive design for tablets and mobile */
@media (max-width: 1200px) {
.nav-sidebar {
- display: none;
+ width: 280px;
+ left: -280px;
+ top: 0;
+ bottom: 0;
+ max-height: 100vh;
+ border-radius: 0;
+ border-left: none;
+ box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
+ padding-top: 4rem;
}
+
+ #sidebar-toggle:checked ~ .nav-sidebar {
+ left: 0;
+ }
+
.sidebar-toggle-container {
- display: none;
+ display: block;
+ top: 1rem;
+ left: 1rem;
+ }
+
+ .sidebar-toggle-btn {
+ width: 36px;
+ height: 36px;
+ font-size: 1.2rem;
+ background: var(--bg-color);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}
@@ -697,6 +824,20 @@