navbar: ajout de styles

src/components/navbar/index.jsx

@@ -23,8 +23,8 @@ const Navbar = () => {
 
 	return (
 		<div id="navbar-container">
-			<nav style={handleShowNavbar(headerContext)} className={toggleMenu ? "nav-o" : "nav-c"}>
-				<div className="details">
+			<nav style={handleShowNavbar(headerContext)} className={toggleMenu ? "nav-open" : ""}>
+				<div className={toggleMenu ? "details-open" : "details"}>
 					<Link
 						to="/services"
 						className={toggleMenu ? "menu-item" : "menu-item-hidden"}>

src/components/navbar/index.scss

@@ -93,45 +93,71 @@ nav {
 		padding-right: var(--bs-gutter-x, 0.75rem);
 		padding-left: var(--bs-gutter-x, 0.75rem);
 		margin: 4rem auto 0 auto;
+		display: flex;
+		flex-direction: column-reverse;
+		align-items: center;
+	}
+	
+	
+	.details {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		align-items:center;
+		justify-content: flex-end;
+		top: 5rem;
+
+		.menu-item-hidden {
+			display: none;
+		}
+	}
 
-		.details {
-			position: absolute;
+	.details-open {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		align-items:center;
+		top: 5rem;
+		background-color: white;
+		width: 100%;
+		
+		.menu-item {
+			width: 100%;
+			line-height: 2rem;
 			display: flex;
-			flex-direction: column;
-			align-items: center;
-						
+			justify-content: center;
 
-			.menu-item-hidden {
-				display: none;
+			&:hover, &:focus{
+				background-color: $light;
 			}
 		}
+	}
 
-		.title-and-menu {
-			margin-left: .5rem;
-			display: flex;
-			width: 100%;
+	.title-and-menu {
+		margin-left: .5rem;
+		display: flex;
+		width: 100%;
 
-			button.menu-toggle-container {
-				display: inline-block;
-				margin-left: auto;
-				margin-right: 1.5rem;
-				padding: 0.25rem 0.75rem;
-				font-size: 1.25rem;
-				line-height: 1;
-				background-color: transparent;
-				border: 1px solid transparent;
-				border-radius: 0.25rem;
-				transition: box-shadow 0.15s ease-in-out;
-
-				&:hover, &:focus {
-					cursor: pointer;
-					box-shadow: 0 0 1px 1px $dark;
-				}
+		button.menu-toggle-container {
+			display: inline-block;
+			margin-left: auto;
+			margin-right: 1.5rem;
+			padding: 0.25rem 0.75rem;
+			font-size: 1.25rem;
+			line-height: 1;
+			background-color: transparent;
+			border: 1px solid transparent;
+			border-radius: 0.25rem;
+			transition: box-shadow 0.15s ease-in-out;
+
+			&:hover, &:focus {
+				cursor: pointer;
+				box-shadow: 0 0 1px 1px $dark;
 			}
 		}
+	}
 
-		#contact-btn {
-			display: none;
-		}
+	#contact-btn {
+		display: none;
 	}
 }