Fixing Dashbiard navbar issues

Author: AuraOfDivinity

src/user/dashboard/dashboard.scss

@@ -4,10 +4,16 @@
   height: auto;
   font-family: Muli, sans-serif;
   .navigation {
+    background: #f5f5f5;;
     flex-grow: 1;
     border-right: solid 1px #dfe9f1;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
   }
   .news {
+    margin-left: 10%;
     flex-grow: 4;
     .notify-user {
       display: flex;

src/user/dashboard/navigation/navigation.scss

@@ -1,6 +1,8 @@
 .main-navigation {
   .list-group {
+    background-color: #F5F5F5;
     .list-group-item {
+      background-color: #F5F5F5;
       white-space: nowrap;
       cursor: pointer;
       border: none;

src/user/dashboard/news-feed/news-feed.js

@@ -45,6 +45,8 @@ const reactionVariant = {
   },
 };
 
+const navStyles = { position: 'fixed', width: '83%', top: '0', zIndex:1, background: '#fff', marginTop: '0px', marginBottom:'0px'}
+
 const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
   <a
     href=""
@@ -130,6 +132,7 @@ function NewsFeed(props) {
   const [projects, setAllProjects] = useState([]);
   const [posts, setAllPosts] = useState([]);
   const [votes, setVotes] = useState({});
+  const [isTop, setisTop] = useState(false);
   const [displayReactionContainer, setDisplayReactioContainer] = useState(
     false
   );
@@ -141,6 +144,13 @@ function NewsFeed(props) {
     setAllPosts(props?.allPosts);
   }, [props.allEvents, props.allPosts, props.allProjects, props]);
 
+  useEffect(() => {
+    window.addEventListener("scroll", () => {
+      const scrollAmount = window.scrollY;
+      scrollAmount > 369 ? setisTop(true) : setisTop(false)
+    });
+  }, [window]);
+
   let navigateToProfile = (userId) => {
     console.log(`Navigating to user profile ${userId}`);
     props.history.push(`/profile/${userId}`);
@@ -541,58 +551,9 @@ function NewsFeed(props) {
         </div>
       </div>
       <div className="news__feed__container">
-        {/* <div className="posts">
-        <span className="category">
-          <span className="to-centre">
-            {first === "f" ? (
-              <Button
-                active
-                variant="primary"
-                className="category-btn"
-                onClick={handleClick("All")}
-              >
-                <span className="btn-content">All</span>
-              </Button>
-            ) : (
-              <Button
-                autoFocus
-                variant="primary"
-                className="category-btn"
-                onClick={handleClick("All")}
-              >
-                All
-              </Button>
-            )}
-            <span className="space"></span>
-            <Button
-              variant="primary"
-              className="category-btn"
-              onClick={handleClick("Post")}
-            >
-              <span className="btn-content">Posts</span>
-            </Button>
-            <span className="space"></span>
-            <Button
-              variant="primary"
-              className="category-btn"
-              onClick={handleClick("Event")}
-            >
-              <span className="btn-content">Events</span>
-            </Button>
-            <span className="space"></span>
-            <Button
-              variant="primary"
-              className="category-btn"
-              onClick={handleClick("Project")}
-            >
-              <span className="btn-content">Projects</span>
-            </Button>
-          </span>
-        </span>
-      </div> */}
-        <div className="tabs__container">
+        <div className="tabs__container" style={isTop? navStyles: {}}>
           <span className="nav__tab container">
-            <ul className="nav__list__container">
+            <ul className="nav__list__container" style={isTop ? {marginBottom: '0px'}: {}}>
               <li
                 className={
                   type === "All"

src/user/organization/organization.scss

@@ -6,13 +6,18 @@
   .navigation {
     flex: 0.5;
     border-right: solid 1px #dfe9f1;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
   }
   h2 {
     font-size: 20px;
     font-weight: bold;
     font-family: "Inter";
   }
   .news {
+    margin-left: 10%;
     flex: 3;
     .notify-user {
       display: flex;

src/user/profile/profile.scss

@@ -6,12 +6,17 @@
   .navigation {
     flex: 0.5;
     border-right: solid 1px #dfe9f1;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
   }
   h2 {
     font-size: 22px;
     font-weight: 650;
   }
   .news {
+    margin-left: 10%;
     flex: 3;
     .notify-user {
       display: flex;

src/user/projects/projects.scss

@@ -5,6 +5,10 @@
     .navigation {
       flex: 0.5;
       border-right: solid 1px #dfe9f1;
+      position: fixed;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
     }
 
     .projects {
@@ -71,4 +75,5 @@
       }
 
     }
-  }  
+    margin-left: 10%;
+  }