include logo in header (WIP)

silvankammermann · Oct 29, 2023 · 3306147 · 3306147
1 parent 38d7211
commit 3306147
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 34 deletions.
diff --git a/frontend/src/app/components/Header/Header.js b/frontend/src/app/components/Header/Header.js
@@ -1,34 +1,44 @@
 import styles from "./Header.module.css";
-import SettingsIcon from '@mui/icons-material/Settings';
+import SettingsIcon from "@mui/icons-material/Settings";
 import Image from "next/image";
 import Popover from "@/app/components/Popover/Popover";
 import Settings from "@/app/components/Settings/Settings";
 
 export default function Header({ title }) {
-  const pbDimenstions = 30
+  const pbDimenstions = 30;
 
   return (
     <>
       <header className={styles.header}>
-        <Popover trigger={
-          <div 
-            className={styles.profile}
-          >
-            <Image
-              className={styles.profile__img}
-              src="/images/sloth-profile.svg"
-              width={pbDimenstions}
-              height={pbDimenstions}
-              alt="Profile Pic"
+        <Popover
+          trigger={
+            <div className={styles.profile}>
+              <Image
+                className={styles.profile__img}
+                src="/images/sloth-profile.svg"
+                width={pbDimenstions}
+                height={pbDimenstions}
+                alt="Profile Pic"
               />
-            <SettingsIcon className="fcolor--purple" />
-          </div>
-        }>
+              <SettingsIcon className="fcolor--purple" />
+            </div>
+          }
+        >
           <Settings />
         </Popover>
-
-        <h1 className={styles.title}>{title}</h1>
+
+        {title.length > 0 ? (
+          <h1 className={styles.title}>{title}</h1>
+        ) : (
+          <Image
+            className={styles.logo}
+            src="/images/sloth-profile.svg"
+            width={pbDimenstions}
+            height={pbDimenstions}
+            alt="Profile Pic"
+          />
+        )}
       </header>
     </>
   );
-}
+}
diff --git a/frontend/src/app/layout.js b/frontend/src/app/layout.js
@@ -6,34 +6,35 @@ import "@/app/fonts/Tanker/Fonts/WEB/css/tanker.css";
 import styles from "@/app/page.module.css";
 import Header from "./components/Header/Header";
 import { useEffect } from "react";
+import { usePathname } from "next/navigation";
 
 /*
 export const metadata = {
   title: "Kick Ass Todo App",
   description: "A Todo App where your todo's won't be forgotten.",
 };
-
-let colorClass = "";
-/*
-if (usePathname() === "/tinder") {
-  colorClass = "bg--purple";
-}
 */
 
 export default function RootLayout({ children }) {
-  useEffect(() => {
-    // i have absolutelly no idea how nextJS and routing stuff works
-    // therefore i inserted this little hacky effect here
-    if (window.location.pathname === "/tinder") {
-      document.body.classList.add("bgPurple");
-      document.body.classList.add("tinderPage");
-    }
-  }, []);
+  const pathname = usePathname();
+
+  // set body classes
+  let bodyClasses = "bgDarkPurple";
+  if (pathname === "/tinder") {
+    bodyClasses = "bgPurple tinderPage";
+  }
+
+  // define header content
+  let headerTitle = "";
+  if (pathname === "/") {
+    headerTitle = "My tasks";
+  }
 
   return (
     <html lang="en">
-      <body className="bgDarkPurple">
-        <Header title={`My tasks`} />
+      <body className={bodyClasses}>
+        <Header title={headerTitle} />
+        <b>{pathname}</b>
         <main className={styles.main}>
           <div className={styles.main__inner}>{children}</div>
         </main>