aligning svg's with text and creating underlines that don't "chop" at the end due to margins.

          <button id="upcomingLink" class="sidebar-btn">
            <svg class="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <title>calendar-week</title>
              <path
                d="M6 1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.89 3.89 3 5 3H6V1M5 8V19H19V8H5M7 10H17V12H7V10Z" />
            </svg>
            Upcoming
          </button>

          <button id="upcomingLink" class="sidebar-btn">
            <svg class="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <title>calendar-week</title>
              <path
                d="M6 1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.89 3.89 3 5 3H6V1M5 8V19H19V8H5M7 10H17V12H7V10Z" />
            </svg>
            Upcoming
          </button>

          <h3 class="projectTitleText"><svg class="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <title>list-box-outline</title>
              <path
                d="M11 15H17V17H11V15M9 7H7V9H9V7M11 13H17V11H11V13M11 9H17V7H11V9M9 11H7V13H9V11M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H5V19H19V5M9 15H7V17H9V15Z" />
            </svg>
            Projects</h3>

          <h3 class="projectTitleText"><svg class="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <title>list-box-outline</title>
              <path
                d="M11 15H17V17H11V15M9 7H7V9H9V7M11 13H17V11H11V13M11 9H17V7H11V9M9 11H7V13H9V11M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H5V19H19V5M9 15H7V17H9V15Z" />
            </svg>
            Projects</h3>

function renderProjects() {
  return state.projects
    .map((project) => {
      return `<div class="project-title-list"><li> ${project.title} </li> <button class="project-btn" id="btn-${project.id}"> X </button></div>`;
    })
    .reduce((acc, elm) => acc + elm, []);
}

function renderContent() {
  const projectListEl = document.querySelector("#project-list");
  projectListEl.innerHTML = renderProjects();
  state.projects.forEach((project) => {
    document
      .querySelector(`#btn-${project.id}`)
      .addEventListener("click", () => removeProject(project.id));
  });

  if (state.page == "home") {
    renderHome();

    const addTaskBtn = document.getElementById("addTaskBtn");
    addTaskBtn.addEventListener("click", () => {
      taskCreation();
    });
  }
}

const homeLink = document.querySelector("#homeLink");
homeLink.addEventListener("click", () => {
  renderContent();
});

function renderProjects() {
  return state.projects
    .map((project) => {
      return `<div class="project-title-list"><li> ${project.title} </li> <button class="project-btn" id="btn-${project.id}"> X </button></div>`;
    })
    .reduce((acc, elm) => acc + elm, []);
}

function renderContent() {
  const projectListEl = document.querySelector("#project-list");
  projectListEl.innerHTML = renderProjects();
  state.projects.forEach((project) => {
    document
      .querySelector(`#btn-${project.id}`)
      .addEventListener("click", () => removeProject(project.id));
  });

  if (state.page == "home") {
    renderHome();

    const addTaskBtn = document.getElementById("addTaskBtn");
    addTaskBtn.addEventListener("click", () => {
      taskCreation();
    });
  }
}

const homeLink = document.querySelector("#homeLink");
homeLink.addEventListener("click", () => {
  renderContent();
});