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 @@