Errors and loading

src/components/App/App.js

@@ -1,29 +1,21 @@
 import {useState} from 'react';
-import {Routes, Route, Link} from 'react-router-dom';
+import {Routes, Route} from 'react-router-dom';
+import Menu from '../Menu/Menu';
 import Nav from '../Nav/Nav';
 import Home from '../Home/Home';
 import About from '../About/About';
 import Contact from '../Contact/Contact';
 import Portfolio from '../Portfolio/Portfolio';
 import Footer from '../Footer/Footer';
+import Error from '../Error/Error';
 
 const App = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div className='app'>
-        {isOpen ?
-        <nav className='menu'>
-          <span class='material-symbols-rounded' id='menu__exit' onClick={() => setIsOpen(!isOpen)}>
-            close
-          </span>
-          <div className='top-nav__buttons menu__buttons'>
-            <Link to='/' onClick={() => setIsOpen(!isOpen)}className='menu__button'>Home</Link>
-            <Link to='/about' onClick={() => setIsOpen(!isOpen)} className='menu__button'>About</Link>
-            <Link to='/portfolio' onClick={() => setIsOpen(!isOpen)} className='menu__button'>Portfolio</Link>
-            <Link to='/contact' onClick={() => setIsOpen(!isOpen)} className='menu__button'>Contact</Link>
-          </div>
-        </nav>
+      {isOpen ?
+        <Menu isOpen={isOpen} setIsOpen={setIsOpen} />
         :
         <>
           <Nav isOpen={isOpen} setIsOpen={setIsOpen} />
@@ -34,7 +26,7 @@ const App = () => {
                 <Route path='/about' element={<About />} />
                 <Route path='/contact' element={<Contact />} />
                 <Route path='/portfolio' element={<Portfolio />} />
-                <Route path='/error' />
+                <Route path='/*' element={<Error />} />
               </Routes>
             </div>
           </main>

src/components/App/_App.scss

@@ -73,25 +73,6 @@ button:hover,
   font-size: 3rem;
 }
 
-.menu {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  z-index: 1;
-  margin: 3rem;
-}
-
-#menu__exit {
-  align-self: flex-end;
-}
-
-.menu__buttons {
-  @include center-column;
-}
-
-.menu__button {
-  margin: 1rem;
-}
 @keyframes button-fade {
   to {
     @include button-hover;

src/components/Error/Error.js

@@ -0,0 +1,13 @@
+import {Link} from 'react-router-dom';
+
+const Error = () => {
+  return (
+    <div className='contact'>
+      <h1 className='page-header'>Sorry...</h1>
+      <p>The page you are looking for does not exist.</p>
+      <Link to='/' className='redirect'>Go Home</Link>
+    </div>
+  )
+}
+
+export default Error;

src/components/Error/_Error.scss

@@ -0,0 +1,13 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.redirect {
+  color: $primary-accent-color;
+  @include body-font;
+  margin: 3rem;
+  text-decoration: none;
+}
+
+.redirect:hover {
+  @include inline-link-hover;
+}

src/components/Menu/Menu.js

@@ -0,0 +1,19 @@
+import {Link} from 'react-router-dom';
+
+const Menu = ({isOpen, setIsOpen}) => {
+  return (
+    <nav className='menu'>
+      <span class='material-symbols-rounded' id='menu__exit' onClick={() => setIsOpen(!isOpen)}>
+        close
+      </span>
+      <div className='top-nav__buttons menu__buttons'>
+        <Link to='/' onClick={() => setIsOpen(!isOpen)}className='menu__button'>Home</Link>
+        <Link to='/about' onClick={() => setIsOpen(!isOpen)} className='menu__button'>About</Link>
+        <Link to='/portfolio' onClick={() => setIsOpen(!isOpen)} className='menu__button'>Portfolio</Link>
+        <Link to='/contact' onClick={() => setIsOpen(!isOpen)} className='menu__button'>Contact</Link>
+      </div>
+  </nav>
+  )
+}
+
+export default Menu;

src/components/Menu/_Menu.scss

@@ -0,0 +1,22 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+  margin: 3rem;
+}
+
+#menu__exit {
+  align-self: flex-end;
+}
+
+.menu__buttons {
+  @include center-column;
+}
+
+.menu__button {
+  margin: 1rem;
+}

src/styles/input.scss

@@ -3,8 +3,8 @@
 @use '../components/Contact/Contact';
 @use '../components/Home/Home';
 @use '../components/Nav/Nav';
-@use '../components/BurgerNav/BurgerNav';
 @use '../components/TopNav/TopNav';
 @use '../components/Portfolio/Portfolio';
 @use '../components/Project/Project';
-@use '../components/Footer/Footer';
+@use '../components/Footer/Footer';
+@use '../components/Error/Error';