base.html:
<!DOCTYPE html>
<html lang="ar" dir="rtl" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مُلهِم - منصة تعليمية ذكية</title>

    <!-- Tailwind CSS and DaisyUI -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>📘</text></svg>"></link>
    <style>
        body {
            font-family: 'Tajawal', sans-serif;
        }
        /* Fade-out animation for loading screen */
        @keyframes fadeOut {
            0% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; }
        }
        .fade-out {
            animation: fadeOut 0.5s forwards;
        }
    </style>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Tajawal', 'sans-serif'],
                    },
                },
            },
            daisyui: {
                themes: [
                    {
                        light: {
                            ...require("daisyui/src/theming/themes")["light"],
                            primary: "#3b82f6",
                            secondary: "#1d4ed8",
                            accent: "#2563eb",
                        },
                        dark: {
                            ...require("daisyui/src/theming/themes")["dark"],
                            primary: "#3b82f6",
                            secondary: "#1d4ed8",
                            accent: "#2563eb",
                        },
                    },
                ],
            },
        }
    </script>
</head>
<body class="min-h-screen bg-base-100">
    <!-- Loading Screen -->
    <div id="loading-screen" class="fixed inset-0 flex items-center justify-center bg-base-100 z-50">
        <!-- DaisyUI Spinner -->
        <div class="flex flex-col items-center">
            <div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-24 w-24"></div>
            <p class="mt-4 text-lg font-semibold">جارٍ التحميل...</p>
        </div>
    </div>

    <!-- Navbar -->
    <div class="navbar bg-base-200">
        <div class="navbar-start">
            <div class="dropdown">
                <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
                    </svg>
                </div>
                <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-200 rounded-box w-52">
                    {% if current_user.is_authenticated %}
                        <li><a href="{{ url_for('books_list') }}">المكتبة</a></li>
                        <li><a href="{{ url_for('chat_history') }}">المحادثات</a></li>
                        <li><a href="{{ url_for('profile') }}">الملف الشخصي</a></li>
                    {% else %}
                        <li><a href="{{ url_for('login') }}">تسجيل الدخول</a></li>
                        <li><a href="{{ url_for('register') }}">إنشاء حساب</a></li>
                    {% endif %}
                </ul>
            </div>
            <a href="{{ url_for('index') }}" style="font-size: 1.5rem;" class="btn btn-ghost text-xl">مُلهِم</a>
        </div>

        <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1">
                {% if current_user.is_authenticated %}
                    <li><a href="{{ url_for('books_list') }}">المكتبة</a></li>
                    <li><a href="{{ url_for('chat_history') }}">المحادثات</a></li>
                    <li><a href="{{ url_for('profile') }}">الملف الشخصي</a></li>
                {% else %}
                    <li><a href="{{ url_for('login') }}">تسجيل الدخول</a></li>
                    <li><a href="{{ url_for('register') }}">إنشاء حساب</a></li>
                {% endif %}
            </ul>
        </div>

        <div class="navbar-end">
            <!-- Theme Toggle -->
            <label class="swap swap-rotate mx-4">
                <input type="checkbox" class="theme-controller" value="dark" />
                <svg class="swap-on fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
                <svg class="swap-off fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
            </label>

            {% if current_user.is_authenticated %}
                <div class="dropdown dropdown-end">
                    <label tabindex="0" class="btn btn-ghost btn-circle avatar placeholder">
                        <div class="bg-primary text-primary-content rounded-full w-10">
                            <span class="text-lg">{{ current_user.user_data.username[0] | upper }}</span>
                        </div>
                    </label>
                    <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-200 rounded-box w-52">
                        <li>
                            <a href="{{ url_for('profile') }}" class="justify-between">
                                الملف الشخصي
                                <i class="fas fa-user"></i>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('chat_history') }}" class="justify-between">
                                سجل المحادثات
                                <i class="fas fa-history"></i>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('logout') }}" class="justify-between">
                                تسجيل الخروج
                                <i class="fas fa-sign-out-alt"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            {% endif %}
        </div>
    </div>

    {% block flash_messages %}
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div id="flash-messages" class="fixed top-4 right-4 z-50 space-y-2">
                    {% for category, message in messages %}
                        <div class="alert {{ 'alert-success' if category == 'success' else 'alert-error' }} shadow-lg fade-out">
                            <div>
                                {% if category == 'success' %}
                                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                {% else %}
                                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                                {% endif %}
                                <span>{{ message }}</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <style>
                    @keyframes fadeOut {
                        0% { opacity: 1; }
                        90% { opacity: 1; }
                        100% { opacity: 0; }
                    }
                    .fade-out {
                        animation: fadeOut 3s forwards;
                    }
                </style>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const flashMessages = document.getElementById('flash-messages');
                        if (flashMessages) {
                            setTimeout(() => {
                                flashMessages.remove();
                            }, 3000);
                        }
                    });
                </script>
            {% endif %}
        {% endwith %}
    {% endblock %}

    <!-- Main Content -->
    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- Conditional Footer -->
    {% if request.path in ['/', '/login', '/register'] %}
        <footer class="footer footer-center p-4 bg-base-200 text-base-content">
            <aside>
                <p>جميع الحقوق محفوظة © 2024 - مُلهِم</p>
            </aside>
        </footer>
    {% endif %}

    <!-- Theme Controller Script -->
    <script>
        // Check for saved theme preference or default to dark
        const themeController = document.querySelector('.theme-controller');
        const savedTheme = localStorage.getItem('theme') || 'dark';
        document.documentElement.setAttribute('data-theme', savedTheme);
        themeController.checked = savedTheme === 'dark';

        // Theme toggle handler
        themeController.addEventListener('change', function(e) {
            const newTheme = e.target.checked ? 'dark' : 'light';
            document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
        });

        // Loading Screen Handler
        window.addEventListener('load', function() {
            const loadingScreen = document.getElementById('loading-screen');
            if (loadingScreen) {
                loadingScreen.classList.add('fade-out');
                loadingScreen.addEventListener('animationend', () => {
                    loadingScreen.remove();
                });
            }
        });
    </script>
