Update fav button to show sign in sidebar when not logged in

.gitignore

@@ -37,7 +37,7 @@ yarn-error.log*
 next-env.d.ts
 
 # development
-/.vscode
+.vscode
 
 # linting
-/.husky
+.husky

.husky/pre-commit

@@ -1,4 +1,4 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx --no-install lint-staged
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged

components/List/Element.jsx

@@ -10,6 +10,7 @@ import { db } from '../../firebase-config';
 
 // Custom components
 import EditButton from '../EditButton/EditButton';
+import SignInView from '../Profile/SignInView';
 
 // Styles
 import styles from '../../styles/Element.module.css';
@@ -93,7 +94,10 @@ export default function Element({ element, type, onDelete, allowEditing }) {
     updateFavExercises(authUser.favouriteExercises);
   };
 
-  // Event handler if the favourite button is clicked on
+  // State to keep track of whether to show sign in view
+  const [show, setShow] = useState(false);
+
+  // Event handler when the favourite button is clicked on
   const toggleStar = (e) => {
     e.preventDefault();
     if (authUser) {
@@ -115,6 +119,9 @@ export default function Element({ element, type, onDelete, allowEditing }) {
           setImgPath(starFilled);
         }
       }
+    } else {
+      // If not logged in, show sign up sidebar
+      setShow('true');
     }
   };
 
@@ -181,6 +188,7 @@ export default function Element({ element, type, onDelete, allowEditing }) {
           <div className={styles.star}>{makeButton()}</div>
         )}
       </div>
+      <SignInView show={show} setShow={setShow} />
     </div>
   );
 }

components/Navbar/Navbar.jsx

@@ -1,5 +1,5 @@
 // React
-import React from 'react';
+import React, { useState } from 'react';
 
 // Bootstrap Components
 import Container from 'react-bootstrap/Container';
@@ -23,12 +23,16 @@ import { useAuth } from '../../context/authUserContext';
 export default function TopNavbar() {
   const router = useRouter();
 
+  // State to keep track of whether to show sign in view
+  const [show, setShow] = useState(false);
+  const handleShow = () => setShow(true);
+
   const { authUser } = useAuth();
   function profileSignIn() {
     if (authUser) {
-      return <ProfileView />;
+      return <ProfileView show={show} setShow={setShow} />;
     }
-    return <SignInView />;
+    return <SignInView show={show} setShow={setShow} />;
   }
 
   return (
@@ -61,7 +65,10 @@ export default function TopNavbar() {
                   <Nav.Link className={styles.item}>New workout</Nav.Link>
                 </Link>
               ))}
-            <Nav.Link className={styles.item}>{profileSignIn()}</Nav.Link>
+            <Nav.Link className={styles.item}>
+              <Nav onClick={handleShow}>Sign in</Nav>
+              {profileSignIn()}
+            </Nav.Link>
           </Nav>
         </Navbar.Collapse>
       </Container>

components/Profile/ProfileView.jsx

@@ -1,5 +1,5 @@
 // React
-import React, { useState } from 'react';
+import React from 'react';
 
 // Bootstrap Components
 import Nav from 'react-bootstrap/Nav';
@@ -18,8 +18,7 @@ import { useAuth } from '../../context/authUserContext';
 // Styles
 import styles from '../../styles/Profile.module.css';
 
