Merge pull request #18527 from overleaf/ii-bs5-projects-structure

[web] Create the sidebar and projects columns in dashboard page (BS5)

GitOrigin-RevId: 9096d6932980c10816411fc18570ad88df68a6d6

services/web/frontend/stylesheets/app/project-list-react.less

@@ -185,7 +185,7 @@
   }
 
   .project-list-main-react {
-    max-width: 100%;
+    flex: 1;
     overflow-x: hidden;
     padding: @content-margin-vertical @grid-gutter-width / 2;
   }

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -1 +1,2 @@
 @import 'account-settings';
+@import 'project-list-react';

services/web/frontend/stylesheets/bootstrap-5/pages/project-list-react.scss

@@ -0,0 +1,65 @@
+.project-list-react {
+  body > &.content {
+    padding-top: $header-height;
+    padding-bottom: 0;
+    min-height: calc(100vh - #{$header-height});
+    display: flex;
+    flex-direction: column;
+  }
+
+  .project-list-wrapper {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    min-height: calc(100vh - #{$header-height});
+  }
+
+  .project-list-sidebar-wrapper-react {
+    position: relative;
+    background-color: var(--bg-dark-secondary);
+    flex: 0 0 15%;
+    min-height: calc(100vh - #{$header-height});
+    max-width: 320px;
+    min-width: 200px;
+
+    .project-list-sidebar-subwrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      .project-list-sidebar-react {
+        flex-grow: 1;
+        padding-left: var(--spacing-06);
+        padding-right: var(--spacing-06);
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        padding-top: var(--spacing-08);
+        padding-bottom: var(--spacing-08);
+        color: var(--neutral-40);
+
+        .small {
+          color: var(--neutral-40);
+        }
+
+        button {
+          white-space: normal;
+          word-wrap: anywhere;
+          // prevents buttons from expanding sidebar width
+        }
+
+        > .dropdown {
+          width: 100%;
+
+          .new-project-button {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .project-list-main-react {
+    flex: 1;
+    overflow-x: hidden;
+    padding: var(--spacing-08) var(--spacing-06);
+  }
+}