Replace jQuery and dexie with EVEN BETTER in vanilla javascript. 

Use only the FULL POTENTIAL of queryselectors / queryselectors all. 

Take only the best possible approach, streamline whole codes, enhance performance, enhance speed and reliability, minimise external dependencies, lead it to more maintainable and robust. 

Don't compromise.

Don't give un or undersatisfactory results no matter the codes length or complexity.

---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Light Novel Library</title>

    <!-- Preload critical resources -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" as="style">
    
    <!-- Styles -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">

    <style>
        /* Root Variables */
        :root {
            --primary-color: #ffffff;
            --secondary-color: #000000;
            --background-color: #121212;
            --card-background: #1e1e1e;
            --text-primary: #ffffff;
            --text-secondary: #bbbbbb;
            --border-color: #333333;
            --shadow-sm: 0 1px 3px rgba(255,255,255,0.1);
            --shadow-md: 0 4px 6px rgba(255,255,255,0.1);
            --shadow-lg: 0 10px 15px rgba(255,255,255,0.1);
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 1rem;
            --transition-duration: 0.3s;
            --max-width: 1280px;
            --header-height: 80px;
            --menu-width: 300px;
            --z-menu: 2000;
            --z-modal: 3000;
            --z-header: 1000;
        }

        /* Menu Styles */
        .menu-button {
            position: fixed;
            top: 1rem;
            left: 1rem;
            z-index: calc(var(--z-menu) + 1);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            transition: transform 0.3s ease;
        }

        .menu-button:hover {
            transform: scale(1.1);
        }

        .menu-icon {
            width: 30px;
            height: 3px;
            background-color: var(--text-primary);
            position: relative;
            transition: all 0.3s ease;
        }

        .menu-icon::before,
        .menu-icon::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: var(--text-primary);
            transition: all 0.3s ease;
        }

        .menu-icon::before { transform: translateY(-8px); }
        .menu-icon::after { transform: translateY(8px); }

        .menu-open .menu-icon {
            background-color: transparent;
        }

        .menu-open .menu-icon::before {
            transform: rotate(45deg);
        }

        .menu-open .menu-icon::after {
            transform: rotate(-45deg);
        }

        .side-menu {
            position: fixed;
            top: 0;
            left: -var(--menu-width);
            width: var(--menu-width);
            height: 100vh;
            background-color: var(--card-background);
            box-shadow: var(--shadow-lg);
            z-index: var(--z-menu);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 2rem;
        }

        .side-menu.open {
            transform: translateX(var(--menu-width));
        }

        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: calc(var(--z-menu) - 1);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .menu-list {
            list-style: none;
            padding: 0;
            margin: 2rem 0;
        }

        .menu-item {
            margin: 1rem 0;
        }

        .menu-link {
            color: var(--text-primary);
            text-decoration: none;
            font-size: 1.1rem;
            padding: 0.5rem 0;
            display: block;
            transition: color 0.3s ease;
        }

        .menu-link:hover {
            color: var(--primary-color);
        } 

   /* Settings Panel Styles */
        .settings-panel {
            position: fixed;
            bottom: -100%;
            left: 0;
            width: 100%;
            background-color: var(--card-background);
            padding: 2rem;
            border-top-left-radius: var(--radius-lg);
            border-top-right-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            z-index: var(--z-modal);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .settings-panel.open {
            transform: translateY(-100%);
        }

        /* Enhanced Header Styles */
        .header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem 2rem;
            background-color: var(--card-background);
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 0;
            z-index: var(--z-header);
            transition: background-color var(--transition-duration) ease;
            margin-left: 60px;
        }

        /* Toast Notification */
        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--toast-background);
            color: var(--toast-color);
            padding: 1rem 2rem;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            z-index: calc(var(--z-modal) + 1);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .toast.show {
            opacity: 1;
            visibility: visible;
        }

        /* Optimized Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 1rem;
            }

            .header__title {
                font-size: 1.25rem;
            }

            .modal-content {
                padding: 1.5rem;
                margin: 1rem;
            }
        }

        /* Utility Classes */
        .no-scroll {
            overflow: hidden;
        }

        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }
    </style>
