mobile-friendly view and scss->sass

src/nav/Nav.tsx

@@ -1,34 +1,32 @@
 import {useState} from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faBars} from "@fortawesome/free-solid-svg-icons/faBars";
-import {Menu} from "./Menu";
 import {ReactComponent as Wave} from "../img/menu-wave.svg";
-import "./nav.scss";
+import "./nav.sass";
 import {Links} from "./Links";
+import {Menu} from "./Menu";
 
 export default function Nav() {
     const [active, setActive] = useState(false);
 
-    return <>
+    return <div className="nav-ctr">
         <nav>
           <MenuButton active={active} setActive={setActive}/>
           <Links/>
         </nav>
-        <Menu active={active}/>
         <Wave className="wave" />
-    </>;
+        <Menu active={active}/>
+    </div>;
 }
 
 function MenuButton(props : { active: boolean, setActive: (_:boolean) => void }) {
     const {active, setActive} = props;
 
     return (
-      <div className="menu-btn">
-          <button>
-              <FontAwesomeIcon icon={faBars} onClick={function() {
-                  setActive(!active);
-              }}/>
-          </button>
-      </div>
+        <button className="menu-btn link">
+            <FontAwesomeIcon icon={faBars} onClick={function() {
+                setActive(!active);
+            }}/>
+        </button>
     );
 }