Add sidebar for projects

openubl/ui/client/src/app/context/ProjectContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState } from "react";
+
+interface IProjectContext {
+  projectId?: number | string;
+  setProjectId: (projectId: number | string) => void;
+}
+
+const ProjectContext = createContext<IProjectContext>({
+  projectId: undefined,
+  setProjectId: () => undefined,
+});
+
+interface IProjectContextProviderProps {
+  children: React.ReactNode;
+}
+
+export const ProjectContextProvider: React.FC<IProjectContextProviderProps> = ({
+  children,
+}: IProjectContextProviderProps) => {
+  const [projectid, setProjectId] = useState<number | string>();
+
+  return (
+    <ProjectContext.Provider
+      value={{
+        projectId: projectid,
+        setProjectId: (key: number | string) => setProjectId(key),
+      }}
+    >
+      {children}
+    </ProjectContext.Provider>
+  );
+};
+
+export const useProjectContext = (): IProjectContext =>
+  useContext(ProjectContext);

openubl/ui/client/src/app/layout/sidebar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NavLink, useParams } from "react-router-dom";
+import { NavLink, useMatch } from "react-router-dom";
 
 import {
   Nav,
@@ -11,17 +11,21 @@ import {
 import { css } from "@patternfly/react-styles";
 
 import { LayoutTheme } from "./layout-constants";
+import { useFetchProjectById } from "@app/queries/projects";
 
 const LINK_CLASS = "pf-v5-c-nav__link";
 const ACTIVE_LINK_CLASS = "pf-m-current";
 
 export const SidebarApp: React.FC = () => {
-  const params = useParams();
-console.log(params);
+  const routeParams = useMatch("/projects/:projectId/*");
+
+  let projectId = routeParams?.params.projectId;
+  let { project } = useFetchProjectById(projectId || "");
+
   const renderPageNav = () => {
     return (
       <Nav id="nav-sidebar" aria-label="Nav" theme={LayoutTheme}>
-        <NavList>
+        <NavGroup title="General">
           <li className="pf-v5-c-nav__item">
             <NavLink
               to="/"
@@ -32,13 +36,13 @@ console.log(params);
               Proyectos
             </NavLink>
           </li>
-        </NavList>
+        </NavGroup>
 
-        {params && (
-          <NavGroup title="Proyecto">
+        {projectId && (
+          <NavGroup title={project ? `Proyecto: ${project.name}` : "Proyecto"}>
             <li className="pf-v5-c-nav__item">
               <NavLink
-                to={`/projects/${"projectId"}/documents`}
+                to={`/projects/${projectId}/documents`}
                 className={({ isActive }) => {
                   return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
                 }}