Fix navbar active indicator

snowflake-app · Feb 13, 2021 · da8953a · da8953a
1 parent 1eebd6e
commit da8953a
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 25 deletions.
diff --git a/frontend/src/components/UserInfo.tsx b/frontend/src/components/UserInfo.tsx
diff --git a/frontend/src/components/header/Navbar.tsx b/frontend/src/components/header/Navbar.tsx
@@ -29,7 +29,7 @@ export default function Navbar() {
         <div className="navbar-end">
           <NavbarMenuItem to="/feed" icon="home-outline" label="Feed"/>
           <NavbarMenuItem to="/1-on-1s" icon="people-outline" label="1-on-1s"/>
-          <NavbarMenuItem to="/" icon="rocket-outline" label="Personal objectives"/>
+          <NavbarMenuItem to="/personal-objectives" icon="rocket-outline" label="Personal objectives"/>
           <Notifications/>
           <ProfileDropdownMenu/>
         </div>

diff --git a/frontend/src/components/header/NavbarMenuItem.tsx b/frontend/src/components/header/NavbarMenuItem.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 export default function NavbarMenuItem({icon, label, ...linkProps}: NavLinkProps & { icon: string, label: string }) {
   return (
-    <NavLink {...linkProps} activeClassName="is-active" className="navbar-item">
+    <NavLink {...linkProps} activeClassName="is-active" className="navbar-item is-tab">
       <span className="icon is-medium">
           <ion-icon class="is-size-5" name={icon}/>
       </span>

diff --git a/frontend/src/components/header/ProfileDropdownMenu.tsx b/frontend/src/components/header/ProfileDropdownMenu.tsx
@@ -1,38 +1,47 @@
 import {useAuth} from "../../hooks/use-auth";
-import {Link} from "react-router-dom";
+import {Link, useHistory} from "react-router-dom";
 import React from "react";
 import styles from './ProfileDropdownMenu.module.css';
 
 export default function ProfileDropdownMenu() {
-  const auth = useAuth();
+  const {user, logout} = useAuth();
+  const history = useHistory();
+
+  const {name, username} = user!;
+
+  const signOut = () => {
+    logout();
+    history.push("/");
+  };
 
   return (
     <div className="navbar-item has-dropdown is-hoverable">
-      <Link to="/" className="navbar-link">Hello {auth.user?.name}</Link>
+      <Link to={`/profile/${username}`} className="navbar-link">Hello {name}</Link>
 
       <div className="navbar-dropdown is-right">
-        <Link to="/" className="navbar-item is-align-items-center">
-        <span className={`icon ${styles.icon}`}>
-          <ion-icon size="large" name="person-circle-outline"/>
-        </span><span>
-          Profile
-        </span>
-        </Link>
-        <hr className="navbar-divider"/>
-        <Link to="/" className="navbar-item is-align-items-center">
-        <span className={`icon ${styles.icon}`}>
-          <ion-icon size="large" name="help-circle-outline"/>
-        </span><span>
-          Help
-        </span>
+        <Link to={`/profile/${username}`} className="navbar-item is-align-items-center">
+          <span className={`icon ${styles.icon}`}>
+            <ion-icon size="large" name="person-circle-outline"/>
+          </span>
+          <span>
+            Profile
+          </span>
         </Link>
         <hr className="navbar-divider"/>
-        <Link to="/" className="navbar-item is-align-items-center">
-        <span className={`icon ${styles.icon}`}>
-          <ion-icon size="large" name="exit-outline"/>
-        </span><span>
-          Sign out
-        </span>
+        {/*<Link to="/" className="navbar-item is-align-items-center">*/}
+        {/*  <span className={`icon ${styles.icon}`}>*/}
+        {/*    <ion-icon size="large" name="help-circle-outline"/>*/}
+        {/*  </span>*/}
+        {/*  <span>*/}
+        {/*    Help*/}
+        {/*  </span>*/}
+        {/*</Link>*/}
+        {/*<hr className="navbar-divider"/>*/}
+        <Link to="/" onClick={signOut} className="navbar-item is-align-items-center">
+          <span className={`icon ${styles.icon}`}>
+            <ion-icon size="large" name="exit-outline"/>
+          </span>
+          <span>Sign out</span>
         </Link>
       </div>
     </div>);

diff --git a/frontend/src/components/profile/ProfilePage.module.css b/frontend/src/components/profile/ProfilePage.module.css
diff --git a/frontend/src/components/profile/ProfilePage.tsx b/frontend/src/components/profile/ProfilePage.tsx