Deleting the Nav.module.css file and creating the scss for the Nav component that contains all the scss styling and referencing the scss file in Nav component

Author: ZahraB21

components/Nav.js

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import styles from "../styles/Nav.module.css";
+import styles from "../styles/Nav.module.scss";
 import { linksNav } from "../utils/links";
 
 export default function Nav() {

styles/Nav.module.css

@@ -0,0 +1,144 @@
+.navContainer {
+    width: 80%;
+    position: relative;
+    margin: 0 auto;
+}
+
+.header {
+    width: 100%;
+    padding: 1em 0;
+}
+
+.align {
+    display: flex;
+    align-items: center;
+}
+
+.nav {
+    width: 100%;
+    overflow: hidden;
+    visibility: hidden;
+    height: 0;
+    position: absolute;
+    font-size: 1em;
+}
+
+.navToggle {
+    cursor: pointer;
+    border: 0;
+    width: 3em;
+    height: 3em;
+    padding: 0;
+    background-color: transparent;
+    color: black;
+    transition: opacity 250ms ease;
+    position: absolute;
+    right: 0;
+
+    &:hover,
+    &:focus {
+        opacity: 0.75;
+    }
+}
+
+.hamburger {
+    width: 50%;
+    position: relative;
+
+    &,
+    &::before,
+    &::after {
+        display: block;
+        margin: 0 auto;
+        height: 3px;
+        background: black;
+    }
+
+    &::before,
+    &::after {
+        content: "";
+        width: 100%;
+    }
+
+    &::before {
+        transform: translateY(-6px);
+    }
+
+    &::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;
+
+    &:focus,
+    &:hover {
+        opacity: 0.65;
+    }
+}
+
+.logo {
+    border-radius: 50%;
+    height: 5em;
+    cursor: pointer;
+
+    &:hover {
+        opacity: 0.6;
+    }
+}
+
+@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;
+    }
+}