From dbe464d07d5a190e453d22eece6918d03fea2018 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 16 Jul 2026 01:28:37 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20logo=20with?=
 =?UTF-8?q?=20Back=20to=20Top=20functionality?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update index.html: Add a11y attributes (role, tabindex, aria-label, title) to .navbar-brand.
- Update js/app.js: Implement centralized scroll-to-top logic for both the floating button and the logo.
- Ensure the mobile navigation menu closes when the logo is clicked to return home/top.

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 .Jules/palette.md |  4 ++++
 index.html        |  2 +-
 js/app.js         | 22 ++++++++++++++++++++--
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 049f738..290aa51 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -50,3 +50,7 @@
 ## 2025-05-14 - Social Sharing Implementation
 **Learning:** Placeholders for social sharing buttons significantly degrade UX when users expect to share discovered content. Standardizing these intents with popup windows (550x450) provides a "premium" feel while keeping users on the platform.
 **Action:** Always verify if sharing icons in modals are functional; if not, implement standardized platform intents using centered popups.
+
+## 2025-07-16 - Logo as Functional Navigation Anchor
+**Learning:** Transforming the site logo into a "Back to Top" trigger provides a persistent, intuitive navigation path in long-scrolling archives. Enhancing it with `role="button"` and `tabindex="0"` ensures this functionality is accessible to screen readers and keyboard users, while synchronizing it with the mobile menu state prevents UI overlap.
+**Action:** Always enhance the primary brand element with 'Back to Top' functionality and accessibility attributes (ARIA roles/labels) to improve orientation and usability.
diff --git a/index.html b/index.html
index 0b438d6..abef8f9 100644
--- a/index.html
+++ b/index.html
@@ -64,7 +64,7 @@
   <!-- Navigation Header -->
   <header class="navbar">
     <div class="navbar-container">
-      <div class="navbar-brand">
+      <div class="navbar-brand" id="navbarBrand" role="button" tabindex="0" aria-label="Ruh Al Tarikh - Back to Top" title="Back to Top">
         <div class="brand-icon">
           <svg viewBox="0 0 100 100" width="32" height="32" fill="currentColor">
             <path d="M50 10 L90 90 L10 90 Z"/>
diff --git a/js/app.js b/js/app.js
index 5abcb24..de3de86 100644
--- a/js/app.js
+++ b/js/app.js
@@ -116,6 +116,7 @@ const DOM = {
     episodesSection: document.getElementById('episodesSection'),
     menuToggle: document.getElementById('menuToggleBtn'),
     scrollToTop: document.getElementById('scrollToTop'),
+    navbarBrand: document.getElementById('navbarBrand'),
 
     // Watch Later
     watchLaterBtn: document.getElementById('watchLaterBtn'),
@@ -1257,9 +1258,26 @@ function bindEvents() {
         window.addEventListener('scroll', () => {
             DOM.scrollToTop.classList.toggle('show', window.scrollY > 500);
         });
-        DOM.scrollToTop.addEventListener('click', () => {
+
+        const scrollToTopAction = () => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
+            if (document.body.classList.contains('mobile-nav-active')) {
+                document.body.classList.remove('mobile-nav-active');
+                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
+            }
+        };
+
+        DOM.scrollToTop.addEventListener('click', scrollToTopAction);
+
+        if (DOM.navbarBrand) {
+            DOM.navbarBrand.addEventListener('click', scrollToTopAction);
+            DOM.navbarBrand.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    scrollToTopAction();
+                }
+            });
+        }
     }
 
     // Header scroll effect