Search code examples
javascripthtmlcssreactjsnavigation

React fill SideNavBar from top to bottom with other components on the page

enter image description here

I want my sidenavbar to continue over the whole page but when i add the other sections(home, contact & projects) which are just regular functional components with a div and h1, they create their own space on the page. is there a better solution to creating different sections on a page? i have tried rendering the components
from index and app.js but without success, i am currently rendering SidenavBar from index.js and my sections are getting rendered from app.js.

     import React from "react";
     import "../Section.css";

     function HomeSection() {
     return (
      <div className="Section" id="Home">
     HomeSection
     <h1>Home</h1>
     </div>
     );
    }

   export default HomeSection;

here is an example of the sections, the section.css only centers the text on the page.

  function SideNavBar() {
  const [titleActive, setTitleActive] = useState(HomeSection);
  return (
   <div className="SideNavBar">
   <Stickybox>
     <ul className="SideBarList">
       {SideBarInfo.map((info, key) => {
         return (
          <li
            key={key}
             className="rad"
              onClick={() => {
              console.log(info.title + " clicked");
              setTitleActive(info.title);
               }}
              id={titleActive === info.title ? "active" : ""}
              >
               <Link
               onClick={() => {
                console.log(info.title + " clicked");
                setTitleActive(info.title);
              }}
              id={titleActive === info.title ? "active" : ""}
              activeClass="active"
              to={info.title}
              spy={true}
              smooth={true}
              offset={50}
              duration={500}
              >
              <div id="title">{info.title}</div>
             /Link>
             <Link
                activeClass="active"
                to={info.title}
                spy={true}
                smooth={true}
                offset={50}
                duration={500}
              >
               <div id="bild">{info.bild}</div>
             </Link>
           </li>
         );
       })}
     </ul>
   </Stickybox>
   </div>
   );
  }

    export default SideNavBar;

     // this is the css for sidebar
    .SideNavBar {
     width: 250px;
     min-height: 5000px;
     background-color: rgb(47, 167, 223);
     height: 100vh;
     }

this is my sidenavbar component.

enter image description here

My sidenavbar works as intended if i remove the sections, i have tried setting a max width and transparent background for the sections so they dont overwrite the sidenavbar but they still overwrite it. what is the correct way to create different sections?

enter image description here

i added a red background for the home section so its easier to see what its doing.

Solution

  • You probably want to do something like this for your sidebar to fix it on the side and have it take up the full screen.

    This will fix the sidebar in a position on the screen (0px away from the top and 0px away from the bottom).

    You then define the width and you have a fixed sidebar!

    Hope that helps!

    .sidebar {
    top: 0px;
    bottom: 0px;
    width: 200px;
    position: fixed;
    background-color: blue;
}
    <div class='sidebar'></div>