prod

src/app/[...slug]/page.tsx

@@ -49,7 +49,7 @@ export default async function Page({
     <App
       userComponent={<UserComponent user={user} />}
       projectListComponent={
-        <ProjectListComponent projectRepository={projectRepository} />
+        <ProjectListComponent projectRepository={projectRepository} projectName={projectName}/>
       }
       {...(projectName && projectName.length > 0
         ? {

src/lib/components/AppBarComponent.tsx

@@ -53,24 +53,19 @@ const AppBarComponent: React.FC<AppBarComponentProps> = ({
           justifyContent: "center",
         }}
       >
-        <Image
-          src={ShapeLogo}
-          alt="Shape logo"
-          style={{
-            marginLeft: "auto",
-          }}
-        />
-        <Box
-          sx={{
-            marginLeft: "auto",
-            marginRight: "10px",
-          }}
-        >
-          {versionSelectorComponent ?? <></>}
-          {openApiSpecificationsComponent ?? <></>}
-        </Box>
+        <Image src={ShapeLogo} alt="Shape logo" />
       </Box>
       <Divider />
+      <Box
+        sx={{
+          position: "fixed",
+          right: "15px",
+          marginRight: "10px",
+        }}
+      >
+        {versionSelectorComponent ?? <></>}
+        {openApiSpecificationsComponent ?? <></>}
+      </Box>
     </AppBar>
   );
 };

src/lib/components/ProjectComponent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Avatar, ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { Avatar, ListItem, ListItemButton, ListItemText, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { IProject } from "../projects/IProject";
 import { Folder, FolderOpen } from "@mui/icons-material";
@@ -14,15 +14,14 @@ import { IGitHubProject } from "../projects/IGitHubProject";
 
 interface ProjectComponentProps {
   project: IGitHubProject;
+  selectedProject: boolean;
 }
 
-const ProjectComponent: React.FC<ProjectComponentProps> = ({ project }) => {
-  const [selectedProject, setSelectedProject] = useState(false);
+const ProjectComponent: React.FC<ProjectComponentProps> = ({ project, selectedProject }) => {
   const router = useRouter();
 
   const selectProject = () => {
     router.push(`/${project.repository.replace("-openapi", "")}`);
-    setSelectedProject(true);
   };
   const theme = useTheme();
 
@@ -47,7 +46,16 @@ const ProjectComponent: React.FC<ProjectComponentProps> = ({ project }) => {
             sx={{ width: 35, height: 35, marginRight: "10px" }}
           />
         )}
-        <ListItemText primary={project.name} />
+        {selectedProject && 
+          <ListItemText 
+            primary={
+              <Typography style={{ color: theme.palette.secondary.light, fontWeight: 'bold' }}>
+                {project.name}
+              </Typography>
+            }
+          /> 
+        }
+        {!selectedProject && <ListItemText primary={project.name} /> }
       </ListItemButton>
     </ListItem>
   );

src/lib/components/ProjectListComponent.tsx

@@ -2,15 +2,20 @@ import { List, Divider } from "@mui/material";
 import ProjectComponent from "./ProjectComponent";
 import { IProjectRepository } from "../projects/IProjectRepository";
 import { IGitHubProject } from "../projects/IGitHubProject";
+import { getProject } from "../utils/UrlUtils";
 
 interface ProjectListComponentProps {
   projectRepository: IProjectRepository;
+  projectName?: string;
 }
 
 const ProjectListComponent: React.FC<ProjectListComponentProps> = async ({
   projectRepository,
+  projectName
 }) => {
   const projects = (await projectRepository.getProjects()) as IGitHubProject[];
+  console.log(projects, projects)
+  console.log(projectName, projectName)
   // projects.push(...projects);
   // projects.push(...projects);
   // projects.push(...projects);
@@ -32,7 +37,7 @@ const ProjectListComponent: React.FC<ProjectListComponentProps> = async ({
     >
       {projects.map((project, index) => (
         <div key={index}>
-          <ProjectComponent project={project} />
+          <ProjectComponent project={project} selectedProject={projectName == project.repository} />
           {index < projects.length - 1 && <Divider />}
         </div>
       ))}