</head>
<body>
    <!-- Menu Button -->
    <button class="menu-button" aria-label="Toggle Menu">
        <span class="menu-icon"></span>
    </button>

    <!-- Side Menu -->
    <nav class="side-menu" aria-label="Main Navigation">
        <ul class="menu-list">
            <li class="menu-item"><a href="#" class="menu-link" data-page="home">Menu</a></li>
            <li class="menu-item"><a href="#" class="menu-link" data-page="pdfs">LN PDFs</a></li>
            <li class="menu-item"><a href="#" class="menu-link" data-page="epubs">LN EPUBs</a></li>
            <li class="menu-item"><a href="#" class="menu-link" data-page="releases">Release Dates</a></li>
            <li class="menu-item"><a href="#" class="menu-link" data-page="webnovels">Webnovels</a></li>
            <li class="menu-item"><a href="#" class="menu-link" data-page="manga">Manga</a></li>
            <li class="menu-item"><a href="#" class="menu-link" data-page="settings">Settings</a></li>
        </ul>
    </nav>

    <!-- Menu Overlay -->
    <div class="menu-overlay"></div>

    <!-- Settings Panel -->
    <div class="settings-panel" aria-label="Settings">
        <!-- Settings content here -->
    </div>

    <!-- Header -->
    <header class="header">
        <h1 class="header__title">Light Novel Library Collection</h1>
    </header>

    <!-- Main Content -->
    <main class="main">
        <div class="search-container">
            <input type="search" class="search-input" placeholder="Search novels..." aria-label="Search novels">
            <button class="refresh-button" aria-label="Refresh library">
                <svg viewBox="0 0 24 24">
                    <path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                </svg>
                Refresh
            </button>
        </div>

        <!-- Grid Container -->
        <div class="grid"></div>

        <!-- Loader -->
        <div class="loader">
            <div class="loader__spinner"></div>
        </div>
    </main>

    <!-- Toast Notification -->
    <div class="toast" role="alert"></div>

    <!-- Modal Template -->
    <div class="modal" aria-modal="true" role="dialog">
        <div class="modal-content">
            <!-- Modal content will be dynamically inserted -->
        </div>
    </div> 
