refactor: integrate navigation links into the primary navbar shell and simplify container layout

Author: JhaSourav07

app/components/navbar.tsx

@@ -19,9 +19,6 @@ 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);
@@ -138,10 +135,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 flex w-full max-w-6xl items-center justify-between gap-3">
+      <div className="mx-auto max-w-6xl">
         <div
           ref={shellRef}
-          className={`${shellCardClasses} w-auto`}
+          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)]"
           style={shellVars}
           onMouseEnter={updateRect}
           onMouseMove={(event) => {
@@ -152,7 +149,6 @@ export default function Navbar() {
             const rect = rectRef.current;
 
             if (!rect) return;
-
             const x = ((event.clientX - rect.left) / rect.width) * 100;
             const y = ((event.clientY - rect.top) / rect.height) * 100;
 
@@ -186,7 +182,7 @@ export default function Navbar() {
               maskComposite: 'exclude',
             }}
           />
-          <nav className="relative flex flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6">
+          <nav className="relative flex items-center justify-between px-4 py-3 sm:px-6">
             <Link
               href="/"
               aria-label="Go to home"
@@ -201,6 +197,21 @@ 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"
@@ -233,25 +244,6 @@ 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>
   );