Add User Card and Logout Button to Sidebar (#1405)

* feat: add user card and logout button to sidebar

Co-Authored-By: Junyan Qin <Chin> <rockchinq@gmail.com>

* feat: add test code to set dummy values in localStorage

Co-Authored-By: Junyan Qin <Chin> <rockchinq@gmail.com>

* style: fix formatting issues in HomeSidebar.tsx

Co-Authored-By: Junyan Qin <Chin> <rockchinq@gmail.com>

* style: fix whitespace in HomeSidebar.tsx

Co-Authored-By: Junyan Qin <Chin> <rockchinq@gmail.com>

* perf: styles of logout button

* fix: lint errors

* fix: lint errors

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Junyan Qin <Chin> <rockchinq@gmail.com>

web/src/app/home/components/home-sidebar/HomeSidebar.module.css

@@ -8,6 +8,7 @@
   align-items: flex-start;
   justify-content: space-between;
   padding-block: 1rem;
+  padding-left: 0.4rem;
   user-select: none;
   /* box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); */
 }
@@ -54,13 +55,18 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 0.8rem;
+}
+
+.sidebarItemsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
 }
 
 .sidebarChildContainer {
   width: 9rem;
   height: 3rem;
-  margin: 0.8rem 0;
   padding-left: 1.6rem;
   font-size: 1rem;
   border-radius: 12px;
@@ -70,6 +76,7 @@
   justify-content: flex-start;
   cursor: pointer;
   gap: 0.5rem;
+  /* background-color: aqua; */
 }
 
 .sidebarSelected {
@@ -90,11 +97,12 @@
 
 .sidebarBottomContainer {
   width: 100%;
-  height: 100px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin-top: auto;
+  padding-bottom: 1rem;
 }
 
 .sidebarBottomChildContainer {