Source:  Twitter logo

I was making a simple webpage with reactJs. it's still not functional but before i wanted design and architecture it. I am having issues designing it. Currently it looks like this https://ibb.co/4TCRwTY but when i scroll down it look like this https://ibb.co/kJC3p9q How do i make it so sidebar and content lines side by side and also they don't overlap header/footer. Also when scroll down i want sidebar to scroll all the way its content's content. I know colors look ridiculous but they are to differentiate components visually. Does regular HTML/CSS (like flexbox) better option for this simple webpage or should i consider using pure reactjs components? Any help will be appreciated. Thanks

App.css

html, body {
    width: 100%;
    height: 100%;
    background: orange;
}
.sidenav { 
    float:left; 
    width:20%; 
    height: 100vh;
    background:darkslategray; 
    overflow-x: hidden; 
    padding-top: 60px;  
}
.sidenav p {
  padding-left: 45px;
  text-decoration: none;
  font-size: 20px;
  color: white;
}
.sidenav p:hover {
  color: blue;
}

.contents {
  height: 100vh;
  /* float:left; */
  padding: 60px 10px 60px 30px;
  background: gray; 
  align-items:center;
}

img {
    width: 800px;
    height: 1000px;
    margin-left: 80px;
  } 
header {
    position:fixed;
    width:100%;
    top:0px;
    background:darkslateblue;
    text-align: end;
    padding: 10px 20px 10px 0px;
    /* margin-bottom: 0!important; */
  }

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: darkslateblue;
    text-align: end;
    padding: 10px 20px 10px 0px;
}

h3 {
  text-align: center; 
  font-size: 1.4em; 
  margin: 0px auto; 
  padding: 0px 0px 5px 0px; 
}

App.js

class App extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <>
        <Header/>
        <Sidebar/>
        <Footer/>
      </>
    );
  }
}
export default App;

Sidebar.jsx

const Sidebar = () => {
    return (
    <Router>
        <div className="sidenav">
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
        </div> 
        <div className="contents">
        <Switch>
            <Route exact path="/">
                <BlogContents/>
            </Route>
        </Switch>
        </div>
    </Router>
    );
  }

BlogContent.jsx

function BlogContents() {
    return (
        <>
            <h3>My Recent Trip</h3>
            <p>blablaa
                janjnkjadn
                nacndcjds
                j cjdcscsdc
                rfcscndcvnsj
                amns am dasd
                s cweurbfskjdncsknjc!jknckjnvkerjnvejvnernvernvfjnv,
                fv mc mdf cdf fd nd csdc dewd wedwedwedew aknxjanc
            </p>
            <img src="https://images.unsplash.com/photo-1560214482-85e7339701c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=902&q=80"/>
        </>
    );
  }

Footer.jsx

function Footer() {
    return (
    <footer>
        This is Footer
    </footer>
    );
  }

Header.jsx

function Header() {
    return (
        <header> Home | Contact </header>
    );
  }

Flexbox would work great for your site, and most in my opinion. I would also avoid using 100vh for your heights when possible. That will set the height to the view height of your screen when loaded, not the height of your whole page if it is scrollable beyond the screen height.

If you want the sidebar to take the entire height of the page you can set it to the window.outerHeight. Example below:

const Sidebar = () => {
// Variable to get window view height
const viewHeight = window.outerHeight;
return (
<Router>
    // added the style to the div, the .sidenav style will still work from your app.css sheet as well
    <div style={{ height: viewHeight }} className="sidenav">
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
    </div> 
    <div className="contents">
    <Switch>
        <Route exact path="/">
            <BlogContents/>
        </Route>
    </Switch>
    </div>
</Router>
)};

For your img, you'll pry want the width of that to be a %, so it will adjust for different screen sizes. You only need to give the img a width, the height will be created automatically based on the aspect ratio of the image. I would also set a max-width to control the image from not taking over the screen on bigger screens. Try the below code for your img:

img {
  width: 50%;
  max-width: 400px;
  margin-left: 80px;
} 
1 users liked answer #0dislike answer #01
Brice profile pic
Brice

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).