directory fix

frontend/src/components/Layout/Navbar/Navbar.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { FaRegBell } from "react-icons/fa6";
+import { useTranslation } from "react-i18next";
+import Notifications from "../Notifications/Notifications";
+import styles from "./Navbar.module.css";
+
+function Navbar({ notifications }) {
+  const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
+  const { t } = useTranslation();
+
+  return (
+    <nav
+      className={`navbar navbar-light ${styles.customPadding} ${styles.navBarColor}`}
+    >
+      <div className={`container-fluid ${styles.navbarContainer}`}>
+        <div className={styles.navbarTitleContainer}>
+          <span className={styles.navbarTitle}>
+            <strong>{t("NAVBAR.TEXT.TITLE")}</strong>
+          </span>
+        </div>
+        <button
+          onClick={() => setIsNotificationsOpen(true)}
+          className={styles.notificationsButton}
+          aria-label={t("NAVBAR.ACTIONS.OPEN_NOTIFICATIONS")}
+        >
+          <FaRegBell />
+        </button>
+      </div>
+      <Notifications
+        isOpen={isNotificationsOpen}
+        onClose={() => setIsNotificationsOpen(false)}
+        notifications={notifications}
+      />
+    </nav>
+  );
+}
+
+export default Navbar;

frontend/src/components/Layout/Navbar/Navbar.module.css

@@ -0,0 +1,67 @@
+.navBarColor {
+  background: linear-gradient(90deg, #9370db, #add8e6, #90ee90);
+  color: #161d26;
+  padding: 1rem;
+}
+
+.navbarContainer {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbarTitleContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.navbarTitle {
+  font-size: 1.7rem;
+  margin: 0;
+}
+
+.notificationsButton {
+  background: none;
+  border: none;
+  font-size: 1.7rem;
+  cursor: pointer;
+  color: #161d26;
+  transition: transform 0.2s ease, filter 0.2s ease;
+  padding: 0;
+}
+
+.notificationsButton:hover {
+  transform: scale(1.1);
+}
+
+.notificationsButton:focus {
+  outline: none;
+}
+
+@media (max-width: 768px) {
+  .navBarColor {
+    text-align: center;
+  }
+
+  .navbarContainer {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .navbarTitleContainer {
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .navbarTitle {
+    font-size: 1.4rem;
+  }
+
+  .notificationsButton {
+    font-size: 1.4rem;
+    margin-top: 0.5rem;
+  }
+}