Layout, sidebar and navigation

Vizzuality · Oct 23, 2023 · 4e105fb · 4e105fb
1 parent 81167a6
commit 4e105fb
Show file tree

Hide file tree

Showing 18 changed files with 165 additions and 25 deletions.
diff --git a/client/public/logo.svg b/client/public/logo.svg
diff --git a/client/src/app/(app)/layout-providers.tsx 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 <MapProvider>{children}</MapProvider>;
+}
diff --git a/client/src/app/(app)/layout.tsx 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 (
+    <LayoutProviders>
+      <main className="flex h-[100svh] w-full justify-between">
+        <Navigation />
+        <Sidebar>{children}</Sidebar>
+        <Map>
+          <Controls className="absolute right-6 top-4">
+            <ZoomControl />
+            <SettingsControl>
+              <MapSettingsManagerPanel />
+            </SettingsControl>
+          </Controls>
+          <MapSettingsManager />
+        </Map>
+      </main>
+    </LayoutProviders>
+  );
+}
diff --git a/client/src/app/page.tsx → client/src/app/(app)/page.tsx b/client/src/app/page.tsx → client/src/app/(app)/page.tsx
diff --git a/client/src/app/(app)/projects/page.tsx b/client/src/app/(app)/projects/page.tsx
@@ -0,0 +1,5 @@
+import Projects from "@/containers/projects";
+
+export default function ProjectsPage() {
+  return <Projects />;
+}
diff --git 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 (
     <QueryClientProvider client={queryClient}>
-      <MapProvider>
-        <TooltipProvider>{children}</TooltipProvider>
-      </MapProvider>
+      <TooltipProvider>{children}</TooltipProvider>
     </QueryClientProvider>
   );
 }
diff --git 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 (
     <LayoutProviders>
       <html lang="en">

diff --git 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 (
-    <div className="h-screen w-full">
-      <Map>
-        <Controls className="absolute right-6 top-4">
-          <ZoomControl />
-          <SettingsControl>
-            <MapSettingsManagerPanel />
-          </SettingsControl>
-        </Controls>
-        <MapSettingsManager />
-      </Map>
+    <div className="flex h-full overflow-auto">
+      <div className="p-5">
+        <h1 className="text-3xl">Explore datasets</h1>
+      </div>
     </div>
   );
 };

diff --git a/...ners/home/map-settings/basemaps/index.tsx → ...ontainers/map-settings/basemaps/index.tsx b/...ners/home/map-settings/basemaps/index.tsx → ...ontainers/map-settings/basemaps/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { BASEMAPS } from "@/components/map/constants";
 
 import BasemapItem from "./item";

diff --git a/...home/map-settings/basemaps/item/index.tsx → ...ners/map-settings/basemaps/item/index.tsx b/...home/map-settings/basemaps/item/index.tsx → ...ners/map-settings/basemaps/item/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback } from "react";
 
 import Image from "next/image";

diff --git a/...rs/home/map-settings/boundaries/index.tsx → ...tainers/map-settings/boundaries/index.tsx b/...rs/home/map-settings/boundaries/index.tsx → ...tainers/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/...rc/containers/home/map-settings/index.tsx → client/src/containers/map-settings/index.tsx b/...rc/containers/home/map-settings/index.tsx → 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/...ainers/home/map-settings/labels/index.tsx → .../containers/map-settings/labels/index.tsx b/...ainers/home/map-settings/labels/index.tsx → .../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/...iners/home/map-settings/manager/index.tsx → ...containers/map-settings/manager/index.tsx b/...iners/home/map-settings/manager/index.tsx → ...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/...tainers/home/map-settings/roads/index.tsx → ...c/containers/map-settings/roads/index.tsx b/...tainers/home/map-settings/roads/index.tsx → ...c/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
@@ -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 (
+    <nav className="relative z-20 block h-full w-20 shrink-0 border-r-2 border-gray-300/20 bg-white">
+      <ul className="w-full text-xs">
+        <li className="py-5 text-center">
+          <Link className="flex flex-col items-center justify-center gap-1" href="/">
+            <Image alt="CCSA Logo" width={72} height={59} src="/logo.svg" />
+          </Link>
+        </li>
+        <li className="py-5 text-center">
+          <Link className="flex flex-col items-center justify-center gap-1" href="/">
+            <LuMap className="h-6 w-6" />
+            Explore datasets
+          </Link>
+        </li>
+        <li className="py-5 text-center">
+          <Link className="flex flex-col items-center justify-center gap-1" href="/projects">
+            <LuList className="h-6 w-6" />
+            Projects
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navigation;
diff --git a/client/src/containers/projects/index.tsx b/client/src/containers/projects/index.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+const Projects = (): JSX.Element => {
+  return (
+    <div className="flex h-full overflow-auto">
+      <div className="p-5">
+        <h1 className="text-3xl">Projects</h1>
+      </div>
+    </div>
+  );
+};
+
+export default Projects;
diff --git a/client/src/containers/sidebar/index.tsx 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 (
+    <aside
+      className={cn({
+        "absolute left-20 top-0 z-10 h-full w-full max-w-md bg-white transition-transform duration-300 ease-in-out":
+          true,
+        "-translate-x-full": !open,
+      })}
+    >
+      {children}
+
+      <button
+        className="absolute left-full top-0 rounded-r-lg bg-white py-2.5"
+        onClick={toggleOpen}
+      >
+        <LuChevronLeft
+          className={cn({
+            "h-5 w-5 transition-transform delay-300 duration-300 ease-in-out": true,
+            "rotate-180": !open,
+          })}
+        />
+      </button>
+    </aside>
+  );
+};
+
+export default Sidebar;