From ab652497a16c76466316f59006bd27e75328a751 Mon Sep 17 00:00:00 2001
From: Abdul Kareem <abdulkareem424@gmail.com>
Date: Mon, 23 Mar 2026 02:39:53 +0300
Subject: [PATCH] fix: replace navbar with responsive desktop and mobile layout

---
 index.html |  16 ++--
 script.js  |   8 ++
 styles.css | 270 ++++++++++++++++++++++++++++++++++++-----------------
 3 files changed, 199 insertions(+), 95 deletions(-)
diff --git a/index.html b/index.html
index 7d52f73..17616ea 100644
--- a/index.html
+++ b/index.html
@@ -19,18 +19,20 @@
 <body>
     <header class="site-header">
         <div class="container header-shell">
+            <a href="#top" class="brand">
+                <img src="assets/images/tlogoapp.png" alt="شعار Tabeley" class="brand-logo">
+                <div class="brand-copy">
+                    <strong class="brand-name">Tabeley</strong>
+                    <small>Dining Reservation Platform</small>
+                </div>
+            </a>
+
             <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-menu" aria-label="فتح القائمة">
                 <span></span>
                 <span></span>
                 <span></span>
             </button>
-            <a href="#top" class="brand" aria-label="Tabeley">
-                <img src="assets/images/tlogoapp.png" alt="شعار تطبيق Tabeley" class="brand-logo">
-                <span class="brand-copy">
-                    <strong class="brand-name">Tabeley</strong>
-                    <small>Dining Reservation Platform</small>
-                </span>
-            </a>
+
             <nav class="nav" id="site-menu">
                 <a href="#features">المزايا</a>
                 <a href="#screenshots">لقطات التطبيق</a>
diff --git a/script.js b/script.js
index 76507b3..16bd172 100644
--- a/script.js
+++ b/script.js
@@ -26,6 +26,14 @@
             menuToggle.classList.remove('is-open');
             menuToggle.setAttribute('aria-expanded', 'false');
         });
