OMG Transitions finally work

package.json

@@ -8,7 +8,7 @@
     "@fontsource/roboto": "^5.0.13",
     "@fullcalendar/daygrid": "^6.1.14",
     "@fullcalendar/interaction": "^6.1.14",
-    "@fullcalendar/react": "^6.1.14",
+    "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.14",
     "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.16.1",

src/App.css

@@ -30,6 +30,7 @@ a:link, a:visited, a {
   height: 100vh;
   background: #b2dbd7;
   transform-origin: bottom;
+  z-index: 5;
 }
 
 .slide-out {
@@ -40,4 +41,5 @@ a:link, a:visited, a {
   height: 100vh;
   background: #b2dbd7;
   transform-origin: top;
+  z-index: 5;
 }

src/pages/FullPageCalendar.tsx

@@ -16,6 +16,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import './FullCalendarCustom.css'; // Import the custom CSS
 import NavBar from '../Components/NavBar'; // Ensure the import path is correct
+import transition from '../transiton';
 
 interface Event {
   id: string;
@@ -175,4 +176,4 @@ const FullPageCalendar: React.FC = () => {
   );
 };
 
-export default FullPageCalendar;
+export default transition(FullPageCalendar);

src/pages/Notes.tsx

@@ -1,11 +1,14 @@
 import Background from "../Components/Background"
 import NavBar from "../Components/NavBar"
+import transition from "../transiton"
 
-export default function Notes() {
+function Notes() {
   return (
     <div>
         <Background/>
         <NavBar/>
     </div>
   )
 }
+
+export default transition(Notes)