feat: added dropdown menu

package.json

@@ -20,12 +20,14 @@
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.2.2",
     "react-scripts": "^2.1.3",
+    "react-scroll": "^1.8.7",
     "styled-components": "^5.3.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "format": "prettier --write \"src/**/*.{js,jsx}\"",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -46,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.6.2"
   }
 }

src/App.css

@@ -8,7 +8,7 @@ body {
   background-image: url(https://www.tsilhqotin.ca/wp-content/uploads/2021/08/tsilhqotin_hillside-scaled.jpg);
 }
 
-h1 {
+h1, h2 {
   margin-top: 0;
   padding: 10px;
 }
@@ -17,15 +17,24 @@ h1 {
   padding: 0;
   margin: 0;
   text-align: center;
-  min-height: calc( 100vh - 117px);
-  background: linear-gradient(90deg, rgba(2,0,36,0.7094188017003676) 0%, rgba(250,130,115,0.26404065043986347) 100%);
+  min-height: calc( 100vh - 71px);
+  background: linear-gradient(90deg, rgba(2,0,36,0.7570378493194152) 0%, rgba(210,47,27,0.4405112386751575) 100%);
+;
   ;
 }
 
 .active {
   color: orangered;
 }
 
+a {
+  text-decoration: none;
+}
+
+.contact {
+  color: #fff;
+}
+
 .about {
   color: white;
 }
@@ -41,15 +50,34 @@ h1 {
 
 .fundersLink:hover {
   color: #fff;
-  transition: 200ms ease-in;
+  transition: 200ms ease-in-out;
+}
+
+.Link {
+  text-decoration: none;
+  color: lightgray;
+  font-size: 30px;
+}
+
+.Link:hover {
+  color: #fff;
+  transition: 250ms ease-in-out;
+}
+
+.Links {
+  text-decoration: none;
+  color: lightgray;
+}
+
+.Links:hover {
+  color: #fff;
+  transition: 250ms ease-in-out;
 }
 
 html, body {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  /* position: relative;
-  top: 300px; */
 }
 
 .footerLink{
@@ -59,7 +87,7 @@ html, body {
 
 .footerLink:hover {
   color: white;
-  transition: 200ms ease-in;
+  transition: 400ms ease-in-out;
 }
 
 .copyright {

src/App.js

@@ -1,30 +1,30 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
-import './App.css';
-import Navbar from './components/Navbar';
-import Home from './pages/Home'
-import About from './pages/about';
-import Stream from './pages/Stream';
-import Links from './pages/Links';
-import Contact from './pages/Contact';
-import Funders from './pages/funders'
-import { FooterContainer } from './containers/footer'
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import "./App.css";
+import Navbar from "./components/Navbar";
+import Home from "./pages/Home";
+import About from "./pages/about";
+import Stream from "./pages/Stream";
+import Links from "./pages/Links";
+import Contact from "./pages/Contact";
+import Funders from "./pages/funders";
+import { FooterContainer } from "./containers/footer";
 
 function App() {
   return (
     <Router>
       <Navbar />
-        <Routes>
-            <Route path="/" element={<Home />}/>
-            <Route path="/About" element={<About />}/>
-            <Route path="/Stream" element={<Stream />}/>
-            <Route path="/Links" element={<Links />}/>
-            <Route path="/contactUs" element={<Contact />}/>
-            <Route path="/funders" element={<Funders />}/>
-        </Routes>
-          <FooterContainer />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/About" element={<About />} />
+        <Route path="/Stream" element={<Stream />} />
+        <Route path="/Links" element={<Links />} />
+        <Route path="/contactUs" element={<Contact />} />
+        <Route path="/funders" element={<Funders />} />
+      </Routes>
+      <FooterContainer />
     </Router>
   );
-};
+}
 
 export default App;

src/App.test.js

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();