Merge pull request #79 from vevcom/feat/new-nav

Feat/new nav

src/app/components/EditModeSwitch/EditModeSwitch.module.scss

@@ -2,62 +2,23 @@
 
 .EditModeSwitch {
     margin: ohma.$gap;
-    display: flex;
-    flex-direction: column;
-    > label {
-        font-size: ohma.$fonts-s;
-        margin-bottom: 3px;
-    }
-    > div {
-        position: relative;
-        display: inline-block;
-        width: 36px;
-        height: 19px;
-
-        input {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            cursor: pointer;
-            opacity: 0;
-            z-index: 2;
 
-            &:checked + span {
-                background-color: ohma.$colors-primary;
-            }
+    label {
+        cursor: pointer;
 
-            &:focus + span {
-                box-shadow: 0 0 1px ohma.$colors-primary;
-            }
+        input {
+            display: none;
 
-            &:checked + span:before {
-                transform: translateX(15px);
+            &:checked + .EditModeSwitchIcon {
+                color: ohma.$colors-primary;
             }
         }
 
-        span {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #ccc;
-            transition: .4s;
-            border-radius: 17px;
-
-            &:before {
-                position: absolute;
-                content: "";
-                height: 15px;
-                width: 15px;
-                left: 2px;
-                bottom: 2px;
-                background-color: ohma.$colors-white;
-                transition: .4s;
-                border-radius: 50%;
-            }
+        .EditModeSwitchIcon {
+            width: 20px;
+            height: 20px;
+            color: ohma.$colors-white;
+            transition: 0.2s;
         }
     }
 }

src/app/components/EditModeSwitch/EditModeSwitch.tsx

@@ -1,32 +1,25 @@
 'use client'
-import { useContext, useEffect, useRef } from 'react'
+import { useContext } from 'react'
 import { EditModeContext } from '@/context/EditMode'
 import styles from './EditModeSwitch.module.scss'
 import type { ChangeEvent } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPencil } from '@fortawesome/free-solid-svg-icons'
 
 export default function EditModeSwitch() {
     const editingContext = useContext(EditModeContext)
-    const ref = useRef<HTMLInputElement>(null)
     if (!editingContext) throw new Error('No EditModeContext found')
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
         editingContext.setEditMode(e.target.checked)
     }
 
-    useEffect(() => {
-        console.log(editingContext.editMode)
-        if (ref.current) {
-            ref.current.checked = editingContext.editMode
-        }
-    }, [editingContext.editMode])
-
     return (
         <div className={styles.EditModeSwitch}>
-            <label>Edit</label>
-            <div>
-                <input type="checkbox" id="editModeSwitch" onChange={handleChange} />
-                <span className={styles.slider}></span>
-            </div>
+            <label>
+                <input checked={editingContext.editMode} type="checkbox" id="editModeSwitch" onChange={handleChange} />
+                <FontAwesomeIcon className={styles.EditModeSwitchIcon} icon={faPencil} />
+            </label>
         </div>
     )
 }