Modified Top Navigation Bar and Removed Sidebar (#148)

Camillalalala · Kevin-D23 · web-flow · commit c2821cd93d28 · 2025-05-17T13:34:58.000-07:00
* Made event card container responsive and incorporated flex

* Update src/components/Events/UserEvents/style.scss

Co-authored-by: Kevin Duong &lt;116064184+Kevin-D23@users.noreply.github.com&gt;

* Update src/components/Events/UserEvents/style.scss

Co-authored-by: Kevin Duong &lt;116064184+Kevin-D23@users.noreply.github.com&gt;

* Update src/components/Events/UserEvents/style.scss

Co-authored-by: Kevin Duong &lt;116064184+Kevin-D23@users.noreply.github.com&gt;

* removed sidebar component, still struggling with events container

* fixed styling to remove sidebar width

* modified topbar styling, still has rendering issue, trouble removing sidebar from events

* Fixed rendering issue on Topbar  when reloading page

* added logo and fixed styling of topbar

* fixed styling for topbar

* home tab redirects to events

* added profile picture on right

* Included hamburger menu for mobile responsiveness

* updated acm logo

* updated acm logo

* modified .control-panel-wrapper

* Added profile picture to topbar

* Added animation to mobile menu

---------

Co-authored-by: Kevin Duong &lt;116064184+Kevin-D23@users.noreply.github.com&gt;
diff --git a/pages/assets/images/new_acm_wordmark_chapter.png b/pages/assets/images/new_acm_wordmark_chapter.png
diff --git a/src/components/ControlPanel/index.jsx b/src/components/ControlPanel/index.jsx
@@ -27,7 +27,7 @@ export default class ControlPanelComponent extends React.Component {
     return (
       <div className="controlpanel">
         <Topbar />
-        <Sidebar />
+        {/*<Sidebar />*/}
         <ControlPanel
           logout={logout}
           userEmail={userEmail}
diff --git a/src/components/ControlPanel/style.scss b/src/components/ControlPanel/style.scss
@@ -4,7 +4,7 @@
   margin-left: vars.$sidebar-width;
   padding: 60px;
   overflow: visible;
-  transition: margin-left 0.125s ease-in-out;
+  transition: 0.125s ease-in-out;
 
   .signout-action-button {
     margin: 6px;
diff --git a/src/components/Events/style.scss b/src/components/Events/style.scss
@@ -44,7 +44,7 @@
 }
 
 .events-dashboard {
-  margin-left: vars.$sidebar-width;
+  margin-top: vars.$topbar-height;
   box-sizing: padding-box;
   padding: 30px;
   overflow: visible;
@@ -64,7 +64,7 @@
 
   .checkin-button {
     position: fixed;
-    top: 20px;
+    top: 80px; 
     right: 20px;
     z-index: 10;
   }
diff --git a/src/components/Leaderboard/index.jsx b/src/components/Leaderboard/index.jsx
@@ -8,7 +8,6 @@ export default class LeaderboardComponent extends React.Component {
     return (
       <div className="leaderboard">
         <Topbar />
-        <Sidebar />
         <Leaderboard 
           leaderboard={this.props.leaderboard} 
           user={this.props.user} 
diff --git a/src/components/Leaderboard/style.scss b/src/components/Leaderboard/style.scss
@@ -5,7 +5,8 @@
 }
 
 .leaderboard-wrapper {
-  margin-left: vars.$sidebar-width;
+  margin-top: vars.$topbar-height;
+  margin-left: 0px;
   padding: 30px;
   overflow: visible;
   transition: margin-left 0.125s ease-in-out;
diff --git a/src/components/Profile/index.js b/src/components/Profile/index.js
@@ -9,7 +9,7 @@ export default class ProfileComponent extends React.Component {
     return (
       <div className="profile">
         <Topbar />
-        <Sidebar />
+        {/*<Sidebar />*/}
         <Profile
           updated={this.props.updated}
           updateSuccess={this.props.updateSuccess}
diff --git a/src/components/Profile/style.scss b/src/components/Profile/style.scss
@@ -23,7 +23,8 @@
 }
 
 .profile-wrapper {
-  margin-left: vars.$sidebar-width;
+  margin-top: vars.$topbar-height;
+  margin-left: 0px;
   padding: 60px;
   overflow: visible;
   transition: margin-left 0.125s ease-in-out;
diff --git a/src/components/Resources/index.js b/src/components/Resources/index.js
@@ -8,7 +8,7 @@ export default class ResourcesComponent extends React.Component {
     return (
       <div className="resources">
         <Topbar />
-        <Sidebar />
+        {/*<Sidebar />*/}
         <Resources />
       </div>
     );
diff --git a/src/components/Resources/style.scss b/src/components/Resources/style.scss
@@ -7,7 +7,8 @@
 .resources-wrapper {
   overflow: visible;
   padding-bottom: 60px;
-  margin-left: vars.$sidebar-width;
+  margin-top: vars.$topbar-height;
+  margin-left: 0px;
   transition: margin-left 0.125s ease-in-out;
   box-sizing: border-box;
 
diff --git a/src/components/Topbar/index.jsx b/src/components/Topbar/index.jsx
@@ -2,58 +2,97 @@ import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import React from 'react';
 import NavigationItem from './navigationItem';
+import Config from 'config';
+import './style.scss';
 
 export default class Topbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { menuOpen: false };
+    this.toggleMenu = this.toggleMenu.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleResize = () => {
+    if (window.innerWidth > 768 && this.state.menuOpen) {
+      this.setState({ menuOpen: false });
+    }
+  };
+
+  toggleMenu() {
+    this.setState(prev => ({ menuOpen: !prev.menuOpen }));
+  }
+
   render() {
     const { isAdmin } = this.props;
+    const { menuOpen } = this.state;
+    console.log(this.props)
+    const sharedLinks = (
+      <>
+        <NavLink to="/events" activeClassName="selected">
+          <NavigationItem icon="fa-user" text="Home" />
+        </NavLink>
+        <NavLink to="/events" activeClassName="selected">
+          <NavigationItem icon="fa-calendar" text="Events" />
+        </NavLink>
+        <NavLink to="/leaderboard" activeClassName="selected">
+          <NavigationItem icon="fa-list" text={isAdmin ? 'Members' : 'Leaderboard'} />
+        </NavLink>
+        <NavLink to="/resources" activeClassName="selected">
+          <NavigationItem icon={isAdmin ? 'fa-building' : 'fa-file'} text={isAdmin ? 'Organization' : 'Resources'} />
+        </NavLink>
+      </>
+    );
 
     return (
       <div className="topbar">
-        {
-          /* USER NAVIGATION */ !isAdmin && (
-            <div className="topbar-container">
-              <NavLink to="/events" activeClassName="selected">
-                <NavigationItem icon="fa-calendar" text="Events" />
-              </NavLink>
-              <NavLink to="/profile" activeClassName="selected">
-                <NavigationItem icon="fa-user" text="Profile" />
-              </NavLink>
-              <NavLink to="/leaderboard" activeClassName="selected">
-                <NavigationItem icon="fa-list" text="Leaderboard" />
-              </NavLink>
-              <NavLink to="/resources" activeClassName="selected">
-                {' '}
-                <NavigationItem icon="fa-file" text="Resources" />
-              </NavLink>
-            </div>
-      )
-        }
-
-        {
-          /* ADMIN NAVIGATION */ isAdmin && (
-            <div className="topbar-container">
-              <NavLink to="/events" activeClassName="selected">
-                <NavigationItem icon="fa-calendar" text="Events" />
-              </NavLink>
-              <NavLink to="/leaderboard" activeClassName="selected">
-                <NavigationItem icon="fa-list" text="Members" />
-              </NavLink>
-              <NavLink to="/resources" activeClassName="selected">
-                {' '}
-                <NavigationItem icon="fa-building" text="Organization" />
-              </NavLink>
+        <div className="topbar-container">
+          <div className="topbar-logo">
+            <img src="/assets/images/new_acm_wordmark_chapter.png" alt={Config.organization.name} />
+          </div>
+
+          <div className={`topbar-links ${menuOpen ? 'open' : ''}`}>
+            {sharedLinks}
+
+            {/* Add Control Panel for Admins */}
+            {isAdmin && (
               <NavLink to="/controlpanel" activeClassName="selected">
-                {' '}
                 <NavigationItem icon="fa-gamepad fa-2x" text="Control Panel" />
               </NavLink>
-            </div>
-      )
-        }
+            )}
+
+            {/* Add Profile Link (Mobile only) */}
+            {!isAdmin && (
+              <NavLink to="/profile" className="topbar-profile-mobile navigation-item" activeClassName="selected">
+                <NavigationItem icon="fa-user-circle" text="Profile" />
+              </NavLink>
+            )}
+          </div>
+
+          {/* Hamburger Button (Mobile only) */}
+          <div className={`hamburger ${menuOpen ? 'open' : ''}`} onClick={this.toggleMenu}>
+            <i className={`fa ${menuOpen ? 'fa-times' : 'fa-bars'}`} />
+          </div>
+
+          {/* Profile Icon (Desktop only) */}
+          {!isAdmin && (
+            <NavLink to="/profile" className="topbar-profile desktop-only" activeClassName="selected">
+              <img src={this.props.picture ? this.props.picture : "/assets/images/unknown.png"} alt="Profile" />
+            </NavLink> 
+          )}
+        </div>
       </div>
     );
   }
 }
 
 Topbar.propTypes = {
-  isAdmin: PropTypes.bool.isRequired, // Ensure 'isAdmin' is a required boolean
+  isAdmin: PropTypes.bool.isRequired,
 };
diff --git a/src/components/Topbar/style.scss b/src/components/Topbar/style.scss
diff --git a/src/containers/events.js b/src/containers/events.js
diff --git a/src/containers/topbar.js b/src/containers/topbar.js
diff --git a/src/styles/vars.scss b/src/styles/vars.scss

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,8 @@`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.leaderboard-wrapper {`
`8`		`- margin-left: vars.$sidebar-width;`
	`8`	`+ margin-top: vars.$topbar-height;`
	`9`	`+ margin-left: 0px;`
`9`	`10`	`padding: 30px;`
`10`	`11`	`overflow: visible;`
`11`	`12`	`transition: margin-left 0.125s ease-in-out;`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,8 @@`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.profile-wrapper {`
`26`		`- margin-left: vars.$sidebar-width;`
	`26`	`+ margin-top: vars.$topbar-height;`
	`27`	`+ margin-left: 0px;`
`27`	`28`	`padding: 60px;`
`28`	`29`	`overflow: visible;`
`29`	`30`	`transition: margin-left 0.125s ease-in-out;`