170 lines
5.5 KiB
HTML
170 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>{{ .Site.Title }}</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<style>
|
|
/* Sidebar Menu Styles */
|
|
.sidebar {
|
|
height: 100%;
|
|
width: 0;
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
overflow-x: hidden;
|
|
transition: 0.3s;
|
|
padding-top: 60px;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
}
|
|
.sidebar.open {
|
|
width: 250px;
|
|
}
|
|
.sidebar .close-btn {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
font-size: 30px;
|
|
cursor: pointer;
|
|
}
|
|
.sidebar-heading {
|
|
padding: 8px 16px 20px 16px;
|
|
font-size: 1.3rem;
|
|
font-weight: 500;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
margin-bottom: 10px;
|
|
}
|
|
.sidebar-menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.sidebar-menu li {
|
|
padding: 12px 16px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.sidebar-menu li:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.sidebar-menu li.active {
|
|
background-color: #e3f2fd;
|
|
color: #1976d2;
|
|
font-weight: 500;
|
|
}
|
|
.sidebar-section {
|
|
padding: 12px 16px 8px;
|
|
font-weight: 500;
|
|
color: #757575;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.overlay {
|
|
display: none;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0,0,0,0.4);
|
|
z-index: 99;
|
|
}
|
|
.overlay.visible {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="sidebar" class="sidebar">
|
|
<span class="close-btn">×</span>
|
|
<div class="sidebar-heading">My Favorite Stuff</div>
|
|
<div class="sidebar-section">View Options</div>
|
|
<ul class="sidebar-menu" id="view-options">
|
|
<li data-filter="consumed" class="active">Consumed Items</li>
|
|
<li data-filter="not-consumed">Not Consumed Yet</li>
|
|
<li data-filter="all">Show All Items</li>
|
|
</ul>
|
|
</div>
|
|
<div id="overlay" class="overlay"></div>
|
|
|
|
<header>
|
|
<span id="menu-toggle" style="font-size:1.7rem;cursor:pointer;margin-right:18px;">☰</span>
|
|
<h1 style="margin:0;font-size:2rem;font-weight:500;">My Favorite Stuff</h1>
|
|
</header>
|
|
<main>
|
|
{{ block "main" . }}{{ end }}
|
|
</main>
|
|
<div class="fab">+</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const menuToggle = document.getElementById('menu-toggle');
|
|
const sidebar = document.getElementById('sidebar');
|
|
const closeBtn = document.querySelector('.close-btn');
|
|
const overlay = document.getElementById('overlay');
|
|
const viewOptions = document.querySelectorAll('#view-options li');
|
|
|
|
// Set the initial filter based on the selected sidebar option
|
|
let currentConsumedFilter = 'consumed';
|
|
|
|
// Functions to open and close the sidebar
|
|
function openSidebar() {
|
|
sidebar.classList.add('open');
|
|
overlay.classList.add('visible');
|
|
}
|
|
|
|
function closeSidebar() {
|
|
sidebar.classList.remove('open');
|
|
overlay.classList.remove('visible');
|
|
}
|
|
|
|
// Toggle sidebar when hamburger is clicked
|
|
menuToggle.addEventListener('click', openSidebar);
|
|
|
|
// Close sidebar when X is clicked
|
|
closeBtn.addEventListener('click', closeSidebar);
|
|
|
|
// Close sidebar when clicking outside
|
|
overlay.addEventListener('click', closeSidebar);
|
|
|
|
// Handle view option clicks
|
|
viewOptions.forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
// Update active class
|
|
viewOptions.forEach(opt => opt.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
// Set filter and apply
|
|
currentConsumedFilter = this.getAttribute('data-filter');
|
|
applyConsumedFilter(currentConsumedFilter);
|
|
closeSidebar();
|
|
});
|
|
});
|
|
|
|
// Function to apply the filter - will be called by list.html and index.html scripts
|
|
window.applyConsumedFilter = function(filterType) {
|
|
// Make this function available to other scripts
|
|
window.currentConsumedFilter = filterType;
|
|
|
|
// Dispatch a custom event that list.html and index.html can listen for
|
|
document.dispatchEvent(new CustomEvent('consumedFilterChanged', {
|
|
detail: { filterType: filterType }
|
|
}));
|
|
};
|
|
|
|
// Initialize with the default filter
|
|
window.currentConsumedFilter = 'consumed';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|