From adcab9eb3c33099592acdb741d17ef89061de6ab Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Wed, 17 Dec 2025 15:26:19 +0300
Subject: [PATCH] Implemented tab title = current page

---
 next.config.ts                       |  4 +++
 src/app/components/Header/Header.tsx | 38 +++++++++++++++++++++++++++-
 src/app/projects/page.tsx            |  6 ++---
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 0c82d9a..db42c64 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -7,6 +7,10 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "techmasters.space",
       },
+      {
+        protocol: "https",
+        hostname: "tech-masters.guru",
+      },
     ],
   },
 };
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
index 466e6a3..88d6eaf 100644
--- a/src/app/components/Header/Header.tsx
+++ b/src/app/components/Header/Header.tsx
@@ -4,6 +4,8 @@ import { BellOutlined, UserOutlined } from "@ant-design/icons";
 import { Avatar, Button, Menu, MenuProps, Typography } from "antd";
 import { motion } from "framer-motion";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useMemo } from "react";
 import styles from "./Header.module.css";
 
 const { Title } = Typography;
@@ -31,7 +33,41 @@ const items: MenuProps['items'] = [
   },
 ];
 
+const TITLE_SUFFIX = "Tech Masters";
+
 const Header = () => {
+  const pathname = usePathname();
+
+  const selectedKey = useMemo(() => {
+    if (!pathname || pathname === "/") return "home";
+    const key = pathname.split("/")[1];
+    return key || "home";
+  }, [pathname]);
+
+  const pageTitle = useMemo(() => {
+    switch (selectedKey) {
+      case "home":
+        return "Home";
+      case "services":
+        return "Services";
+      case "projects":
+        return "Projects";
+      case "about":
+        return "About";
+      case "contact":
+        return "Contact";
+      case "testimonials":
+        return "Testimonials";
+      default:
+        return null;
+    }
+  }, [selectedKey]);
+
+  useEffect(() => {
+    if (!pageTitle) return;
+    document.title = `${pageTitle} | ${TITLE_SUFFIX}`;
+  }, [pageTitle]);
+
   return (
     <header className={styles.header}>
       <div className={styles.headerContainer}>
@@ -68,7 +104,7 @@ const Header = () => {
               mode="horizontal" 
               items={items} 
               className={styles.menu}
-              selectedKeys={['home']}
+              selectedKeys={[selectedKey]}
             />
           </motion.div>
         </nav>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 1c15ea5..54e147c 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -5,7 +5,7 @@ import {
   EyeOutlined,
   LinkOutlined,
   RocketOutlined,
-  UserOutlined
+  UserOutlined,
 } from "@ant-design/icons";
 import {
   Badge,
@@ -403,8 +403,8 @@ export default function ProjectsPage() {
               Featured <span className={styles.gradientText}>Work</span>
             </Title>
             <Paragraph className={styles.projectsSubtitle}>
-              Discover our latest projects and see how we&apos;ve helped businesses
-              achieve their digital transformation goals.
+              Discover our latest projects and see how we&apos;ve helped
+              businesses achieve their digital transformation goals.
             </Paragraph>
           </motion.div>