diff --git a/client/src/component/Navbar.jsx b/client/src/component/Navbar.jsx
index 9807b72..4cce28f 100644
--- a/client/src/component/Navbar.jsx
+++ b/client/src/component/Navbar.jsx
@@ -33,7 +33,8 @@ function Navbar(props) {
useEffect(() => {
const handleResize = () => {
- if (window.innerWidth > 768) { // Adjust for your breakpoint
+ if (window.innerWidth > 1280) {
+ // Adjust for your breakpoint
setIsSidebarOpen(false);
document.body.classList.remove("no-scroll");
}
@@ -121,23 +122,24 @@ function Navbar(props) {
{/* Sticky Navbar */}
- {/* Sidebar for Smaller devices */}
-
-
- -
- setIsSidebarOpen(false)}
- style={{ color: `${props}` }}
- >
- {props.home}
-
-
- -
- setIsSidebarOpen(false)}>
- {props.about}
-
-
- -
- setIsSidebarOpen(false)}>
- {props.community}
-
-
- -
- setIsSidebarOpen(false)}>
- {props.discussion}
-
-
- -
- setIsSidebarOpen(false)}>
- {props.blog}
-
-
- -
- setIsSidebarOpen(false)}>
- {props.profile}
-
-
-
-
+ {/* Sidebar for Smaller devices */}
+
+
+ -
+ setIsSidebarOpen(false)}
+ style={{ color: `${props}` }}
+ >
+ {props.home}
+
+
+ -
+ setIsSidebarOpen(false)}>
+ {props.about}
+
+
+ -
+ setIsSidebarOpen(false)}>
+ {props.community}
+
+
+ -
+ setIsSidebarOpen(false)}>
+ {props.discussion}
+
+
+ -
+ setIsSidebarOpen(false)}>
+ {props.blog}
+
+
+ -
+ setIsSidebarOpen(false)}>
+ {props.profile}
+
+
- {/* Sidebar Toggle Button */}
-
+ {localStorage.getItem("token") ? (
+ <>
+ {/* Add Project */}
+ - {renderUploadButton()}
+
+ {/* User Profile */}
+
+ {/* User DropDown Option */}
+
+ -
+
+ My Profile
+
+
+ -
+
+ Edit Profile
+
+
+
+ -
+
+ Logout
+
+
+ >
+ ) : (
+ <>
+ -
+
+ Login
+
+
+ -
+
+ Signup
+
+
+ >
+ )}
+
+
+
+ {/* Sidebar Toggle Button */}
+
+
);
}
diff --git a/client/src/css/Navbar.css b/client/src/css/Navbar.css
index ef1bd18..8d8a807 100644
--- a/client/src/css/Navbar.css
+++ b/client/src/css/Navbar.css
@@ -227,6 +227,7 @@
}
/* Dark Mode Toggle Button */
+
.darkThemeBtn * {
transition: all 0.3s;
}
@@ -409,7 +410,7 @@
}
/* Media query for desktop screens */
-@media (min-width: 1024px) {
+@media (min-width: 1280px) {
.collapse {
visibility: visible;
}
@@ -464,10 +465,13 @@
cursor: pointer;
margin: 15px;
}
-
+.mobile-dark-theme{
+ position: fixed;
+ right: 80px;
+}
.sidebar-toggle {
position: fixed;
- top: 20px;
+
right: 20px;
background-color: #007bff;
color: white;
@@ -477,11 +481,15 @@
cursor: pointer;
}
-@media (min-width: 768px) {
+@media (min-width: 1280px) {
+
.sidebar {
display: none;
/* Hide on larger screens */
}
+ .mobile-dark-theme{
+ display: none;
+ }
.sidebar-toggle {
display: none;