From 920bbe4bacd5bf5d60a0fc00a0609c2fde619b7c Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Wed, 29 May 2024 15:23:50 +0300
Subject: [PATCH] Merge pull request #18527 from
 overleaf/ii-bs5-projects-structure

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

GitOrigin-RevId: 9096d6932980c10816411fc18570ad88df68a6d6
---
 .../components/project-list-root.tsx          |  9 ++-
 .../components/sidebar/sidebar.tsx            |  7 +-
 .../stylesheets/app/project-list-react.less   |  2 +-
 .../stylesheets/bootstrap-5/pages/all.scss    |  1 +
 .../bootstrap-5/pages/project-list-react.scss | 65 +++++++++++++++++++
 5 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/project-list-react.scss

diff --git a/services/web/frontend/js/features/project-list/components/project-list-root.tsx b/services/web/frontend/js/features/project-list/components/project-list-root.tsx
index c23c545e5c..fa6ecd1abb 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-root.tsx
+++ b/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 />
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx b/services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx
index 2a3f05038e..6ce451607d 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx
+++ b/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` }),
diff --git a/services/web/frontend/stylesheets/app/project-list-react.less b/services/web/frontend/stylesheets/app/project-list-react.less
index 4669ceaf07..65121d9ba9 100644
--- a/services/web/frontend/stylesheets/app/project-list-react.less
+++ b/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;
   }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
index 3aa7223932..a53ccd31bc 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
@@ -1 +1,2 @@
 @import 'account-settings';
+@import 'project-list-react';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-react.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-react.scss
new file mode 100644
index 0000000000..b355eb6624
--- /dev/null
+++ b/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);
+  }
+}