+
+        window.addEventListener('resize', function () {
+            if (window.innerWidth > 900) {
+                navMenu.classList.remove('is-open');
+                menuToggle.classList.remove('is-open');
+                menuToggle.setAttribute('aria-expanded', 'false');
+            }
+        });
     }
 
     if ('IntersectionObserver' in window) {
diff --git a/styles.css b/styles.css
index c25ac1b..33bedd5 100644
--- a/styles.css
+++ b/styles.css
@@ -123,42 +123,94 @@ textarea {
 .site-header {
     position: sticky;
     top: 0;
-    z-index: 20;
+    z-index: 1000;
     backdrop-filter: blur(18px);
-    background: rgba(255, 251, 247, 0.72);
+    background: rgba(255, 251, 247, 0.88);
     border-bottom: 1px solid rgba(43, 27, 27, 0.08);
 }
 
 .header-shell {
-    position: relative;
+    min-height: 78px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 20px;
+    position: relative;
+}
+
+.brand {
+    display: inline-flex;
+    align-items: center;
     gap: 14px;
-    min-height: 74px;
+    text-decoration: none;
+    color: var(--text-main);
+    flex-shrink: 0;
+}
+
+.brand-logo {
+    width: 52px;
+    height: 52px;
+    border-radius: 16px;
+    box-shadow: var(--shadow-soft);
+    object-fit: cover;
+}
+
+.brand-copy {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-height: 1.1;
+}
+
+.brand-name {
+    font-size: 28px;
+    font-weight: 800;
+    color: var(--text-main);
+}
+
+.brand-copy small {
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    opacity: 0.85;
+}
+
+.nav {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.nav a {
+    padding: 12px 16px;
+    border-radius: 14px;
+    color: var(--text-muted);
+    font-weight: 700;
+    transition: background 0.2s ease, color 0.2s ease;
+    white-space: nowrap;
+}
+
+.nav a:hover {
+    background: var(--primary-soft);
+    color: var(--primary-dark);
 }
 
 .menu-toggle {
-    flex: 0 0 auto;
+    display: none;
     width: 52px;
     height: 52px;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 5px;
     border: 1px solid var(--border);
     border-radius: 16px;
-    background: rgba(255, 255, 255, 0.72);
+    background: rgba(255, 255, 255, 0.9);
     box-shadow: 0 14px 34px rgba(74, 30, 30, 0.08);
     cursor: pointer;
     padding: 0;
-    transition: transform 0.2s ease, background 0.2s ease;
-}
-
-.menu-toggle:hover {
-    transform: translateY(-1px);
-    background: rgba(255, 255, 255, 0.92);
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 5px;
 }
 
 .menu-toggle span {
@@ -181,77 +233,6 @@ textarea {
     transform: translateY(-7px) rotate(-45deg);
 }
 
-.brand {
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-    color: var(--text-main);
-    margin-inline-start: auto;
-}
-
-.brand-logo {
-    order: 2;
-    width: 52px;
-    height: 52px;
-    border-radius: 16px;
-    box-shadow: var(--shadow-soft);
-}
-
-.brand-copy {
-    order: 1;
-    display: flex;
-    flex-direction: column;
-    line-height: 1.1;
-    align-items: flex-end;
-    text-align: right;
-}
-
-.brand-name {
-    font-size: 24px;
-    font-weight: 700;
-}
-
-.brand-copy small {
-    color: var(--text-muted);
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    opacity: 0.82;
-}
-
-.nav {
-    position: absolute;
-    top: calc(100% - 6px);
-    right: 0;
-    min-width: 240px;
-    display: none;
-    grid-auto-flow: row;
-    gap: 6px;
-    padding: 12px;
-    border: 1px solid var(--border);
-    border-radius: 20px;
-    background: rgba(255, 251, 247, 0.96);
-    box-shadow: 0 24px 50px rgba(43, 27, 27, 0.12);
-}
-
-.nav.is-open {
-    display: grid;
-}
-
-.nav a {
-    padding: 12px 14px;
-    border-radius: 14px;
-    color: var(--text-muted);
-    font-weight: 700;
-    transition: color 0.2s ease, background 0.2s ease;
-}
-
-.nav a:hover {
-    background: var(--primary-soft);
-    color: var(--primary-dark);
-}
-
 .hero {
     padding-top: 56px;
 }
@@ -1140,7 +1121,118 @@ textarea {
     }
 }
 
+@media (max-width: 900px) {
+    .header-shell {
+        min-height: 72px;
+    }
+
+    .brand-logo {
+        width: 46px;
+        height: 46px;
+    }
+
+    .brand-name {
+        font-size: 24px;
+    }
+
+    .brand-copy small {
+        display: none;
+    }
+
+    .menu-toggle {
+        display: inline-flex;
+        flex-shrink: 0;
+    }
+
+    .nav {
+        position: absolute;
+        top: calc(100% + 10px);
+        right: 0;
+        left: 0;
+        display: none;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 6px;
+        padding: 12px;
+        border: 1px solid var(--border);
+        border-radius: 20px;
+        background: rgba(255, 251, 247, 0.98);
+        box-shadow: 0 24px 50px rgba(43, 27, 27, 0.12);
+    }
+
+    .nav.is-open {
+        display: flex;
+    }
+
+    .nav a {
+        width: 100%;
+        padding: 14px 16px;
+    }
+}
+
+@media (min-width: 901px) {
+    .nav {
+        display: flex !important;
+    }
+}
+
+@media (max-width: 900px) {
+    .header-shell {
+        min-height: 72px;
+    }
+
+    .brand-logo {
+        width: 46px;
+        height: 46px;
+    }
+
+    .brand-name {
+        font-size: 24px;
+    }
+
+    .brand-copy small {
+        display: none;
+    }
+
+    .menu-toggle {
+        display: inline-flex;
+        flex-shrink: 0;
+    }
+
+    .nav {
+        position: absolute;
+        top: calc(100% + 10px);
+        right: 0;
+        left: 0;
+        display: none;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 6px;
+        padding: 12px;
+        border: 1px solid var(--border);
+        border-radius: 20px;
+        background: rgba(255, 251, 247, 0.98);
+        box-shadow: 0 24px 50px rgba(43, 27, 27, 0.12);
+    }
+
+    .nav.is-open {
+        display: flex;
+    }
+
+    .nav a {
+        width: 100%;
+        padding: 14px 16px;
+    }
+}
+
+@media (min-width: 901px) {
+    .nav {
+        display: flex !important;
+    }
+}
+
 @media (max-width: 760px) {
+
     .section {
         padding: 72px 0;
     }
@@ -1204,6 +1296,8 @@ textarea {
     .header-shell {
         min-height: 68px;
         gap: 10px;
+        grid-template-columns: 46px 1fr 46px;
+        direction: ltr;
     }
 
     .brand-logo {
