revised the popup and burger menu (#122)

Author: Dinoxh

my-app/src/model.js

@@ -278,13 +278,7 @@ export const model = {
     setSelectedCourse(course) {
         this.selectedCourse = course;
     },
-    setSidebarState(state) {
-        this.sidebarIsOpen = state;
-    },
 
-    getSidebarState() {
-        return this.sidebarIsOpen;
-    },
 
     toggleSidebarIsOpen() {
         this.sidebarIsOpen = !this.sidebarIsOpen;

my-app/src/pages/App.jsx

@@ -18,7 +18,7 @@ function MainAppLayout({ model }) {
 			/* The sidebar styling(under the menu)*/
 		<div className=" flex h-screen w-screen bg-[#6246a8] ">
 			{	/* If sidebar is open, set length to 400px, else it should not be visible  */}
-			<div className={`${sidebarIsOpen ? 'w-[400px]' : 'w-0'}`}>
+			<div className={`${sidebarIsOpen ? 'w-[400px]' : ''}`}>
 				<Menu
 					width={400}
 					isOpen={model.sidebarIsOpen}
@@ -30,11 +30,12 @@ function MainAppLayout({ model }) {
 							zIndex: '10'
 						},
 						bmBurgerButton: {
-							position: 'fixed',
+							position: 'absolute',
 							top: '20px',
 							left: '20px',
 							width: '36px',
-							height: '30px'
+							height: '30px',
+							zIndex: '20'
 						},
 					}}
 					customBurgerIcon={ <img src="https://img.icons8.com/ios-filled/50/ffffff/menu-2.png" /> }

my-app/src/presenters/ListViewPresenter.jsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef } from 'react';
 import ListView from "../views/ListView.jsx";
 import CoursePagePopup from '../views/Components/CoursePagePopup.jsx';
 import PrerequisitePresenter from './PrerequisitePresenter.jsx';
-import {ReviewPresenter} from "../presenters/ReviewPresenter.jsx"
+import {ReviewPresenter} from "./ReviewPresenter.jsx"
 import {syncScrollPositionToFirebase} from "../../firebase.js"
 
 const ListViewPresenter = observer(({ model }) => {
@@ -150,11 +150,13 @@ const ListViewPresenter = observer(({ model }) => {
         addFavourite={addFavourite}
         removeFavourite={removeFavourite}
         handleFavouriteClick={handleFavouriteClick}
-        isOpen={model.isPopupOpen} 
+        isOpen={model.isPopupOpen}
         onClose={() => model.setPopupOpen(false)}
         course={model.selectedCourse}
         prerequisiteTree={preP}
-        reviewPresenter={reviewPresenter}/>
+        reviewPresenter={reviewPresenter}
+        sidebarIsOpen={model.sidebarIsOpen}
+    />;
 
     return <ListView
         favouriteCourses={model.favourites}

my-app/src/presenters/SearchbarPresenter.jsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useState } from 'react';
 import CoursePagePopup from '../views/Components/CoursePagePopup.jsx';
 import PrerequisitePresenter from './PrerequisitePresenter.jsx';
-import { ReviewPresenter } from "../presenters/ReviewPresenter.jsx";
+import { ReviewPresenter } from "./ReviewPresenter.jsx";
 import SearchbarView from "../views/SearchbarView.jsx";
 import Fuse from 'fuse.js'
 import debounce from 'lodash.debounce';
@@ -109,7 +109,6 @@ const SearchbarPresenter = observer(({ model }) => {
             isPopupOpen={model.isPopupOpen}
             setIsPopupOpen={(isOpen) => model.setPopupOpen(isOpen)}
             setSelectedCourse={(course) => model.setSelectedCourse(course)}
-            // popup={popup}
             setSearchQuery={setSearchQuery}
             searchQuery={searchQuery}
             handleFavouriteClick={handleFavouriteClick}

my-app/src/views/Components/CoursePagePopup.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import RatingComponent from "./RatingComponent.jsx";
 import { model } from "../../model.js";
 
+
 function CoursePagePopup({
 							 favouriteCourses,
 							 handleFavouriteClick,
@@ -10,7 +11,8 @@ function CoursePagePopup({
 							 course,
 							 prerequisiteTree,
 							 reviewPresenter,
-						 }) {
+							 sidebarIsOpen
+}) {
 
 	const treeRef = useRef(null);
 	const [showOverlay, setShowOverlay] = useState(false);
@@ -54,12 +56,11 @@ function CoursePagePopup({
 
 	if (!isOpen || !course) return null;
 
-	console.log(course); ``
 	return (
 		<div
-
-			className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
-
+			className={`fixed  backdrop-blur-lg inset-0  flex justify-center z-50 ${
+				sidebarIsOpen ? 'pl-[400px]' : 'w-full'
+			}`}
 		>
 			<div
 				className="bg-indigo-300/75 backdrop-blur-lg h-full w-full flex flex-col overflow-auto"

my-app/src/views/SearchbarView.jsx

@@ -45,7 +45,8 @@ function SearchbarView(props) {
 
   return (
     <div className="w-full px-6 py-6 flex items-center justify-between" onClick={handleClickOutside}>
-      <a href="https://course-compass-inference.web.app/" className="flex items-center h-[90px] w-auto">
+      <a href="https://course-compass-inference.web.app/"
+         className="flex items-center h-[90px] w-auto">
         <img src={project_logo} className="h-[90px] w-auto" alt="KTH Logo" />
       </a>