added resizing navbar

johnmistica0 · Nov 18, 2023 · 086d8bb · 086d8bb
1 parent bbfc58d
commit 086d8bb
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 24 deletions.
diff --git a/src/app/explore/page.tsx b/src/app/explore/page.tsx
@@ -3,16 +3,19 @@
 import 'mapbox-gl/dist/mapbox-gl.css';
 import MapContainer from "@/components/explore/MapContainer";
 import CatchFeed from '@/components/explore/CatchFeed';
+import { useRef, useState } from 'react';
 
 export default function Home() {
+  const [open, setOpen] = useState(true)
+  const mapContainerRef = useRef(null);
 
   return (
-    <main className="grid grid-cols-4 h-[calc(100vh-64px)]">
-      <div className="col-span-1">
-        <CatchFeed />
+    <main className="flex flex-row h-[calc(100vh-64px)]">
+      <div className={`${open ? 'w-1/4' : 'w-[5%]'} transition-height duration-500 ease-in-out`}>
+        <CatchFeed open={open} setOpen={setOpen}/>
       </div>
-      <div className="col-span-3 relative">
-        <MapContainer />
+      <div ref={mapContainerRef} className={`${open ? 'w-3/4' : 'w-[95%]'} transition-height duration-500 ease-in-out relative`}>
+        <MapContainer mapContainerRef={mapContainerRef}/>
       </div>
     </main>
   );

diff --git a/src/components/explore/CatchCard.tsx b/src/components/explore/CatchCard.tsx
@@ -46,9 +46,13 @@ export default function CatchCard({ data }: CatchCardProps) {
           </div>
         </div>
       </CardHeader>
-      <CardContent>
-        <div className="space-y-3">
-          <Image src={data.image} alt='fish' className="rounded-md" priority={true} />
+      <CardContent className="w-full">
+        <div className="space-y-3 w-full">
+          <span className="flex flex-col items-center relative w-full h-64">
+            <Image src={data.image} alt='fish' className="w-full h-full absolute rounded-md" priority={true} />
+            <div className="backdrop-blur bg-black/10 w-full h-full absolute rounded-md" />
+            <Image src={data.image} alt='fish' className="w-auto h-full z-10" priority={true} />
+          </span>
           <span className="flex flex-row justify-between items-center">
             <h1 className="text-lg font-semibold">{data.species}</h1>
             <Image src={data.icon} alt='fish' className="h-auto w-[50px]" priority={false} />

diff --git a/src/components/explore/CatchFeed.tsx b/src/components/explore/CatchFeed.tsx
@@ -1,21 +1,27 @@
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { ScrollArea } from "../ui/scroll-area";
 import CatchCard from "./CatchCard";
 import { FaFilter } from "react-icons/fa";
 import { ImShrink2 } from "react-icons/im";
 import { BiArrowToLeft } from "react-icons/bi";
+import { FaCirclePlus } from "react-icons/fa6";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 import { cn } from "@/lib/utils";
 import { useMapContext } from "../context/MapContext";
 import { CatchData } from "../context/MapContext.types";
 
-export default function CatchFeed() {
-  const { markerData } = useMapContext()
+export default function CatchFeed({ open, setOpen }: any) {
+  const { markerData, mapRef } = useMapContext()
+
+  const handleMinimize = () => {
+    setOpen((prev: any) => !prev)
+    mapRef.current?.resize()
+  }
 
   return (
-    <div className="flex flex-col p-5 space-y-3 h-full items-center">
-      <div className="flex flex-row justify-between items-center w-full">
+    <div className="flex flex-col p-5 h-full items-center">
+      {open ? <><div className="flex flex-row justify-between items-center w-full">
         <p className="text-lg font-semibold">Catches Near You</p>
         <span className="flex flex-row items-center h-full space-x-1">
           <TooltipProvider delayDuration={150}>
@@ -45,7 +51,7 @@ export default function CatchFeed() {
           <TooltipProvider delayDuration={150}>
             <Tooltip>
               <TooltipTrigger>
-                <span className={cn("rounded-full", buttonVariants({ variant: "ghost", size: "icon" }))}>
+                <span className={cn("rounded-full", buttonVariants({ variant: "ghost", size: "icon" }))} onClick={handleMinimize}>
                   <BiArrowToLeft className="w-6 h-6" />
                 </span>
               </TooltipTrigger>
@@ -56,13 +62,30 @@ export default function CatchFeed() {
           </TooltipProvider>
         </span>
       </div>
-      <span className="flex flex-grow h-96">
-        <ScrollArea className="rounded-md h-full w-full">
-          {markerData.map((data: CatchData) => {
-            return <CatchCard key={data.id} data={data}/>
-          })}
-        </ScrollArea>
-      </span>
+        <span className="flex flex-grow h-96 mt-3 w-full">
+          <ScrollArea className="rounded-md h-full w-full">
+            {markerData.map((data: CatchData) => {
+              return <CatchCard key={data.id} data={data} />
+            })}
+          </ScrollArea>
+        </span>
+        <span className="mt-5">
+          <Button variant="outline">
+            Create New Catch
+            <FaCirclePlus className="ml-2 w-4 h-4" />
+          </Button>
+        </span></> : <TooltipProvider delayDuration={150}>
+        <Tooltip>
+          <TooltipTrigger>
+            <span className={cn("rounded-full rotate-180", buttonVariants({ variant: "ghost", size: "icon" }))} onClick={handleMinimize}>
+              <BiArrowToLeft className="w-6 h-6" />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" align="start" alignOffset={-25}>
+            <p>Expand</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>}
     </div>
   )
 }
diff --git a/src/components/explore/MapContainer.tsx b/src/components/explore/MapContainer.tsx
@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/button";
-import { LocateFixed } from "lucide-react";
 import { Ref, useEffect, useRef, useState } from "react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getMapStyle, useMapContext } from "@/components/context/MapContext";
@@ -11,7 +10,7 @@ import { FaLocationArrow } from "react-icons/fa";
 import { useTheme } from "next-themes";
 import { CatchData } from "../context/MapContext.types";
 
-export default function MapContainer() {
+export default function MapContainer({ mapContainerRef }: any) {
   const { theme } = useTheme()
   const { mapPosition, userLocation, mapStyle, setMapStyle, mapRef, markerData } = useMapContext()
 
@@ -28,13 +27,26 @@ export default function MapContainer() {
     }
   }
 
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+    if (mapContainerRef.current) {
+      resizeObserver.observe(mapContainerRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [mapContainerRef]);
+
   const renderMarkers = () => markerData.map((data: CatchData) => {
-    return <CatchMarker key={data.id} location={{ lat: data.coordinates.lat, lng: data.coordinates.lng }}/>
+    return <CatchMarker key={data.id} location={{ lat: data.coordinates.lat, lng: data.coordinates.lng }} />
   })
 
   return (
     <>
       <Map
+        style={{ width: '100%', height: '100%' }}
         reuseMaps
         ref={mapRef as Ref<MapRef>}
         mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_KEY}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -16,6 +16,9 @@ module.exports = {
       },
     },
     extend: {
+      transitionProperty: {
+        'width': 'width',
+      },
       keyframes: {
         "accordion-down": {
           from: { height: 0 },