Updated the Hamburger menu

cepdnaclk · Sep 16, 2024 · 54b9a7a · 54b9a7a
1 parent 2c9918d
commit 54b9a7a
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 11 deletions.
diff --git a/back-end/src/main/java/com/example/demo/task/TaskService.java b/back-end/src/main/java/com/example/demo/task/TaskService.java
@@ -61,8 +61,8 @@ public List<Task> findUserTasks(Long userID) {
         return taskRepository.findTasksByUser(user);
     }
 
-    public void deleteTaskUsers(int taskID,Long userID){
-        taskRepository.deleteUserFromTasks(taskID,userID);
-    }
+//    public void deleteTaskUsers(int taskID,Long userID){
+//        taskRepository.deleteUserFromTasks(taskID,userID);
+//    }
 }
 
diff --git a/back-end/src/main/resources/application.yml b/back-end/src/main/resources/application.yml
@@ -6,7 +6,7 @@ server:
 spring:
   datasource:
     url: jdbc:mysql://localhost:3306/cycle
-    password: "&*531cW9/?"
+    password:
     username: root
     driver-class-name: com.mysql.cj.jdbc.Driver
   jpa:

diff --git a/front-end/src/components/Header.css b/front-end/src/components/Header.css
@@ -143,7 +143,7 @@
   align-items: center;
   background-color: rgba(228, 246, 250, 0.9);
   /* padding: 1rem; */
-  padding: 20px 5px;
+  padding: 20px 2px;
   height: 2rem;
   position: fixed;
   top: 34px; /* Adjust based on the height of the adminNavBar */
@@ -153,11 +153,14 @@
   font-size: 18px;
 }
 
-
+.headerNavBarRight li{
+  background-color: rgba(228, 246, 250, 0.9);
+}
 
 .headerNavBar ul{
   display: flex;
   position: relative;
+  margin-left: 0.5rem;
 }
 
 .headerNavBar ul li{
@@ -243,6 +246,22 @@
   text-decoration: none;
 }
 
+.headerNavBarLeft.open {
+  display: flex;
+  flex-direction: column; /* Items stacked vertically on small screens */
+  position: absolute;
+  top: 1.5rem;
+  left: 1rem;
+  background-color: #334195;
+  z-index: 900;
+  padding: 1rem;
+  border-radius: 5px;
+}
+
+.adminmenu{
+  display: none;
+}
+
 .adminNavBar div{
   margin :0;
   padding:0;
@@ -627,4 +646,11 @@
     padding: 0.5rem 2rem;
     text-align: left;
   }
+
+  .adminmenu {
+    display: flex;
+    position: fixed;
+  }
+
+
 }
diff --git a/front-end/src/components/Header.jsx b/front-end/src/components/Header.jsx
@@ -12,6 +12,10 @@ export let loggedInUser = { isLoggedIn: false, firstName: '', lastName: '' };
 function Header(){
     // Constants for hamburger menu
     const [menuOpen, setMenuOpen] = useState(false);
+
+    // Constants for hamburger menu
+    const [adminmenuOpen, setAdminMenuOpen] = useState(false);
+
     // Constants for login button
     const [isVisible, setIsVisible] = useState(true);
 
@@ -52,6 +56,7 @@ function Header(){
     // set hamburger menu to close when a link is clicked
     const handleLinkClick = () => {
         setMenuOpen(false);
+        setAdminMenuOpen(false);
         setIsVisible(false);
     }
 
@@ -150,8 +155,8 @@ function closeOnClickOutside(selector, toggleClass) {
                 }>
                 <FontAwesomeIcon icon={faBars} />   
                 </div>
-                <ul className= {menuOpen ? "open" : ""}>
-                <ul className="headerNavBarRight">
+
+                <ul className= {`headerNavBarRight ${menuOpen ? "open" : ""}`}>
 
                     <li><Link to = '/' onClick={handleLinkClick}>Home</Link></li>
 
@@ -174,13 +179,20 @@ function closeOnClickOutside(selector, toggleClass) {
                     <li><Link to = '/downloads' onClick={handleLinkClick}>Downloads</Link></li>
                     <li><Link to = '/contact' onClick={handleLinkClick}>Contact</Link></li>
                 </ul>
-                </ul>
             </nav>
 
             {/* Top Navigation Bar for Administration  */}
             <div>
-                <nav class="adminNavBar" >   
-                <ul className="headerNavBarLeft">
+                <nav class="adminNavBar" > 
+
+                {loggedInUserState && (
+                    <div className='adminmenu' style={{ marginLeft: '51px' }} onClick={() => 
+                        setAdminMenuOpen(!adminmenuOpen)
+                        }>
+                        <FontAwesomeIcon icon={faBars} />   
+                    </div>
+                )} 
+                <ul className= {`headerNavBarLeft ${adminmenuOpen ? "open" : ""}`}>
                     {/* Display Admin Nav Bar Left List Items here only if min-width: 968px and the user has logged in*/}
                     {loggedInUserState && <li className='adminNavBarLeftListItem'><Link to = '/admin/dashboard'>DASHBOARD</Link></li>}
                     {loggedInUserState && <li className='adminNavBarLeftListItem'><Link to = '/admin/project management'>PROJECT MANAGEMENT</Link></li>}