navbar: started working on

src/components/Navbar/index.jsx

@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { FormattedMessage } from "react-intl";
 
-import "./index.scss";
 import Star from "../../assets/img/star.ico";
 import LogoutButton from "../buttons/LogoutButton";
 import { LOCALES } from "../../i18n/locales";
@@ -13,10 +12,10 @@ const Navbar = ({ handleLocaleChange, currentLocale }) => {
 
 	const languages = [
 		{ name: "Français", code: LOCALES.FRENCH },
-		{ name: "English", code: LOCALES.ENGLISH }
+		{ name: "English", code: LOCALES.ENGLISH },
 	];
 	return (
-		<div className="navbar">
+		<nav className="fixed flex bg-gray-500 w-screen">
 			<div className="navbar__LeftSide">
 				<Link to="/">
 					<img
@@ -76,7 +75,7 @@ const Navbar = ({ handleLocaleChange, currentLocale }) => {
 					</>
 				)}
 			</div>
-		</div>
+		</nav>
 	);
 };
 

src/components/Navbar/index.scss

@@ -1,45 +0,0 @@
-.navbar{
-  display: flex;
-  align-items:center;
-  justify-content: space-between;
-  background-color: #262626;
-  height: 50px;
-  width: 100%;
-  margin-top: 5px;
-
-
-  &:before{
-    content: '';
-    background: linear-gradient(to right, #B4D4F2, #F2B4D4, #D4F2B4);
-    display: block;
-    position: absolute;
-    top: 0px;
-    width: 100%;
-    height: 5px;
-  }
-  
-  .navbar__LeftSide{
-    margin-left: 15px;
-    a{
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100px;
-    }
-
-    .navbar__BrandName{
-      font-family: monospace;
-      font-weight: 600;
-      color: #F2B4D4;
-    }
-  }
-
-  .navbar__RightSide{
-    display: flex;
-    justify-content: end;
-    margin-right: 15px;
-    button {
-      margin: 0px 10px;
-    }
-  }
-} 

src/main.jsx

@@ -6,6 +6,7 @@ import { store, persistor } from "./redux/store/index";
 
 import App from "./App.jsx";
 import "./styles/output.css";
+import "./styles/custom.scss";
 
 ReactDOM.render(
 	<React.StrictMode>