made the title change based on page

.idea/workspace.xml

@@ -4,20 +4,11 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="15d653a3-00a9-440e-a365-0d5dba6a77a9" name="Changes" comment="added dark/light mode toggle">
+    <list default="true" id="15d653a3-00a9-440e-a365-0d5dba6a77a9" name="Changes" comment="addded fuctioning burger with accordion for projects and fixed the header">
-      <change afterPath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/app/projects/nuclear-age/page.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/app/projects/porsche/page.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/app/projects/roboxers/page.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/accordion.jsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/burger.jsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/tailwindcss.xml" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/app/layout.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/layout.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/app/me/page.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/me/page.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/projects/page.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/projects/page.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/mode-toggle.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/mode-toggle.jsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -125,7 +116,7 @@
       <workItem from="1742463482019" duration="601000" />
       <workItem from="1742464379879" duration="293000" />
       <workItem from="1742464681826" duration="2750000" />
-      <workItem from="1743060154301" duration="7632000" />
+      <workItem from="1743060154301" duration="10034000" />
     </task>
     <task id="LOCAL-00001" summary="created a base layout">
       <option name="closed" value="true" />
@@ -151,7 +142,15 @@
       <option name="project" value="LOCAL" />
       <updated>1742461342755</updated>
     </task>
-    <option name="localTasksCounter" value="4" />
+    <task id="LOCAL-00004" summary="addded fuctioning burger with accordion for projects and fixed the header">
+      <option name="closed" value="true" />
+      <created>1743068701470</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1743068701470</updated>
+    </task>
+    <option name="localTasksCounter" value="5" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -160,6 +159,7 @@
   <component name="VcsManagerConfiguration">
     <MESSAGE value="created a base layout" />
     <MESSAGE value="added dark/light mode toggle" />
-    <option name="LAST_COMMIT_MESSAGE" value="added dark/light mode toggle" />
+    <MESSAGE value="addded fuctioning burger with accordion for projects and fixed the header" />
+    <option name="LAST_COMMIT_MESSAGE" value="addded fuctioning burger with accordion for projects and fixed the header" />
   </component>
 </project>

src/app/layout.js

@@ -5,9 +5,35 @@ import Link from "next/link";
 import {ThemeProvider} from "@/components/theme-provider";
 import {ModeToggle} from "@/components/mode-toggle";
 import Burger from "@/components/burger";
+import {usePathname} from "next/navigation";
 
 
 export default function RootLayout({children}) {
+    const pathname = usePathname();
+    const getTitle = () => {
+        switch (pathname) {
+            case "/":
+                return "Kristians Portfolio";
+            case "/about":
+                return "About";
+            case "/projects":
+                return "Projects";
+            case "/me":
+                return "About me";
+            case "/contact":
+                return "Contact";
+            case "/projects/roboxers":
+                return "Roboxers";
+            case "/projects/nuclear-age":
+                return "Nuclear Age Mod";
+            case "/projects/porsche":
+                return "Wirtschaftsgeschichte von Porsche";
+            case "/privacy":
+                return "Privacy Policy";
+            default:
+                return "Kristians Portfolio";
+        }
+    };
     return (
         <html lang="en" suppressHydrationWarning>
         <body
@@ -18,12 +44,13 @@ export default function RootLayout({children}) {
             enableSystem
             disableTransitionOnChange
         >
-            <header className={"fixed dark:bg-black bg-gray-200 w-full flex text-3xl md:text-5xl p-3 justify-between border-b-2 border-emerald-800 dark:border-emerald-300 content-center"}>
+            <header
+                className={"fixed dark:bg-black bg-gray-200 w-full flex text-3xl md:text-5xl p-3 justify-between border-b-2 border-emerald-800 dark:border-emerald-300 content-center"}>
                 <Burger/>
-                <div className={""}>Kristians Portfolio</div>
+                <div className={""}>{getTitle()}</div>
                 <ModeToggle/>
             </header>
-            <div className={"p-5 pt-20"}>
+            <div className={"p-5 pt-23"}>
                 {children}
             </div>
             <footer className={""}>

src/app/me/page.js

@@ -1,5 +1,6 @@
 export default function Me() {
-    return <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+    return (
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
         et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
         clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
         consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
@@ -61,4 +62,5 @@ export default function Me() {
 
 
     </p>
+    )
 }

src/components/mode-toggle.jsx

@@ -12,7 +12,8 @@ export function ModeToggle() {
     return (
         <Button variant="outline" size="icon" onClick={() =>
             setTheme(theme === "dark" ? "light" : "dark")}
-                className="bg-gray-300 dark:bg-transparent text-yellow-600 dark:text-yellow-300 lg:scale-150 m-2">
+                className="bg-transparent text-yellow-600 dark:text-yellow-200 lg:scale-150 m-2
+                border-1 dark:border-emerald-300 border-emerald-800">
             <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-125 transition-all dark:-rotate-90 dark:scale-0"/>
             <Moon
                 className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-125"/>