improvements (#115)

Author: Dinoxh

my-app/src/model.js

@@ -7,6 +7,8 @@ export const model = {
     //instead of passing searchcouses lambda function down into the searchbarview.
     /* courses returned from SearchbarPresenter (search is applied on top of filteredCourses[]) to be shown in the ListView */
     currentSearch: [],
+
+    sidebarIsOpen: true,
     /* current query text */
     currentSearchText: "",
     scrollPosition: 0,
@@ -238,4 +240,19 @@ export const model = {
         // cache the result
         return avgRtg;
     },
+
+    setSidebarState(state) {
+        this.sidebarIsOpen = state;
+    },
+
+    getSidebarState() {
+        return this.sidebarIsOpen;
+    },
+
+    toggleSidebarIsOpen() {
+        this.sidebarIsOpen = !this.sidebarIsOpen;
+    }
+
+
+
 };

my-app/src/pages/App.jsx

@@ -6,73 +6,71 @@ import { FilterPresenter } from "../presenters/FilterPresenter.jsx";
 import { Routes, Route } from 'react-router-dom';
 import SharedView from '../pages/SharedView.jsx';
 import { slide as Menu } from 'react-burger-menu';
+import { observer } from 'mobx-react-lite';
+
 
-function MainAppLayout({ model }) {
-	const [sidebarIsOpen, setSidebarIsOpen] = useState(true);
 
-	const toggleSidebar = () => {
-		setSidebarIsOpen(!sidebarIsOpen);
-	}
+function MainAppLayout({ model }) {
 
+	const [sidebarIsOpen, setSidebarIsOpen] = useState(model.sidebarIsOpen);
 
 	return (
 			/* 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'}`}>
 				<Menu
-					width={400} // menu width
-					isOpen={sidebarIsOpen}
+					width={400}
+					isOpen={model.sidebarIsOpen}
 					onStateChange={(state) => setSidebarIsOpen(state.isOpen)}
-					className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] z-0 h-screen" // The menu styling
+					className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] z-0 h-screen"
 					noOverlay
 					styles={{
 						bmMenuWrap: {
 							zIndex: '10'
-						}
+						},
+						bmBurgerButton: {
+							position: 'fixed',
+							top: '20px',
+							left: '20px',
+							width: '36px',
+							height: '30px'
+						},
 					}}
+					customBurgerIcon={ <img src="https://img.icons8.com/ios-filled/50/ffffff/menu-2.png" /> }
 				>
-					{/* The menu contents */}
-					<SidebarPresenter model={model} />
+					<SidebarPresenter model={model}/>
 				</Menu>
 			</div>
 
+
+
 			<div className="flex-1 h-full flex flex-col ">
 
+
 				<div className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white">
 					<div className="flex items-center">
-						{/* The button to open the menu */}
-						<button
-							onClick={toggleSidebar}
-							className="p-2 ml-2 text-white hover:bg-purple-700 rounded"
-						>
-							<img
-								src="https://img.icons8.com/ios-filled/50/ffffff/menu-2.png"
-								alt="menu icon"
-								className="w-6 h-6"
-							/>
-						</button>
-						<SearchbarPresenter model={model} />
+						<SearchbarPresenter model={model}/>
 					</div>
 				</div>
 
 
 				<div className="flex-auto border bg-[#121212] relative">
-					<ListViewPresenter model={model} />
+					<ListViewPresenter model={model}/>
 				</div>
 
-				<FilterPresenter model={model} />
+				<FilterPresenter model={model}/>
 			</div>
 		</div>)
 }
 
-function App({ model }) {
+function App({model}) {
 	return (
 		<Routes>
-			<Route path="/" element={<MainAppLayout model={model} />} />
-			<Route path="/share" element={<SharedView model={model} />} />
+			<Route path="/" element={<MainAppLayout model={model}/>}/>
+			<Route path="/share" element={<SharedView model={model}/>}/>
 		</Routes>
 	);
 }
 
-export default App;
+export default observer(App);

my-app/src/styles.css

@@ -26,7 +26,15 @@
 .bm-burger-button {
     position: absolute;
     width: 36px;
-    height: 36px;
-    left: 36px;
-    top: 36px;
-}
+    height: 30px;
+    left: 20px;
+    top: 20px;
+}
+
+
+.bm-menu-wrap {
+    position: fixed;
+    height: 100%;
+    z-index: 10;
+}
+