Merge branch 'develop' into staging

WildCodeSchool · Jan 18, 2025 · 209907c · 209907c
2 parents 79f3c8d + 7e51ac8
commit 209907c
Show file tree

Hide file tree

Showing 8 changed files with 278 additions and 165 deletions.
diff --git a/client/src/assets/illustrations/dog404.png b/client/src/assets/illustrations/dog404.png
diff --git a/client/src/layouts/Dashboard/DashHeader.tsx b/client/src/layouts/Dashboard/DashHeader.tsx
@@ -1,22 +1,28 @@
 import { Bell } from "@/assets/icons/bell";
-import Chevron from "@/assets/icons/left-chevron.png";
+import { LeftChevron } from "@/assets/icons/left-chevron";
+import { useNavigate } from "react-router-dom";
 
 export default function DashHeader() {
+	const navigate = useNavigate();
 	return (
 		<>
 			<header className="dashHeader">
 				<h1 className="hidden__mobile">Header</h1>
-				<a className=" dashHeader__back hidden__desktop" href="/">
-					<img src={Chevron} alt="Retour" className="dashHeader__back--icon" />
+				<button
+					type="button"
+					className="dashHeader__back hidden__desktop"
+					onClick={() => {
+						navigate(-1);
+					}}
+				>
+					<LeftChevron className="dashHeader__back--icon" />
 					Retour
-				</a>
+				</button>
 				<span className="dashHeader__right-corner">
 					<Bell className="dashHeader__notification" />
-					<img
-						className="dashHeader__avatar"
-						src="https://placehold.co/400"
-						alt="avatar de l'utilisateur"
-					/>
+					<a className="dashHeader__avatar" href="/dashboard/my-profile">
+						<img src="https://placehold.co/400" alt="avatar de l'utilisateur" />
+					</a>
 				</span>
 			</header>
 		</>

diff --git a/client/src/layouts/Dashboard/DashLayout.scss b/client/src/layouts/Dashboard/DashLayout.scss
@@ -1,15 +1,17 @@
 @import "@style";
 
 $dashHeaderHeight: 10vh;
-$dashSideBarWidth: 8vw;
+$dashSideBarWidth: 8vw; // maximum $dashHeaderHeight minimum $dashSideBarWidth
 $dashMobileSideBarHeight: 9vh;
 $dashInlinePadding: $minPaddingInline;
 
 // HEADER DESKTOP
 .dashHeader {
     height: $dashHeaderHeight;
     padding-inline-end: $dashInlinePadding;
-    padding-inline-start: calc(#{$dashSideBarWidth} + #{$dashInlinePadding}); // #{} shows the calculation in developer tools
+    padding-inline-start: calc(
+        #{$dashHeaderHeight} + #{$dashInlinePadding}
+    ); // #{} shows the calculation in developer tools
     position: fixed;
     top: 0;
     left: 0;
@@ -19,7 +21,6 @@ $dashInlinePadding: $minPaddingInline;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding-block: 2%;
 
     & h1 {
         color: $green-400;
@@ -36,7 +37,7 @@ $dashInlinePadding: $minPaddingInline;
         font-size: $m;
         cursor: pointer;
         &:hover {
-            color: $font-dark
+            color: $font-dark;
         }
 
         &--icon {
@@ -59,8 +60,11 @@ $dashInlinePadding: $minPaddingInline;
     }
 
     &__avatar {
-        border-radius: 50%;
-        padding-block: 1.2vh;
+        height: 100%;
+        & img {
+            border-radius: 50%;
+            padding-block: 1.2vh;
+        }
     }
 }
 
@@ -70,16 +74,19 @@ $dashInlinePadding: $minPaddingInline;
     top: 0;
     bottom: 0;
     left: 0;
-    width: $dashSideBarWidth;
+    width: $dashHeaderHeight;
     background-color: $blue-500;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    padding: $dashInlinePadding;
+    padding-inline: $dashInlinePadding;
+    padding-block: 1vh;
 
-    &__logo {
-        min-width: $dashSideBarWidth;
+    &__logo img {
+        padding: 5px;
+        min-width: $dashHeaderHeight;
+        max-height: calc(#{$dashHeaderHeight} - 1vh);
     }
 
     &__list {
@@ -90,7 +97,7 @@ $dashInlinePadding: $minPaddingInline;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        gap: 5vh;
+        gap: 4vh;
     }
 
     &__item {
@@ -116,7 +123,7 @@ $dashInlinePadding: $minPaddingInline;
     }
 
     &__icon {
-        height: calc(#{$dashSideBarWidth} / 3);
+        height: calc(5vw / 3);
         min-height: 30px;
         fill: $beige-300;
     }
@@ -135,12 +142,11 @@ $dashInlinePadding: $minPaddingInline;
 .dashLayout__content {
     padding: $dashInlinePadding;
     padding-block-start: $dashHeaderHeight;
-    padding-inline-start: calc(#{$dashSideBarWidth} + #{$dashInlinePadding});
+    padding-inline-start: calc(#{$dashHeaderHeight} + #{$dashInlinePadding});
 }
 
 // MEDIA QUERY
 @media screen and (max-width: $mobile) {
-
     // HEADER MOBILE
     .dashHeader {
         padding-inline: $dashInlinePadding;
@@ -149,13 +155,11 @@ $dashInlinePadding: $minPaddingInline;
     // SIDEBAR MOBILE (FOOTER)
     .dashSideBar {
         padding-inline: $dashInlinePadding;
-      //  padding-block: 5vh;
         height: $dashMobileSideBarHeight;
-       // height: calc($dashMobileSideBarHeight + 1vh);
         top: unset;
         right: 0;
         left: 0;
-        width: 100%;
+        min-width: 100%;
         justify-content: center;
 
         &__list {
@@ -169,4 +173,4 @@ $dashInlinePadding: $minPaddingInline;
         padding-block-end: calc(#{$dashMobileSideBarHeight} + 1vh);
         padding-inline: $dashInlinePadding;
     }
-}
+}
diff --git a/client/src/layouts/Dashboard/DashSideBar.tsx b/client/src/layouts/Dashboard/DashSideBar.tsx
@@ -2,50 +2,57 @@ import { useLocation } from "react-router-dom";
 import Logo from "@/assets/logo/beige/symbol/logo-pawplanner-symbol-beige.svg";
 
 import { Calendar } from "@/assets/icons/calendar";
-import { AddUser } from "@/assets/icons/add-user"; // TODO: Pas la bonne icône
-import { Checkmark } from "@/assets/icons/checkmark";
+import { Users } from "@/assets/icons/users";
+import { Search } from "@/assets/icons/search";
 import { Paw } from "@/assets/icons/paw";
 import { Exit } from "@/assets/icons/exit";
 
 import { useAuth } from "@/hooks/useAuth";
+import { useState } from "react";
 
-export default function DashSideBar() {
+const DashSideBar = () => {
 	const location = useLocation();
 	const { logout } = useAuth();
+	const [userRole] = useState<"trainer" | "owner">("trainer");
 
 	const isActive = (path: string) =>
 		location.pathname.includes(path)
 			? "dashSideBar__item dashSideBar__item--active"
 			: "dashSideBar__item";
 
+	const navItems = {
+		trainer: [
+			{ path: "planning", icon: <Calendar className="dashSideBar__icon" /> },
+			{ path: "dogs", icon: <Paw className="dashSideBar__icon" /> },
+			{ path: "customers", icon: <Users className="dashSideBar__icon" /> },
+		],
+		owner: [
+			{ path: "planning", icon: <Calendar className="dashSideBar__icon" /> },
+			{ path: "search", icon: <Search className="dashSideBar__icon" /> },
+			{ path: "my-dogs", icon: <Paw className="dashSideBar__icon" /> },
+		],
+	};
+
 	return (
 		<aside className="dashSideBar" aria-label="Navigation principale">
-			<a href="/" className="dashSideBar__logo hidden__mobile">
+			<a
+				href={`/dashboard/${userRole}`}
+				className="dashSideBar__logo hidden__mobile"
+			>
 				<img src={Logo} alt="Logo Paw Planner" />
 			</a>
 			<nav className="dashSideBar__nav">
 				<ul className="dashSideBar__list">
-					<li className={isActive("planning")}>
-						<a href="/dash/planning" className="dashSideBar__link">
-							<Calendar className="dashSideBar__icon" />
-						</a>
-					</li>
-					<li className={isActive("add-event")}>
-						<a href="/dash/add-event" className="dashSideBar__link">
-							<Checkmark className="dashSideBar__icon" />
-						</a>
-					</li>
-					{/* FIXME: designsystem n'est qu'un exemple en attendant les pages */}
-					<li className={isActive("designsystem")}>
-						<a href="/dash/designsystem" className="dashSideBar__link">
-							<Paw className="dashSideBar__icon" />
-						</a>
-					</li>
-					<li className={isActive("user")}>
-						<a href="/dash/user" className="dashSideBar__link">
-							<AddUser className="dashSideBar__icon" />
-						</a>
-					</li>
+					{navItems[userRole]?.map(({ path, icon }) => (
+						<li key={path} className={isActive(path)}>
+							<a
+								href={`/dashboard/${userRole}/${path}`}
+								className="dashSideBar__link"
+							>
+								{icon}
+							</a>
+						</li>
+					))}
 				</ul>
 			</nav>
 			<button
@@ -58,4 +65,6 @@ export default function DashSideBar() {
 			</button>
 		</aside>
 	);
-}
+};
+
+export default DashSideBar;