feat: api implementation

src/App.tsx

@@ -3,6 +3,7 @@ import {
 	Route,
 	BrowserRouter as Router,
 	Routes,
+	useLocation,
 } from "react-router-dom";
 import Header from "./components/Header";
 import ProtectedRoute from "./components/ProtectedRoute";
@@ -12,15 +13,18 @@ import CertifRecipe from "./pages/CertifRecipe/page";
 import CreateRecipe from "./pages/CreateRecipe/page";
 import Home from "./pages/Home/page";
 import Login from "./pages/Login/page";
-import Planning from "./pages/Planning/page";
 import Settings from "./pages/Settings/page";
 import ShoppingList from "./pages/ShoppingList/page";
 import Signup from "./pages/Signup/page";
 
-function App() {
+const AppContent = () => {
+	const location = useLocation();
+	const hideHeader =
+		location.pathname === "/login" || location.pathname === "/signup";
+
 	return (
-		<Router>
-			<Header logoUrl="/logo.png" />
+		<>
+			{!hideHeader && <Header logoUrl="/logo.png" />}
 
 			<Routes>
 				<Route
@@ -33,12 +37,11 @@ function App() {
 				/>
 				<Route path="/login" element={<Login />} />
 				<Route path="/signup" element={<Signup />} />
-				<Route path="/settings" element={<Settings />} />
 				<Route
-					path="/Planning"
+					path="/settings"
 					element={
 						<ProtectedRoute>
-							<Planning />
+							<Settings />
 						</ProtectedRoute>
 					}
 				/>
@@ -50,14 +53,65 @@ function App() {
 						</ProtectedRoute>
 					}
 				/>
-				<Route path="/Catalogue" element={<Catalogue />} />
-				<Route path="/CertifRecipe" element={<CertifRecipe />} />
-				<Route path="CreateRecipe" element={<CreateRecipe />} />
-				<Route path="/recipe/:id" element={<RecipeDetail />} />
-				<Route path="/shopingList/:id" element={<ShoppingList />} />
+				<Route
+					path="/Catalogue"
+					element={
+						<ProtectedRoute>
+							<Catalogue />
+						</ProtectedRoute>
+					}
+				/>
+				<Route
+					path="/CertifRecipe"
+					element={
+						<ProtectedRoute>
+							<CertifRecipe />
+						</ProtectedRoute>
+					}
+				/>
+				<Route
+					path="/CreateRecipe"
+					element={
+						<ProtectedRoute>
+							<CreateRecipe />
+						</ProtectedRoute>
+					}
+				/>
+				<Route
+					path="/recipe/:id"
+					element={
+						<ProtectedRoute>
+							<RecipeDetail />
+						</ProtectedRoute>
+					}
+				/>
+				<Route
+					path="/custom-recipe/:id"
+					element={
+						<ProtectedRoute>
+							<RecipeDetail isCustom />
+						</ProtectedRoute>
+					}
+				/>
+				<Route
+					path="/shopingList/:id"
+					element={
+						<ProtectedRoute>
+							<ShoppingList />
+						</ProtectedRoute>
+					}
+				/>
 
 				<Route path="*" element={<Navigate replace to="/" />} />
 			</Routes>
+		</>
+	);
+};
+
+function App() {
+	return (
+		<Router>
+			<AppContent />
 		</Router>
 	);
 }

src/components/Header.css

@@ -76,23 +76,32 @@
 	width: 100%;
 }
 
-/* User icon */
-.user-link {
+/* Navigation items alignment */
+.navigation li {
 	display: flex;
 	align-items: center;
 }
 
-.user-link::after {
+/* User icon */
+.navigation a.user-link {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+}
+
+.navigation a.user-link::after {
 	display: none;
 }
 
-.user-link .user-icon {
-	width: 28px;
-	height: 28px;
+.user-icon {
+	width: 1rem;
+	height: 1rem;
+	vertical-align: middle;
 	transition: transform 0.2s ease;
 }
 
-.user-link:hover .user-icon {
+.navigation a.user-link:hover .user-icon {
 	transform: scale(1.1);
 }
 

src/components/Header.tsx

@@ -34,7 +34,12 @@ const Header: React.FC<HeaderProps> = ({ logoUrl = "./public/logo.png" }) => {
 					</li>
 					<li>
 						<a href="/settings" className="user-link">
-							<img src={UserIcon} alt="Mon compte" className="user-icon" />
+							<img
+								src={UserIcon}
+								alt="Mon compte"
+								className="user-icon"
+								style={{ width: "22px", height: "22px" }}
+							/>
 						</a>
 					</li>
 				</ul>