From 4e105fb406522478e3113a782cc1a4a953ee353c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?= Date: Mon, 23 Oct 2023 10:40:44 +0200 Subject: [PATCH] Layout, sidebar and navigation --- client/public/logo.svg | 9 +++++ client/src/app/(app)/layout-providers.tsx | 9 +++++ client/src/app/(app)/layout.tsx | 33 ++++++++++++++++ client/src/app/{ => (app)}/page.tsx | 0 client/src/app/(app)/projects/page.tsx | 5 +++ client/src/app/layout-providers.tsx | 6 +-- client/src/app/layout.tsx | 6 ++- client/src/containers/home/index.tsx | 22 ++--------- .../map-settings/basemaps/index.tsx | 2 + .../map-settings/basemaps/item/index.tsx | 2 + .../map-settings/boundaries/index.tsx | 2 + .../{home => }/map-settings/index.tsx | 2 + .../{home => }/map-settings/labels/index.tsx | 2 + .../{home => }/map-settings/manager/index.tsx | 2 + .../{home => }/map-settings/roads/index.tsx | 2 + client/src/containers/navigation/index.tsx | 34 ++++++++++++++++ client/src/containers/projects/index.tsx | 13 +++++++ client/src/containers/sidebar/index.tsx | 39 +++++++++++++++++++ 18 files changed, 165 insertions(+), 25 deletions(-) create mode 100644 client/public/logo.svg create mode 100644 client/src/app/(app)/layout-providers.tsx create mode 100644 client/src/app/(app)/layout.tsx rename client/src/app/{ => (app)}/page.tsx (100%) create mode 100644 client/src/app/(app)/projects/page.tsx rename client/src/containers/{home => }/map-settings/basemaps/index.tsx (96%) rename client/src/containers/{home => }/map-settings/basemaps/item/index.tsx (99%) rename client/src/containers/{home => }/map-settings/boundaries/index.tsx (98%) rename client/src/containers/{home => }/map-settings/index.tsx (97%) rename client/src/containers/{home => }/map-settings/labels/index.tsx (98%) rename client/src/containers/{home => }/map-settings/manager/index.tsx (99%) rename client/src/containers/{home => }/map-settings/roads/index.tsx (98%) create mode 100644 client/src/containers/navigation/index.tsx create mode 100644 client/src/containers/projects/index.tsx create mode 100644 client/src/containers/sidebar/index.tsx diff --git a/client/public/logo.svg b/client/public/logo.svg new file mode 100644 index 00000000..84570db0 --- /dev/null +++ b/client/public/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/app/(app)/layout-providers.tsx b/client/src/app/(app)/layout-providers.tsx new file mode 100644 index 00000000..59e859c7 --- /dev/null +++ b/client/src/app/(app)/layout-providers.tsx @@ -0,0 +1,9 @@ +"use client"; + +import { PropsWithChildren } from "react"; + +import { MapProvider } from "react-map-gl"; + +export default function LayoutProviders({ children }: PropsWithChildren) { + return {children}; +} diff --git a/client/src/app/(app)/layout.tsx b/client/src/app/(app)/layout.tsx new file mode 100644 index 00000000..acbb60e2 --- /dev/null +++ b/client/src/app/(app)/layout.tsx @@ -0,0 +1,33 @@ +import { PropsWithChildren } from "react"; + +import MapSettingsManagerPanel from "@/containers/map-settings"; +import MapSettingsManager from "@/containers/map-settings/manager"; +import Navigation from "@/containers/navigation"; +import Sidebar from "@/containers/sidebar"; + +import Map from "@/components/map"; +import Controls from "@/components/map/controls"; +import SettingsControl from "@/components/map/controls/settings"; +import ZoomControl from "@/components/map/controls/zoom"; + +import LayoutProviders from "./layout-providers"; + +export default async function AppLayout({ children }: PropsWithChildren) { + return ( + +
+ + {children} + + + + + + + + + +
+ + ); +} diff --git a/client/src/app/page.tsx b/client/src/app/(app)/page.tsx similarity index 100% rename from client/src/app/page.tsx rename to client/src/app/(app)/page.tsx diff --git a/client/src/app/(app)/projects/page.tsx b/client/src/app/(app)/projects/page.tsx new file mode 100644 index 00000000..8c7b5247 --- /dev/null +++ b/client/src/app/(app)/projects/page.tsx @@ -0,0 +1,5 @@ +import Projects from "@/containers/projects"; + +export default function ProjectsPage() { + return ; +} diff --git a/client/src/app/layout-providers.tsx b/client/src/app/layout-providers.tsx index 0de0afd2..a977c174 100644 --- a/client/src/app/layout-providers.tsx +++ b/client/src/app/layout-providers.tsx @@ -2,8 +2,6 @@ import { PropsWithChildren, useState } from "react"; -import { MapProvider } from "react-map-gl"; - import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { TooltipProvider } from "@/components/ui/tooltip"; @@ -13,9 +11,7 @@ export default function LayoutProviders({ children }: PropsWithChildren) { return ( - - {children} - + {children} ); } diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx index 19c02259..583845a8 100644 --- a/client/src/app/layout.tsx +++ b/client/src/app/layout.tsx @@ -1,11 +1,13 @@ import "./globals.css"; import "mapbox-gl/dist/mapbox-gl.css"; +import { PropsWithChildren } from "react"; + import type { Metadata } from "next"; import { Inter } from "next/font/google"; -import LayoutProviders from "@/app/layout-providers"; +import LayoutProviders from "./layout-providers"; const inter = Inter({ subsets: ["latin"] }); @@ -14,7 +16,7 @@ export const metadata: Metadata = { description: "Generated by create next app", }; -export default async function RootLayout({ children }: { children: React.ReactNode }) { +export default async function RootLayout({ children }: PropsWithChildren) { return ( diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx index 670919ed..84aa275f 100644 --- a/client/src/containers/home/index.tsx +++ b/client/src/containers/home/index.tsx @@ -1,25 +1,11 @@ "use client"; -import MapSettingsManagerPanel from "@/containers/home/map-settings"; -import MapSettingsManager from "@/containers/home/map-settings/manager"; - -import Map from "@/components/map"; -import Controls from "@/components/map/controls"; -import SettingsControl from "@/components/map/controls/settings"; -import ZoomControl from "@/components/map/controls/zoom"; - const Home = (): JSX.Element => { return ( -
- - - - - - - - - +
+
+

Explore datasets

+
); }; diff --git a/client/src/containers/home/map-settings/basemaps/index.tsx b/client/src/containers/map-settings/basemaps/index.tsx similarity index 96% rename from client/src/containers/home/map-settings/basemaps/index.tsx rename to client/src/containers/map-settings/basemaps/index.tsx index b7a7c62a..c0c49adc 100644 --- a/client/src/containers/home/map-settings/basemaps/index.tsx +++ b/client/src/containers/map-settings/basemaps/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import { BASEMAPS } from "@/components/map/constants"; import BasemapItem from "./item"; diff --git a/client/src/containers/home/map-settings/basemaps/item/index.tsx b/client/src/containers/map-settings/basemaps/item/index.tsx similarity index 99% rename from client/src/containers/home/map-settings/basemaps/item/index.tsx rename to client/src/containers/map-settings/basemaps/item/index.tsx index 0fda8560..653ec440 100644 --- a/client/src/containers/home/map-settings/basemaps/item/index.tsx +++ b/client/src/containers/map-settings/basemaps/item/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import { useCallback } from "react"; import Image from "next/image"; diff --git a/client/src/containers/home/map-settings/boundaries/index.tsx b/client/src/containers/map-settings/boundaries/index.tsx similarity index 98% rename from client/src/containers/home/map-settings/boundaries/index.tsx rename to client/src/containers/map-settings/boundaries/index.tsx index 7ad587f8..73369c8c 100644 --- a/client/src/containers/home/map-settings/boundaries/index.tsx +++ b/client/src/containers/map-settings/boundaries/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import { useCallback } from "react"; import { useSyncMapSettings } from "@/app/url-query-params"; diff --git a/client/src/containers/home/map-settings/index.tsx b/client/src/containers/map-settings/index.tsx similarity index 97% rename from client/src/containers/home/map-settings/index.tsx rename to client/src/containers/map-settings/index.tsx index 40f235ff..d97ebcfe 100644 --- a/client/src/containers/home/map-settings/index.tsx +++ b/client/src/containers/map-settings/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import Basemaps from "./basemaps"; import Boundaries from "./boundaries"; import Labels from "./labels"; diff --git a/client/src/containers/home/map-settings/labels/index.tsx b/client/src/containers/map-settings/labels/index.tsx similarity index 98% rename from client/src/containers/home/map-settings/labels/index.tsx rename to client/src/containers/map-settings/labels/index.tsx index 43ee6108..022d213c 100644 --- a/client/src/containers/home/map-settings/labels/index.tsx +++ b/client/src/containers/map-settings/labels/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import { useCallback } from "react"; import { useSyncMapSettings } from "@/app/url-query-params"; diff --git a/client/src/containers/home/map-settings/manager/index.tsx b/client/src/containers/map-settings/manager/index.tsx similarity index 99% rename from client/src/containers/home/map-settings/manager/index.tsx rename to client/src/containers/map-settings/manager/index.tsx index 60eeb1de..5efec5d0 100644 --- a/client/src/containers/home/map-settings/manager/index.tsx +++ b/client/src/containers/map-settings/manager/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import { useCallback, useEffect } from "react"; import { useMap } from "react-map-gl"; diff --git a/client/src/containers/home/map-settings/roads/index.tsx b/client/src/containers/map-settings/roads/index.tsx similarity index 98% rename from client/src/containers/home/map-settings/roads/index.tsx rename to client/src/containers/map-settings/roads/index.tsx index a2e807b4..76a79d48 100644 --- a/client/src/containers/home/map-settings/roads/index.tsx +++ b/client/src/containers/map-settings/roads/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import { useCallback } from "react"; import { useSyncMapSettings } from "@/app/url-query-params"; diff --git a/client/src/containers/navigation/index.tsx b/client/src/containers/navigation/index.tsx new file mode 100644 index 00000000..5cb6bc68 --- /dev/null +++ b/client/src/containers/navigation/index.tsx @@ -0,0 +1,34 @@ +"use client"; + +import Image from "next/image"; +import Link from "next/link"; + +import { LuList, LuMap } from "react-icons/lu"; + +const Navigation = (): JSX.Element => { + return ( + + ); +}; + +export default Navigation; diff --git a/client/src/containers/projects/index.tsx b/client/src/containers/projects/index.tsx new file mode 100644 index 00000000..20ee4083 --- /dev/null +++ b/client/src/containers/projects/index.tsx @@ -0,0 +1,13 @@ +"use client"; + +const Projects = (): JSX.Element => { + return ( +
+
+

Projects

+
+
+ ); +}; + +export default Projects; diff --git a/client/src/containers/sidebar/index.tsx b/client/src/containers/sidebar/index.tsx new file mode 100644 index 00000000..cb93dd54 --- /dev/null +++ b/client/src/containers/sidebar/index.tsx @@ -0,0 +1,39 @@ +"use client"; + +import { PropsWithChildren, useState } from "react"; + +import { LuChevronLeft } from "react-icons/lu"; + +import { cn } from "@/lib/classnames"; + +const Sidebar = ({ children }: PropsWithChildren): JSX.Element => { + const [open, setOpen] = useState(true); + + const toggleOpen = () => setOpen((prev) => !prev); + + return ( + + ); +}; + +export default Sidebar;