add navbar toggle dropdown onclick on mobile

cankurttekin · Nov 11, 2024 · 5e4cd65 · 5e4cd65
1 parent 83e6fcf
commit 5e4cd65
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/frontend/src/components/Resume.js b/frontend/src/components/Resume.js
@@ -8,9 +8,8 @@ const SUMMARY_LENGTH = 255;
 
 // Styled Components for Layout
 const Container = styled.div`
-    padding: 40px;
-    max-width: 800px;
-    margin: 0 auto;
+    max-width: 768px;
+    margin: 20px auto;
     color: #333;
 `;
 
@@ -26,7 +25,6 @@ const SectionTitle = styled.h3`
 `;
 
 const Skill = styled.span`
-    //background: #e0e0e0;
     padding: 8px 8px;
     margin: 0 4px 4px 0;
     border-radius: 6px;

diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js
@@ -117,6 +117,11 @@ const Navbar = () => {
         navigate('/login');
     };
 
+    const handleNavigation = (path) => {
+        toggleDropdown();  // Always toggle the dropdown before navigating
+        navigate(path);    // Then navigate to the provided path
+    };
+
     // Scroll event listener to update the scrolled state
     useEffect(() => {
         const handleScroll = () => {
@@ -141,27 +146,27 @@ const Navbar = () => {
             <NavbarItems isOpen={isOpen}>
                 {isLoggedIn && (
                     <>
-                        <NavbarItem onClick={() => navigate('/job-applications')}>
+                        <NavbarItem onClick={() => handleNavigation('/job-applications')}>
                             <span className="material-icons">work</span>
                             Applications
                         </NavbarItem>
-                        <NavbarItem onClick={handleAddJobClick}>
+                        <NavbarItem onClick={() => {toggleDropdown(); handleAddJobClick();}}>
                             <span className="material-icons">add</span>
                             Add
                         </NavbarItem>
-                        <NavbarItem onClick={() => navigate('/charts')}>
+                        <NavbarItem onClick={() => handleNavigation('/charts')}>
                             <span className="material-icons">bar_chart</span>
                             Charts
                         </NavbarItem>
-                        <NavbarItem onClick={() => navigate('/ai-tools')}>
+                        <NavbarItem onClick={() => handleNavigation('/ai-tools')}>
                             <span className="material-icons">build</span>
                             AI Tools
                         </NavbarItem>
-                        <NavbarItem onClick={() => navigate('/resume')}>
+                        <NavbarItem onClick={() => handleNavigation('/resume')}>
                             <span className="material-icons">assignment_ind</span>
                             Resume
                         </NavbarItem>
-                        <NavbarItem onClick={() => navigate('/exportData')}>
+                        <NavbarItem onClick={() => handleNavigation('/exportData')}>
                             <span className="material-icons">file_download</span>
                             Export
                         </NavbarItem>