Fix: rename Nav styles to match component

Author: rebecatschiedel

components/Nav.js

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import styles from "../styles/ResponsiveNavbar.module.css";
+import styles from "../styles/Nav.module.css";
 
 export default function Nav() {
   const [active, setActive] = useState(false);

styles/Nav.module.css

@@ -0,0 +1,137 @@
+.img {
+  max-width: 100%;
+}
+
+.navContainer {
+  width: 80%;
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.header {
+  width: 100%;
+  padding: 1em 0;
+}
+
+.align {
+  display: flex;
+  align-items: center;
+}
+
+.nav {
+  width: 100%;
+}
+
+.navToggle {
+  cursor: pointer;
+  border: 0;
+  width: 3em;
+  height: 3em;
+  padding: 0;
+  background-color: transparent;
+  color: black;
+  transition: opacity 250ms ease;
+  position: absolute;
+  right: 0;
+}
+
+.navToggle:hover,
+.navToggle:focus {
+  opacity: 0.75;
+}
+
+.hamburger {
+  width: 50%;
+  position: relative;
+}
+
+.hamburger,
+.hamburger::before,
+.hamburger::after {
+  display: block;
+  margin: 0 auto;
+  height: 3px;
+  background: black;
+}
+
+.hamburger::before,
+.hamburger::after {
+  content: "";
+  width: 100%;
+}
+
+.hamburger::before {
+  transform: translateY(-6px);
+}
+
+.hamburger::after {
+  transform: translateY(3px);
+}
+
+.nav {
+  visibility: hidden;
+  height: 0;
+  position: absolute;
+  font-size: 1em;
+}
+
+.navVisible {
+  visibility: visible;
+  height: auto;
+  position: relative;
+  text-align: start;
+  padding-top: 1em;
+}
+
+.navList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navItem {
+  margin-top: 0.75em;
+}
+
+.navLink {
+  text-decoration: none;
+  color: black;
+}
+
+.navLink:focus,
+.navLink:hover {
+  opacity: 0.65;
+}
+
+.logo {
+  border-radius: 50%;
+}
+
+@media (min-width: 768px) {
+  .navToggle {
+    display: none;
+  }
+
+  .nav {
+    visibility: visible;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: auto;
+    position: relative;
+  }
+
+  .navList {
+    display: flex;
+  }
+
+  .navItem {
+    margin: 0 0 0 1.5em;
+  }
+
+  .row {
+    display: flex;
+    justify-content: space-between;
+  }
+}