Structuring Sidebar in React

Question

Relatively new to React, and am wanting to recreate the design below

enter image description here

I have the base formatting down, but as you will notice, there are lines separating the logo blocks, from the login and signup blocks, with the signup and login buttons pushed to the bottom.

Below is my current code

CSS:

    width: 100vw;
    height: 100vh;
  }
  
  body {
    margin: 0;
    padding: 0;

  }

.Sidebar {
    height: 100%;
    width: 20%;
    background-color: white;
    border-right: 1px solid #F0F4FB;
    padding-left: 15px;
    box-sizing: border-box;

  }

  .SidebarList {
    height: auto;
    width: 100%;
    padding-left: 15px;
    font-size: 18px;
    border: 2px #FD954E;
    box-sizing: border-box


  }

  .SidebarList .row {
      width: 100%;
      height: 50px;
      background-color: white;
      list-style-type: none;
      margin: 0%;
      padding-bottom: 15px;
      display: flex;
      color: #A7ACB6;
      justify-content: center;
      align-items: center;
      font-family: Arial, Helvetica, sans-serif;

  }

.SidebarList .row:hover {
  cursor: pointer;
  background-color: #E7E7E7  ;
}

.SidebarList #active {
  background-color: white;
  color: #FD954E
}


.SidebarList .Login {
background-color: white;
color: #FD954E;
width: 279px;
height: 39px;
right: 1596px;
top: 958px;
border: 1px solid #FD954E;
box-sizing: border-box;
border-radius: 19.5px;
}

.SidebarList .SignUp {

  width: 279px;
  height: 39px;
  right: 1596px;
  top: 1011px;
  
  background: #FD954E;
  border-radius: 19.5px;
  border: none;
  }

  .row #icon {
    flex: 30%;
    display: grid;
    place-items: center;
    transform: scale(1.2)

  }

  .row #title {
    flex: 70%;
  }



.Logo {
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 30px;
  border-bottom: 1px solid #F0F4FB;
  width: 55%;

}

Sidebar.js

import React from "react";
import "../App.css";
import { SidebarData } from './SidebarData'
import Logo from './Logo.svg'

function Sidebar() {
    return ( 
    <div className="Sidebar">
        <div>
        <img src = {Logo} alt='Logo’ className=‘Logo’ />

        </div>
           <ul className="SidebarList">
               {SidebarData.map((val, key) => {
                 return (
                  <li 
                    key={key} 
                    className="row"
                    id={window.location.pathname == val.link ? "active" : ""}
                    onClick={() => {
                        window.location.pathname = val.link;
                        }}
                    >
                      <div id="icon">{val.icon}</div> <div id="title">{val.title}</div>
                      </li>
               );
               })}
        
            </ul>
<div className= "SidebarList">
            <button className="Login">
                Login
            </button>
            </div>
            <div className= "SidebarList">
            <button className="SignUp">
                Sign Up
            </button>
    </div>
    </div>
    );
}

export default Sidebar;

How should I structure my code in order to acheive my desired result? Ex: with the logo at the top with the seperator, the list of navigation elements, and then the login and signup buttons at the bottom with the seperator?

Currently, my sidebar looks as follows, with the seperator not full width between the logo and navigation elements, and the buttons extending beyond the sidebar.

enter image description here

Answer 1

It would be easier to simplify the problem with just HTML and CSS as that's much easier to troubleshoot. Part of your problem is that you are defining the width of the sidebar as a percentage of the screen width but elements within the sidebar are defined with a width in pixels. When the browser window is too small, your buttons will appear outside the full width of the sidebar. You could either code all your values as percentages or in pixels. Alternatively, you could use a mix and just set a min-width for the sidebar so that you don't end up with elements out of place.

The reason that your line break is not the full width of your sidebar is because you are defining it with the border-bottom property of the logo. Your logo is not 100% the width of the sidebar so your line break will only be the width of the logo. A better solution would be to define a div that is set to width: 100%. This way, you will have more control.

Here is a simplified solution to your sidebar problem using pixels to define the widths.

HTML:

<div class="sidebar">
  <div class="header">
    <div class="logo">Logo</div>
  </div>
  <div class="line-break" />
  <div class="content">
    <ul class="nav">
      <li>Home</li>
      <li>Blog</li>
    </ul>
  </div>
  <div class="line-break" />
  <div class="footer">
    <button class="login">Login</button>
    <button class="sign-up">Sign up</button>
  </div>
</div>

CSS:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.sidebar {
  width: 300px;
  height: 100%;
  border-right: 1px solid grey;
}

.line-break {
  height: 1px;
  width: 100%;
  background-color: grey;
}

.header .logo {
  height: 40px;
  width: 200px;
  background-color: grey;
  margin: 20px;
}

ul.nav {
  list-style-type: none;
  padding: 20px 0 0 40px;
}

ul.nav li {
  margin-bottom: 14px;
}

ul.nav li:last-child {
  margin-bottom: 0;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.footer button {
  padding: 6px 0;
  width: 80%;
  margin-bottom: 14px;
}

.footer button:last-child {
  margin-bottom: 0;
}

And here is a link to a CodePen where you can see this in action.