feat: responsive

src/app/(app)/evenements/page.tsx

@@ -6,7 +6,7 @@ const Event = () => {
   return (
     <>
       <TopBar />
-      <main>
+      <main className="container">
         <section className="flex flex-col gap-7 px-5 pb-40">
           <Suspense fallback={<div>Loading...</div>}>
             <EventsFeed />

src/app/(app)/layout.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import MobileNav from "@/components/MobileNav";
+import Nav from "@/components/Nav";
 import { ReactParallaxProvider } from "@/providers/Providers";
 
 export default function AppLayout({
@@ -10,7 +10,7 @@ export default function AppLayout({
   return (
     <ReactParallaxProvider>
       {children}
-      <MobileNav />
+      <Nav />
     </ReactParallaxProvider>
   );
 }

src/app/(app)/parcours/page.tsx

@@ -8,8 +8,8 @@ const Parcours = () => {
   return (
     <>
       <TopBar />
-      <main>
-        <section className="flex flex-col gap-7 px-5 pb-40">
+      <main className="container">
+        <section className="grid grid-cols-1 gap-7 pb-40 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           <Suspense fallback={<div>Loading...</div>}>
             <JourneysFeed />
           </Suspense>

src/app/(app)/profil/evenements/page.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import TopBar from "@/components/TopBar";
+
+const Event = () => {
+  return (
+    <>
+      <TopBar />
+      <main>
+        <h1>Mes évènements</h1>
+      </main>
+    </>
+  );
+};
+
+export default Event;

src/app/(app)/profil/parcours/page.tsx

@@ -5,7 +5,7 @@ const Parcours = () => {
   return (
     <>
       <TopBar />
-      <main>Parcours</main>
+      <main>Mes parcours</main>
     </>
   );
 };

src/app/globals.css

@@ -15,7 +15,7 @@
     --camel: #a3987e;
     --cadetblue: #65878e;
     --cadetblue-600: #a3b7bb;
-    --gray: #191919;
+    --gray: #252525;
     --light-gray: #534e48;
     --radius: 6px;
 
@@ -65,3 +65,9 @@
     @apply bg-background text-foreground;
   }
 }
+
+@media (min-width: 640px) {
+  .container {
+    @apply px-8;
+  }
+}

src/components/AddButton.tsx

@@ -14,7 +14,7 @@ const AddButton = ({ action }: AddButtonProps) => {
       onClick={() => {
         action === "journey" ? showModal() : showModal();
       }}
-      className="fixed bottom-24 right-[20px] cursor-pointer rounded-lg bg-orange p-4 shadow-lg"
+      className="fixed bottom-24 right-5 cursor-pointer rounded-lg bg-orange p-4 shadow-lg sm:bottom-7 2xl:right-[calc(50%_-_668px)]"
     >
       <Icons.plus color="#fff" />
     </div>

src/components/EventAccordion.tsx

@@ -60,9 +60,9 @@ const EventAccordion: React.FC<EventAccordionProps> = ({ events }) => {
           <AccordionTrigger className="py-2 text-lg font-medium">
             {formatted}
           </AccordionTrigger>
-          <AccordionContent className="space-y-4">
+          <AccordionContent className="grid grid-cols-1 gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             {groupedEvents[original].map((event) => (
-              <div key={event.id} className=" rounded-lg border p-4 shadow">
+              <div key={event.id} className="flex flex-col rounded-lg bg-gray">
                 <Link href={`/evenements/${event.id}`}>
                   <Image
                     src={`${event.image}200`}

src/components/JourneyCard.tsx

@@ -46,7 +46,10 @@ const JourneyCard = ({ journey }: JourneyCardProps) => {
   }
 
   return (
-    <Link href={`/parcours/${journey.id}`} className="rounded-lg bg-gray">
+    <Link
+      href={`/parcours/${journey.id}`}
+      className="flex flex-col rounded-lg bg-gray"
+    >
       <div className="relative">
         <div className="absolute left-4 flex gap-[6px]">
           <div className="flex items-center rounded-b-md bg-white px-2 py-[6px]">
@@ -64,15 +67,15 @@ const JourneyCard = ({ journey }: JourneyCardProps) => {
           width={500}
           height={500}
           src="/img/min-temp.webp"
-          alt=""
-          className="rounded-t-lg"
+          alt="journey image"
+          className="h-44 w-full rounded-t-lg object-cover"
         />
       </div>
-      <div className="flex flex-col p-4">
+      <div className="flex flex-1 flex-col p-4">
         <h2 className="font-semibold">{journey.title}</h2>
         <Rating rating={averageRate} ratingCount={journey.comments.length} />
-        <p className="text-sm">{journey.description}</p>
-        <div className="mt-4 flex items-center justify-between">
+        <p className="mb-4 text-sm">{journey.description}</p>
+        <div className="mt-auto flex items-center justify-between">
           <div className="flex items-center gap-1 text-orange">
             <Icons.mapPin fill="#d8552b" />
             <p className="text-sm font-medium">{journey.steps[0].city}</p>

src/components/MobileNav.tsx → src/components/Nav.tsx

@@ -4,11 +4,11 @@ import React from "react";
 import { Icons } from "./Icons";
 import { usePathname } from "next/navigation";
 
-const MobileNav = () => {
+const Nav = () => {
   const currentPath = usePathname();
   const isMainPage = currentPath === "/" || currentPath === "";
   return (
-    <nav className="fixed inset-x-5 bottom-5 flex  items-end justify-center rounded-xl border-2 border-orange bg-background p-2">
+    <nav className="fixed inset-x-5 bottom-5 flex  items-end justify-center rounded-xl border-2 border-orange bg-background p-2 sm:hidden">
       <Link
         href="/parcours"
         className="flex h-10  flex-1 items-center justify-center "
@@ -48,4 +48,4 @@ const MobileNav = () => {
   );
 };
 
-export default MobileNav;
+export default Nav;

src/components/TopBar.tsx

@@ -1,14 +1,47 @@
+"use client";
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const TopBar = () => {
+  const currentPath = usePathname();
+  const isMainPage = currentPath === "/" || currentPath === "";
   // todo: retrieve user data from session and display its name and profile picture
   return (
     <>
-      <header className="flex items-center justify-between px-5 py-3">
-        <div className="size-14 rounded-full bg-slate-300"></div>
-        <Link className="flex flex-col items-center" href="/profil">
+      <header className="container flex items-center px-5 py-3">
+        <div className="mr-auto size-14 rounded-full bg-slate-300"></div>
+        <nav className="hidden gap-5 sm:flex">
+          <Link
+            href="/"
+            className={`mx-auto flex h-10 flex-1 items-center justify-center font-semibold uppercase ${isMainPage ? "text-orange" : "text-foreground"} `}
+          >
+            Accueil
+          </Link>
+          <Link
+            href="/parcours"
+            className={`flex h-10 flex-1 items-center justify-center font-semibold uppercase ${
+              currentPath.includes("/parcours")
+                ? "text-orange"
+                : "text-foreground"
+            }`}
+          >
+            Parcours
+          </Link>
+
+          <Link
+            href="/evenements"
+            className={`flex h-10 flex-1 items-center justify-center font-semibold uppercase ${
+              currentPath.includes("/evenements")
+                ? "text-orange"
+                : "text-foreground"
+            }`}
+          >
+            Évènements
+          </Link>
+        </nav>
+        <Link className="ml-7 flex flex-col items-center" href="/profil">
           <Image
             src="/img/min-shadavatar.webp"
             alt="logo"

tailwind.config.ts

@@ -17,11 +17,11 @@ const config = {
       md: "768px",
       lg: "1024px",
       xl: "1280px",
-      "2xl": "1536px",
+      "2xl": "1420px",
     },
     container: {
       center: true,
-      padding: "2rem",
+      padding: "1.25rem",
       screens: {
         "2xl": "1400px",
       },