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/js/features/project-list/components/project-list-root.tsx

@@ -26,6 +26,8 @@ import { useEffect } from 'react'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
 import { GenericErrorBoundaryFallback } from '../../../shared/components/generic-error-boundary-fallback'
 import { SplitTestProvider } from '@/shared/context/split-test-context'
+import { bsVersion } from '@/features/utils/bootstrap-5'
+import classnames from 'classnames'
 
 function ProjectListRoot() {
   const { isReady } = useWaitForI18n()
@@ -79,7 +81,12 @@ function ProjectListPageContent() {
     <>
       <SystemMessages />
 
-      <div className="project-list-wrapper clearfix container mx-0 px-0">
+      <div
+        className={classnames(
+          'project-list-wrapper',
+          bsVersion({ bs3: 'clearfix container mx-0 px-0' })
+        )}
+      >
         {totalProjectsCount > 0 ? (
           <>
             <Sidebar />

services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx

@@ -3,6 +3,8 @@ import SidebarFilters from './sidebar-filters'
 import AddAffiliation, { useAddAffiliation } from '../add-affiliation'
 import SurveyWidget from '../survey-widget'
 import { usePersistedResize } from '../../../../shared/hooks/use-resize'
+import { bsVersion } from '@/features/utils/bootstrap-5'
+import classnames from 'classnames'
 
 function Sidebar() {
   const { show: showAddAffiliationWidget } = useAddAffiliation()
@@ -12,7 +14,10 @@ function Sidebar() {
 
   return (
     <div
-      className="project-list-sidebar-wrapper-react hidden-xs"
+      className={classnames(
+        'project-list-sidebar-wrapper-react',
+        bsVersion({ bs5: 'd-none d-md-block', bs3: 'hidden-xs' })
+      )}
       {...getTargetProps({
         style: {
           ...(mousePos?.x && { flexBasis: `${mousePos.x}px` }),

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);
+  }
+}