<!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dexie@3.2.5/dist/dexie.min.js"></script>
    <script>
        // Initialize Database
        const db = new Dexie('LightNovelLibrary');
        db.version(1).stores({
            novels: '++id, title, coverUrl, pdfUrl'
        });

        // State Management
        const state = {
            isMenuOpen: false,
            isSettingsPanelOpen: false,
            currentPage: 'home',
            theme: localStorage.getItem('theme') || 'dark',
            novels: [],
            loading: false,
            searchQuery: ''
        };

        // DOM Elements
        const elements = {
            menuButton: document.querySelector('.menu-button'),
            sideMenu: document.querySelector('.side-menu'),
            menuOverlay: document.querySelector('.menu-overlay'),
            settingsPanel: document.querySelector('.settings-panel'),
            grid: document.querySelector('.grid'),
            searchInput: document.querySelector('.search-input'),
            refreshButton: document.querySelector('.refresh-button'),
            loader: document.querySelector('.loader'),
            toast: document.querySelector('.toast'),
            modal: document.querySelector('.modal')
        };

        // Menu Functionality
        function toggleMenu(force = null) {
            state.isMenuOpen = force !== null ? force : !state.isMenuOpen;
            elements.menuButton.classList.toggle('menu-open', state.isMenuOpen);
            elements.sideMenu.classList.toggle('open', state.isMenuOpen);
            elements.menuOverlay.classList.toggle('active', state.isMenuOpen);
            document.body.classList.toggle('no-scroll', state.isMenuOpen);

            if (!state.isMenuOpen) {
                elements.settingsPanel.classList.remove('open');
                state.isSettingsPanelOpen = false;
            }
        }

        // Settings Panel Functionality
        function toggleSettings() {
            state.isSettingsPanelOpen = !state.isSettingsPanelOpen;
            elements.settingsPanel.classList.toggle('open', state.isSettingsPanelOpen);
            document.body.classList.toggle('no-scroll', state.isSettingsPanelOpen);
        }

        // Toast Notification
        function showToast(message, duration = 3000) {
            elements.toast.textContent = message;
            elements.toast.classList.add('show');
            setTimeout(() => {
                elements.toast.classList.remove('show');
            }, duration);
        }

        // Novel Card Creation
        function createNovelCard(novel) {
            const card = document.createElement('div');
            card.className = 'card';
            card.setAttribute('data-aos', 'fade-up');
            card.innerHTML = `
                <div class="card__image-container">
                    <img class="card__image" src="${novel.coverUrl}" alt="${novel.title}" loading="lazy">
                </div>
                <div class="card__content">
                    <h3 class="card__title">${novel.title}</h3>
                </div>
            `;

            card.addEventListener('click', () => showNovelDetails(novel));
            return card;
        }

        // Novel Details Modal
        function showNovelDetails(novel) {
            const modalContent = elements.modal.querySelector('.modal-content');
            modalContent.innerHTML = `
                <button class="close" aria-label="Close modal">&times;</button>
                <div class="modal-grid">
                    <img src="${novel.coverUrl}" alt="${novel.title}" class="modal-image">
                    <div class="modal-info">
                        <h2>${novel.title}</h2>
                        <div class="modal-actions">
                            ${novel.pdfUrl ? `<a href="${novel.pdfUrl}" class="modal-button" target="_blank">Read PDF</a>` : ''}
                            <!-- Add more actions as needed -->
                        </div>
                    </div>
                </div>
            `;

            elements.modal.classList.add('show');
            document.body.classList.add('no-scroll');
        }

        // Search Functionality
        function handleSearch() {
            const query = elements.searchInput.value.toLowerCase();
            state.searchQuery = query;
            renderNovels(state.novels.filter(novel => 
                novel.title.toLowerCase().includes(query)
            ));
        }

        // Render Novels
        function renderNovels(novels) {
            elements.grid.innerHTML = '';
            const fragment = document.createDocumentFragment();
            
            novels.forEach(novel => {
                fragment.appendChild(createNovelCard(novel));
            });

            elements.grid.appendChild(fragment);
            initializeAOS();
        }

        // Initialize AOS
        function initializeAOS() {
            AOS.init({
                duration: 800,
                once: true,
                offset: 50
            });
        }

        // Event Listeners
        function initializeEventListeners() {
            elements.menuButton.addEventListener('click', () => toggleMenu());
            elements.menuOverlay.addEventListener('click', () => toggleMenu(false));
            elements.searchInput.addEventListener('input', debounce(handleSearch, 300));
            
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    toggleMenu(false);
                    elements.modal.classList.remove('show');
                    document.body.classList.remove('no-scroll');
                }
            });

            // Menu item clicks
            document.querySelectorAll('.menu-link').forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    const page = e.target.dataset.page;
                    if (page === 'settings') {
                        toggleSettings();
                    } else {
                        state.currentPage = page;
                        toggleMenu(false);
                        // Handle page navigation
                    }
                });
            });
        }

        // Utility Functions
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        // Initialize App
        async function initializeApp() {
            try {
                state.novels = await db.novels.toArray();
                renderNovels(state.novels);
                initializeEventListeners();
                initializeAOS();
            } catch (error) {
                console.error('Failed to initialize app:', error);
                showToast('Failed to load library. Please try again.');
            }
        }

        // Start the app when DOM is ready
        document.addEventListener('DOMContentLoaded', initializeApp);
    </script>
</body>
</html>

Don't give me example but rather the modified codes.