-export default function ProfileView() {
-  const [show, setShow] = useState(false);
+export default function ProfileView({ show, setShow }) {
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
 

components/Profile/SignInView.jsx

@@ -2,7 +2,6 @@
 import React, { useState } from 'react';
 
 // Bootstrap Components
-import Nav from 'react-bootstrap/Nav';
 import Offcanvas from 'react-bootstrap/Offcanvas';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
@@ -13,10 +12,8 @@ import { useAuth } from '../../context/authUserContext';
 // Styles
 import styles from '../../styles/Settings.module.css';
 
-export default function SignInView() {
-  const [show, setShow] = useState(false);
+export default function SignInView({ show, setShow }) {
   const handleClose = () => setShow(false);
-  const handleShow = () => setShow(true);
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -31,73 +28,69 @@ export default function SignInView() {
   };
 
   return (
-    <>
-      <Nav onClick={handleShow}>Sign in</Nav>
+    <Offcanvas show={show} onHide={handleClose} placement="end">
+      <Offcanvas.Header closeButton>
+        <Offcanvas.Title />
+      </Offcanvas.Header>
+      <Offcanvas.Body>
+        <div className={styles.container}>
+          <main className={styles.main}>
+            <Form onSubmit={onSubmit}>
+              <h1>
+                <Form.Label>Sign In</Form.Label>
+              </h1>
 
-      <Offcanvas show={show} onHide={handleClose} placement="end">
-        <Offcanvas.Header closeButton>
-          <Offcanvas.Title />
-        </Offcanvas.Header>
-        <Offcanvas.Body>
-          <div className={styles.container}>
-            <main className={styles.main}>
-              <Form onSubmit={onSubmit}>
-                <h1>
-                  <Form.Label>Sign In</Form.Label>
-                </h1>
+              <div className={styles.grid}>
+                <div className={styles.item}>
+                  <Form.Group className="mb-3" controlId="formBasicEmail">
+                    <Form.Label>Email address</Form.Label>
+                    <Form.Control
+                      type="email"
+                      name="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="Enter email"
+                    />
+                  </Form.Group>
 
-                <div className={styles.grid}>
-                  <div className={styles.item}>
-                    <Form.Group className="mb-3" controlId="formBasicEmail">
-                      <Form.Label>Email address</Form.Label>
-                      <Form.Control
-                        type="email"
-                        name="email"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                        placeholder="Enter email"
-                      />
-                    </Form.Group>
+                  <Form.Group className="mb-3" controlId="formBasicPassword">
+                    <Form.Label>Password</Form.Label>
+                    <Form.Control
+                      type="password"
+                      name="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      placeholder="Password"
+                    />
+                  </Form.Group>
 
-                    <Form.Group className="mb-3" controlId="formBasicPassword">
-                      <Form.Label>Password</Form.Label>
-                      <Form.Control
-                        type="password"
-                        name="password"
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                        placeholder="Password"
-                      />
-                    </Form.Group>
-
-                    {/* Waiting for email/pword sign in */}
-                    {/* <Form.Group className="mb-3" controlId="formBasicCheckbox">
+                  {/* Waiting for email/pword sign in */}
+                  {/* <Form.Group className="mb-3" controlId="formBasicCheckbox">
                       <Form.Check type="checkbox" label="Remember me" />
                     </Form.Group> */}
-                  </div>
                 </div>
-
-                <div className={styles.buttons}>
-                  <Button variant="primary" type="submit">
-                    Sign In
-                  </Button>
-
-                  <div className={styles.signup}>
-                    <Button variant="primary" type="submit">
-                      Sign Up
-                    </Button>
-                  </div>
-                </div>
-              </Form>
-              <div className={styles.buttons}>
-                <Button variant="primary" onClick={googleSignIn}>
-                  Sign In with Google
-                </Button>
               </div>
-            </main>
-          </div>
-        </Offcanvas.Body>
-      </Offcanvas>
-    </>
+
+              <div className={styles.buttons}>
+                <Button variant="primary" type="submit">
+                  Sign In
+                </Button>
+
+                <div className={styles.signup}>
+                  <Button variant="primary" type="submit">
+                    Sign Up
+                  </Button>
+                </div>
+              </div>
+            </Form>
+            <div className={styles.buttons}>
+              <Button variant="primary" onClick={googleSignIn}>
+                Sign In with Google
+              </Button>
+            </div>
+          </main>
+        </div>
+      </Offcanvas.Body>
+    </Offcanvas>
   );
 }

styles/WorkoutForms/WorkoutForm.module.css

@@ -44,7 +44,7 @@
     margin: 1vh;
     width: auto;
   }
-  
+
   .form h2 {
     text-align: center;
   }