refactor: separate sticky header components for improved layout (JhaSourav07#276)

* refactor: separate sticky header components for improved layout

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* aligned navbar.tsx with the Copilot  suggestions

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: codedbydollys10

app/components/navbar.tsx

@@ -19,6 +19,9 @@ const NAV_LINKS = [
   },
 ];
 
+const shellCardClasses =
+  'relative overflow-hidden rounded-2xl border border-white/25 bg-black/45 backdrop-blur-xl shadow-[0_14px_40px_rgba(0,0,0,0.45)]';
+
 export default function Navbar() {
   const [open, setOpen] = useState(false);
   const shellRef = useRef<HTMLDivElement>(null);
@@ -135,10 +138,10 @@ export default function Navbar() {
 
   return (
     <header className="fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6">
-      <div className="mx-auto max-w-6xl">
+      <div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-3">
         <div
           ref={shellRef}
-          className="relative overflow-hidden rounded-2xl border border-white/25 bg-black/45 backdrop-blur-xl shadow-[0_14px_40px_rgba(0,0,0,0.45)]"
+          className={`${shellCardClasses} w-auto`}
           style={shellVars}
           onMouseEnter={updateRect}
           onMouseMove={(event) => {
@@ -183,7 +186,7 @@ export default function Navbar() {
               maskComposite: 'exclude',
             }}
           />
-          <nav className="relative flex items-center justify-between px-4 py-3 sm:px-6">
+          <nav className="relative flex flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6">
             <Link
               href="/"
               aria-label="Go to home"
@@ -198,21 +201,6 @@ export default function Navbar() {
               </span>
             </Link>
 
-            <div className="hidden items-center gap-3 md:flex">
-              {NAV_LINKS.map((link) => (
-                <a
-                  key={link.href}
-                  href={link.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2 text-sm font-medium text-white/90 transition hover:border-white/45 hover:bg-white/10"
-                >
-                  <GithubMark />
-                  {link.label}
-                </a>
-              ))}
-            </div>
-
             <button
               type="button"
               className="inline-flex items-center justify-center rounded-xl border border-white/15 bg-white/5 p-2 text-white/90 transition hover:bg-white/10 md:hidden"
@@ -245,6 +233,25 @@ export default function Navbar() {
             </div>
           ) : null}
         </div>
+
+        <nav aria-label="External repository" className="hidden md:block">
+          <div className={`${shellCardClasses} p-3 md:p-4`}>
+            <div className="flex items-center gap-3">
+              {NAV_LINKS.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2 text-sm font-medium text-white/90 transition hover:border-white/45 hover:bg-white/10"
+                >
+                  <GithubMark />
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </nav>
       </div>
     </header>
   );