Add transitions

Author: nab138

src/App.css

@@ -51,3 +51,25 @@
   margin: 20px;
   max-width: 500px;
 }
+
+.container {
+  transition: opacity 0.25s;
+}
+
+.link {
+  background-color: transparent;
+  color: #7c88f7;
+  text-decoration: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  border: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+*:focus {
+  outline: 0 !important;
+}

src/App.tsx

@@ -1,5 +1,5 @@
 import "./App.css";
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, Outlet } from "react-router-dom";
 import { useRef } from "react";
 import Home from "./pages/Home";
 import Projects from "./pages/Projects";
@@ -9,26 +9,44 @@ import NotFound from "./pages/404";
 import SlideshowBg from "./pages/SlideshowBg";
 import Header from "./pages/Header";
 import Project from "./pages/Project";
+import { NavigationProvider } from "./utils/NavigationProvider";
 
 function App() {
   const containerRef = useRef<HTMLSpanElement | null>(null);
+  const containerRef2 = useRef<HTMLDivElement | null>(null);
 
   return (
-    <Header containerRef={containerRef}>
+    <Header containerRef={containerRef} containerRef2={containerRef2}>
       <Routes>
         <Route path="/" element={<SlideshowBg containerRef={containerRef} />}>
           <Route index element={<Home />} />
           <Route path="about" element={<About />} />
           <Route path="contact" element={<Contact />} />
         </Route>
-        <Route path="/projects" element={<Projects />} />
-        <Route path="/projects/:projectId" element={<Project />} />
-        <Route path="/mini-projects" element={<Projects />} />
-        <Route path="/mini-projects/:projectId" element={<Project />} />
+        <Route path="/" element={<Container containerRef={containerRef2} />}>
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/projects/:projectId" element={<Project />} />
+          <Route path="/mini-projects" element={<Projects key={"mini"} />} />
+          <Route path="/mini-projects/:projectId" element={<Project />} />
+        </Route>
         <Route path="*" element={<NotFound />} />
       </Routes>
     </Header>
   );
 }
 
 export default App;
+
+function Container({
+  containerRef,
+}: {
+  containerRef: React.RefObject<HTMLSpanElement | null>;
+}) {
+  return (
+    <span className="container" ref={containerRef}>
+      <NavigationProvider containerRef={containerRef}>
+        <Outlet />
+      </NavigationProvider>
+    </span>
+  );
+}

src/pages/Header.tsx

@@ -6,12 +6,16 @@ import { useEffect, useState } from "react";
 export default function Header({
   children,
   containerRef,
+  containerRef2,
 }: {
   children?: React.ReactNode;
   containerRef: React.RefObject<HTMLSpanElement | null>;
+  containerRef2: React.RefObject<HTMLDivElement | null>;
 }) {
   const navigate = useNavigate();
   const location = useLocation();
+  const isMain = ["/", "/about", "/contact"].includes(location.pathname);
+  const realContainerRef = isMain ? containerRef : containerRef2;
 
   const [modalOpen, setModalOpen] = useState(false);
 
@@ -35,7 +39,13 @@ export default function Header({
       >
         <Logo
           className="logo-img"
-          onClick={() => transition("/", containerRef, navigate, location)}
+          onClick={() => {
+            console.log(isMain, containerRef2, containerRef);
+            (isMain ? containerRef2 : containerRef).current?.classList.add(
+              "invisible"
+            );
+            transition("/", realContainerRef, navigate, location);
+          }}
         />
       </div>
       {modalOpen && (

src/pages/Project.tsx

@@ -1,14 +1,15 @@
-import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import "./Project.css";
 import { mainProjects, miniProjects } from "../utils/projects";
 import { useEffect } from "react";
 import Slideshow from "../components/Slideshow";
 import TechIcon from "../components/TechIcon";
+import { useTransitionNav } from "../utils/NavigationProvider";
 
 export default function Project() {
   const location = useLocation();
   const params = useParams();
-  const navigate = useNavigate();
+  const { navigate, finishTransition } = useTransitionNav();
   const isMini = location.pathname.includes("mini-projects");
   const project = (isMini ? miniProjects : mainProjects).find(
     (p) => p.id === params.projectId
@@ -20,6 +21,10 @@ export default function Project() {
     }
   }, [project, navigate]);
 
+  useEffect(() => {
+    finishTransition();
+  }, [finishTransition]);
+
   if (!project) {
     return null;
   }
@@ -28,9 +33,12 @@ export default function Project() {
     <div className="project-container">
       <div className="project-header">
         <h1>{project?.name}</h1>
-        <Link to={isMini ? "/mini-projects" : "/projects"}>
+        <button
+          className="link"
+          onClick={() => navigate(isMini ? "/mini-projects" : "/projects")}
+        >
           <h3>{isMini ? "Mini" : "All"} Projects</h3>
-        </Link>
+        </button>
       </div>
       <div className="project-content">
         <div className="project-slides">

src/pages/Projects.tsx

@@ -1,7 +1,8 @@
 import { mainProjects, miniProjects } from "../utils/projects";
 import "./Projects.css";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
+import { useTransitionNav } from "../utils/NavigationProvider";
 
 export default function Projects() {
   const location = useLocation();
@@ -18,7 +19,11 @@ export default function Projects() {
       : undefined;
   const fsRef = useRef<HTMLDivElement>(null);
   const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const navigate = useNavigate();
+  const { navigate, finishTransition } = useTransitionNav();
+
+  useEffect(() => {
+    finishTransition();
+  }, [finishTransition]);
 
   useEffect(() => {
     if (transitionProject && !isMini) {
@@ -69,9 +74,9 @@ export default function Projects() {
       )}
       <div className="projects-header">
         <h1>{isMini ? "Mini" : "My"} Projects</h1>
-        <Link to="/">
+        <button className="link" onClick={() => navigate("/")}>
           <h3>Back to home</h3>
-        </Link>
+        </button>
       </div>
       <div className="projects-content">
         {projects.map((project, idx) => (