Update app.py

app.py

@@ -1144,6 +1144,7 @@ body::before {
     text-align: center !important; 
     text-shadow: 3px 3px 0px rgba(150, 120, 200, 0.6), 6px 6px 0px rgba(0, 0, 0, 0.2) !important;
     font-weight: 600 !important;
+    margin-top: 20px !important;
 }
 
 .top-right-login {
@@ -1164,6 +1165,7 @@ body::before {
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
     border: 3px solid rgba(100, 100, 100, 0.8) !important;
     backdrop-filter: blur(10px) !important;
+    margin-bottom: 20px !important;
 }
 
 .nav-button {
@@ -1266,7 +1268,7 @@ div.markdown h3 {
 
 .hamburger-btn-open {
     position: fixed !important;
-    top: 280px !important;
+    top: 20px !important;
     left: 20px !important;
     z-index: 999 !important;
     background: rgba(50, 50, 50, 0.95) !important;
@@ -1308,13 +1310,6 @@ div.markdown h3 {
 # ============================================================================
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="amber")) as demo:
     
-    gr.HTML("""
-        <h1 class="main-title">🎨 Sistem VQA STEM Sekolah Rendah 🤖</h1>
-        <p class="main-title" style="font-size: 3.5rem;">
-          Tanya, Muat Naik & Dapatkan Jawapan. Belajar Lebih Seronok !
-        </p>
-    """)
-    
     # Top-right login area
     with gr.Row():
         with gr.Column(scale=10):
@@ -1324,34 +1319,41 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="amber")) as dem
             user_display = gr.Markdown("")
             logout_btn = gr.Button("🚪 Log Keluar", variant="secondary", visible=False)
     
-    # Main layout with sidebar and content
-    with gr.Row():
-        # Sidebar column
-        with gr.Column(scale=1) as sidebar_column:
-            toggle_sidebar_open = gr.Button("»", elem_classes="hamburger-btn-open", size="sm", visible=False)
+    # Sidebar at the top
+    toggle_sidebar_open = gr.Button("☰ Menu", elem_classes="hamburger-btn-open", size="sm", visible=False)
+    
+    with gr.Column(elem_classes="sidebar-nav", visible=True) as sidebar_nav:
+        toggle_sidebar_close = gr.Button("✖ Tutup Menu", elem_classes="hamburger-btn-close", size="sm")
+        with gr.Row():
+            gr.Markdown("### 📋 Menu Utama")
+            btn_vqa = gr.Button("🎨 Tanya Soalan", variant="primary", elem_classes="nav-button", scale=1)
             
-            with gr.Column(elem_classes="sidebar-nav", visible=True) as sidebar_nav:
-                toggle_sidebar_close = gr.Button("«", elem_classes="hamburger-btn-close", size="sm")
-                gr.Markdown("### 📋 Menu Utama")
-                btn_vqa = gr.Button("🎨 Tanya Soalan", variant="primary", elem_classes="nav-button")
-                
-                student_restricted_group = gr.Group(visible=False)
-                with student_restricted_group:
-                    btn_library = gr.Button("📚 Perpustakaan", variant="secondary", elem_classes="nav-button")
-                    btn_bookmark = gr.Button("📖 Kandungan Ditanda", variant="secondary", elem_classes="nav-button")
-                    btn_student_progress = gr.Button("📊 Kemajuan Saya", variant="secondary", elem_classes="nav-button")
-                    btn_challenge = gr.Button("🎯 Cabaran Harian STEM", variant="secondary", elem_classes="nav-button")
-                
-                teacher_restricted_group = gr.Group(visible=False)
-                with teacher_restricted_group:
-                    btn_teacher_progress = gr.Button("📊 Penjejak Kemajuan Pelajar", variant="secondary", elem_classes="nav-button")
-                    btn_add_challenge = gr.Button("🎯 Tambah Cabaran", variant="secondary", elem_classes="nav-button")
-                    btn_add_tutorial = gr.Button("❓ Tambah Tutorial", variant="secondary", elem_classes="nav-button")
-                
-                btn_tutorial = gr.Button("❓ Bantuan & Tutorial", variant="secondary", elem_classes="nav-button")
-                btn_feedback = gr.Button("💬 Maklum Balas & Penilaian", variant="secondary", elem_classes="nav-button")
-                btn_info = gr.Button("ℹ️ Info", variant="secondary", elem_classes="nav-button")
-        
+            student_restricted_group = gr.Group(visible=False)
+            with student_restricted_group:
+                with gr.Row():
+                    btn_library = gr.Button("📚 Perpustakaan", variant="secondary", elem_classes="nav-button", scale=1)
+                    btn_bookmark = gr.Button("📖 Kandungan Ditanda", variant="secondary", elem_classes="nav-button", scale=1)
+                    btn_student_progress = gr.Button("📊 Kemajuan Saya", variant="secondary", elem_classes="nav-button", scale=1)
+                    btn_challenge = gr.Button("🎯 Cabaran Harian STEM", variant="secondary", elem_classes="nav-button", scale=1)
+            
+            teacher_restricted_group = gr.Group(visible=False)
+            with teacher_restricted_group:
+                with gr.Row():
+                    btn_teacher_progress = gr.Button("📊 Penjejak Kemajuan Pelajar", variant="secondary", elem_classes="nav-button", scale=1)
+                    btn_add_challenge = gr.Button("🎯 Tambah Cabaran", variant="secondary", elem_classes="nav-button", scale=1)
+                    btn_add_tutorial = gr.Button("❓ Tambah Tutorial", variant="secondary", elem_classes="nav-button", scale=1)
+            
+            btn_tutorial = gr.Button("❓ Bantuan & Tutorial", variant="secondary", elem_classes="nav-button", scale=1)
+            btn_feedback = gr.Button("💬 Maklum Balas & Penilaian", variant="secondary", elem_classes="nav-button", scale=1)
+            btn_info = gr.Button("ℹ️ Info", variant="secondary", elem_classes="nav-button", scale=1)
+    
+    # Title AFTER sidebar
+    gr.HTML("""
+        <h1 class="main-title">🎨 Sistem VQA STEM Sekolah Rendah 🤖</h1>
+        <p class="main-title" style="font-size: 3.5rem;">
+          Tanya, Muat Naik & Dapatkan Jawapan. Belajar Lebih Seronok !
+        </p>
+    """)
         # Content column - FIXED TO scale=4
         with gr.Column(scale=4) as content_column:
             
@@ -1690,28 +1692,24 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="amber")) as dem
     def toggle_sidebar_hide():
         return (
             gr.update(visible=False),
-            gr.update(visible=True),
-            gr.update(scale=0),
-            gr.update(scale=5)
-        )
-    
-    def toggle_sidebar_show():
-        return (
-            gr.update(visible=True),
-            gr.update(visible=False),
-            gr.update(scale=1),
-            gr.update(scale=4)
+            gr.update(visible=True)
         )
-    
-    toggle_sidebar_close.click(
-        fn=toggle_sidebar_hide,
-        outputs=[sidebar_nav, toggle_sidebar_open, sidebar_column, content_column]
-    )
-    
-    toggle_sidebar_open.click(
-        fn=toggle_sidebar_show,
-        outputs=[sidebar_nav, toggle_sidebar_open, sidebar_column, content_column]
-    )
+        
+        def toggle_sidebar_show():
+            return (
+                gr.update(visible=True),
+                gr.update(visible=False)
+            )
+            
+            toggle_sidebar_close.click(
+                fn=toggle_sidebar_hide,
+                outputs=[sidebar_nav, toggle_sidebar_open]
+            )
+            
+            toggle_sidebar_open.click(
+                fn=toggle_sidebar_show,
+                outputs=[sidebar_nav, toggle_sidebar_open]
+            )
     
     # Authentication
     #student_register_btn.click(fn=register_student, inputs=[student_reg_name, student_reg_username, student_reg_password, student_reg_class, student_reg_guardian, student_reg_dob, student_reg_gender], outputs=student_register_status)