diff --git a/app/components/NavigationBar.tsx b/app/components/NavigationBar.tsx new file mode 100644 index 00000000..decf7eb0 --- /dev/null +++ b/app/components/NavigationBar.tsx @@ -0,0 +1,437 @@ +"use client"; + +import Image from "next/image"; +import Link from "next/link"; +import { useSearchParams, useRouter } from "next/navigation"; + +import { useEffect, useRef, useState } from "react"; + +import { useSidebar } from "../context/sidebarCtx"; +import { useSwipeableDrawer } from "../hooks/useSwipeableDrawer"; +import MenuInformation from "../map/menuInformation"; + +import PillFilter from "./pillFilter"; + +type SubSidebarType = "buscar" | "campus" | "guías" | "menuInformation" | null; + +export default function Sidebar() { + const { isOpen, toggleSidebar, geocoder, setPlaces, selectedPlace, setSelectedPlace } = useSidebar(); + const searchParams = useSearchParams(); + const [activeSubSidebar, setActiveSubSidebar] = useState(null); + const refSearchContainer = useRef(null); + const router = useRouter(); + + const { handleTouchStart, handleTouchMove, handleTouchEnd } = useSwipeableDrawer(toggleSidebar); + + const toggleSubSidebar = (type: SubSidebarType) => { + setActiveSubSidebar((prev) => (prev === type ? null : type)); + }; + + const handleCollapsedClick = (type: SubSidebarType) => { + toggleSidebar(); + toggleSubSidebar(type); + }; + + const handleSearchSelection = () => { + toggleSidebar(); + setActiveSubSidebar(null); + }; + + const handleCampusClick = (campusName: string) => { + router.push(`/map?campus=${campusName}`); + toggleSidebar(); + setActiveSubSidebar(null); + }; + + // When a place is selected, make the MenuInformation a subsidebar. + useEffect(() => { + if (selectedPlace) { + setActiveSubSidebar("menuInformation"); + if (!isOpen) { + toggleSidebar(); + } + } + }, [selectedPlace]); + + // Add the geocoder to the search container when the "buscar" subsidebar is open + useEffect(() => { + if (refSearchContainer.current) geocoder.current?.addTo(refSearchContainer.current); + }, [activeSubSidebar, geocoder]); + + // Collapse the sidebar when a search result is selected + useEffect(() => { + let current: null | MapboxGeocoder = null; + if (activeSubSidebar === "buscar" && geocoder.current) { + geocoder.current?.on("result", handleSearchSelection); + current = geocoder.current; + } + return () => { + current?.off("result", handleSearchSelection); + }; + }, [activeSubSidebar, geocoder]); + + return ( + <> + {/* Pills for Mobile and Tablet */} + + {/* Collapsed Sidebar */} + {!isOpen && ( + + )} + + {/* Expanded Sidebar */} + + + ); +} diff --git a/app/components/darkModeSelector.tsx b/app/components/darkModeSelector.tsx deleted file mode 100644 index dfc80a96..00000000 --- a/app/components/darkModeSelector.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/* eslint-disable react-hooks/exhaustive-deps */ -"use client"; -import React, { useState, useEffect } from "react"; - -export default function DarkModeSelector() { - const [isDark, setIsDark] = useState(false); - const [isButtonDisabled, setIsButtonDisabled] = useState(false); - - const switchTheme = () => { - document.documentElement.classList.toggle("dark", !isDark); - setIsDark(!isDark); - localStorage.theme = !isDark ? "dark" : "light"; - - setIsButtonDisabled(true); - setTimeout(() => setIsButtonDisabled(false), 700); - }; - - const setSystemTheme = () => { - const savedTheme = localStorage.theme; - if (savedTheme === "dark" || (!savedTheme && window.matchMedia("(prefers-color-scheme: dark)").matches)) { - switchTheme(); - } - }; - - useEffect(() => { - setSystemTheme(); - }, []); - - return ( -
- -
- ); -} diff --git a/app/components/header.tsx b/app/components/header.tsx deleted file mode 100644 index b94a852b..00000000 --- a/app/components/header.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client"; - -import Link from "next/link"; -import { usePathname } from "next/navigation"; - -import { AlignJustify } from "lucide-react"; - -import { useSidebar } from "../context/sidebarCtx"; - -import DarkModeSelector from "./darkModeSelector"; - -export default function Header() { - const { toggleSidebar } = useSidebar(); - const pathname = usePathname(); - - const title = pathname === "/map" ? "UbíCate - Mapa UC" : "UbíCate UC"; - - return ( -
-
-
- -
- -
- -

{title}

- -
- - -
-
- ); -} diff --git a/app/components/landingSearch.tsx b/app/components/landingSearch.tsx index fe806f05..eea1a568 100644 --- a/app/components/landingSearch.tsx +++ b/app/components/landingSearch.tsx @@ -1,25 +1,28 @@ "use client"; -import { useRouter } from "next/navigation"; -import { useRef } from "react"; +import { useEffect, useRef } from "react"; import "../custom-landing-geocoder.css"; +import { useSidebar } from "../context/sidebarCtx"; import useGeocoder from "../hooks/useGeocoder"; export default function LandingSearch() { const geocoderContainer = useRef(null); + const fun = useRef(null); + const { refFunctionClickOnResult } = useSidebar(); - const router = useRouter(); + // Poner la funcion por defecto del serachbox de la sidebar + useEffect(() => { + refFunctionClickOnResult.current = null; + }, [refFunctionClickOnResult]); - useGeocoder(geocoderContainer, (place) => { - router.push("/map?place=" + place.properties.identifier); - }); + useGeocoder(geocoderContainer, fun); return (
); diff --git a/app/components/navegateToCampus.tsx b/app/components/navegateToCampus.tsx index 9dca35cf..9d3369c3 100644 --- a/app/components/navegateToCampus.tsx +++ b/app/components/navegateToCampus.tsx @@ -5,8 +5,11 @@ import { useEffect } from "react"; import { getCampusFromUserLocation } from "@/utils/getCampusBounds"; +import { useSidebar } from "../context/sidebarCtx"; + export default function NavegateToCampus() { const router = useRouter(); + const { refFunctionClickOnResult } = useSidebar(); useEffect(() => { const firstTime = sessionStorage.getItem("firstTime") ?? "true"; @@ -28,5 +31,9 @@ export default function NavegateToCampus() { } }, [router]); + useEffect(() => { + refFunctionClickOnResult.current = null; + }, []); + return null; } diff --git a/app/components/overlay.tsx b/app/components/overlay.tsx index 70ef257a..9fc42818 100644 --- a/app/components/overlay.tsx +++ b/app/components/overlay.tsx @@ -8,7 +8,7 @@ export default function Overlay() { return (