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` }),