Move away from madness

public/static/buttons.js

@@ -0,0 +1,50 @@
+/**
+ * -----------------------
+ * Color themes
+ * -----------------------
+ */
+function toggleColorTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('color-theme', newTheme);
+}
+
+function updateButtonText() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const button = document.querySelector('.color-theme-toggle');
+    button.textContent = currentTheme === 'dark' ? '𖤓' : '🌙';
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('color-theme');
+    if (savedTheme) {
+        document.documentElement.setAttribute('data-theme', savedTheme);
+    } else {
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+    }
+    updateButtonText();
+
+    const button = document.querySelector('.color-theme-toggle');
+    button.addEventListener('click', () => {
+        toggleColorTheme();
+        updateButtonText();
+    });
+});
+
+/**
+ * -----------------------
+ * Sidebar toggle
+ * -----------------------
+ */
+
+function toggleSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    sidebar.classList.toggle('collapsed');
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const button = document.querySelector('.sidebar-toggle');
+    button.addEventListener('click', toggleSidebar);
+});

public/static/own.css

@@ -0,0 +1,51 @@
+.sidebar {
+    position: fixed;
+    width: calc(min(400px, 80vw));
+    height: 100vh;
+    overflow-y: auto;
+    left: calc(max(-400px, -80vw));
+    top: 0;
+    z-index: 5;
+    padding: 16px;
+    transition: left 0.3s ease-in-out;
+    background-color: var(--pico-background-color);
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
+}
+
+body:has(.sidebar-toggler > input:checked) .sidebar {
+    left: 0;
+}
+
+body:has(.sidebar-toggler > input:checked) .color-theme-toggle {
+    pointer-events: none;
+}
+
+label:has(input[type="checkbox"]) {
+    transition: left 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    background-color: var(--pico-background-color);
+    box-shadow: 0 0 0 var(--pico-background-color);
+    padding: 4px;
+    border-radius: 2px;
+    margin-bottom: 0;
+    left: 0;
+
+    &:has(input:checked) {
+        left: calc(min(400px, 80vw) + 16px);
+        position: relative;
+        box-shadow: 0 0 0 16px var(--pico-background-color);
+    }
+
+    svg {
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+    }
+
+    input {
+        display: none;
+    }
+}
+
+.mb-0 {
+    margin-bottom: 0;
+}