</body>
</html>

dashboard_layout.html:
{% extends "base.html" %}

{% block content %}
<div class="flex h-screen bg-base-100">
    <!-- Sidebar -->
    <aside class="w-64 bg-base-200 hidden md:block overflow-y-auto">
        <div class="h-full flex flex-col">
            <!-- User Profile -->
            <div class="p-4 border-b border-base-300">
                <div class="flex items-center gap-4">
                    <div class="avatar placeholder">
                        <div class="bg-primary text-primary-content rounded-full w-12">
                            <span class="text-xl">{{ current_user.user_data.username[0] | upper }}</span>
                        </div>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-semibold">{{ current_user.user_data.username }}</h3>
                    </div>
                </div>
            </div>
            
            <!-- Navigation -->
            <nav class="flex-1 p-4 space-y-2">
                <a href="{{ url_for('books_list') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'books_list' %}bg-base-300{% endif %}">
                    <i class="fas fa-book w-5 ml-3"></i>
                    <span>الكتب</span>
                </a>
                
                <a href="{{ url_for('chat_history') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'chat_history' %}bg-base-300{% endif %}">
                    <i class="fas fa-comments w-5 ml-3"></i>
                    <span>المحادثات</span>
                </a>
                
                <a href="{{ url_for('profile') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'profile' %}bg-base-300{% endif %}">
                    <i class="fas fa-user w-5 ml-3"></i>
                    <span>الملف الشخصي</span>
                </a>
            </nav>
            
            <!-- Logout Button -->
            <div class="p-4 border-t border-base-300">
                <a href="{{ url_for('logout') }}" 
                   class="btn btn-error btn-outline w-full">
                    <i class="fas fa-sign-out-alt ml-2"></i>
                    تسجيل الخروج
                </a>
            </div>
        </div>
    </aside>

    <!-- Mobile Sidebar -->
    <div id="mobile-sidebar" 
         class="fixed inset-y-0 right-0 w-64 bg-base-200 transform translate-x-full transition-transform duration-300 ease-in-out md:hidden z-40 overflow-y-auto">
        <!-- Mobile Sidebar Content (same as desktop) -->
        <div class="h-full flex flex-col">
            <div class="p-4 border-b border-base-300">
                <div class="flex justify-between items-center">
                    <div class="flex items-center gap-4">
                        <div class="avatar placeholder">
                            <div class="bg-primary text-primary-content rounded-full w-12">
                                <span class="text-xl">{{ current_user.user_data.username[0] | upper }}</span>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold">{{ current_user.user_data.username }}</h3>
                        </div>
                    </div>
                    <button id="mobile-sidebar-close" class="btn btn-ghost btn-circle">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            
            <nav class="flex-1 p-4 space-y-2">
                <a href="{{ url_for('books_list') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'books_list' %}bg-base-300{% endif %}">
                    <i class="fas fa-book w-5 ml-3"></i>
                    <span>الكتب</span>
                </a>
                
                <a href="{{ url_for('chat_history') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'chat_history' %}bg-base-300{% endif %}">
                    <i class="fas fa-comments w-5 ml-3"></i>
                    <span>المحادثات</span>
                </a>
                
                <a href="{{ url_for('profile') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'profile' %}bg-base-300{% endif %}">
                    <i class="fas fa-user w-5 ml-3"></i>
                    <span>الملف الشخصي</span>
                </a>
            </nav>
            
            <div class="p-4 border-t border-base-300">
                <a href="{{ url_for('logout') }}" 
                   class="btn btn-error btn-outline w-full">
                    <i class="fas fa-sign-out-alt ml-2"></i>
                    تسجيل الخروج
                </a>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- Mobile Header -->
        <header class="md:hidden navbar bg-base-200 px-4">
            <div class="flex-1">
                <button id="mobile-sidebar-toggle" class="btn btn-ghost btn-circle">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </header>

        <!-- Main Content Area -->
        <main class="flex-1 overflow-y-auto">
            {% block dashboard_content %}{% endblock %}
        </main>
    </div>
</div>

<!-- Mobile Sidebar Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const mobileSidebar = document.getElementById('mobile-sidebar');
    const mobileSidebarToggle = document.getElementById('mobile-sidebar-toggle');
    const mobileSidebarClose = document.getElementById('mobile-sidebar-close');
    
    function toggleSidebar() {
        mobileSidebar.classList.toggle('translate-x-full');
    }
    
    mobileSidebarToggle.addEventListener('click', toggleSidebar);
    mobileSidebarClose.addEventListener('click', toggleSidebar);
    
    // Close sidebar when clicking outside
    document.addEventListener('click', function(event) {
        const isClickInside = mobileSidebar.contains(event.target) || 
                            mobileSidebarToggle.contains(event.target);
        
        if (!isClickInside && !mobileSidebar.classList.contains('translate-x-full')) {
            toggleSidebar();
        }
    });
});
</script>
{% endblock %}


fix i need to scroll to see logout button fix make me not scrool make sidebar fixed fixed