Add startups sidebar to partners (#2688)

* Add sidebar for startup partners

[CORE-609]

* Filter out null partnership_level, fix up formatting

* Format for mobile

* Code review fixups

* Prettier main-menu

Author: RoyEJohnson

src/app/layouts/default/header/menus/main-menu/main-menu.js

@@ -7,17 +7,23 @@ import {
 } from '~/components/language-selector/language-selector';
 import {FormattedMessage} from 'react-intl';
 import {useLocation} from 'react-router-dom';
-import { useDataFromSlug } from '~/helpers/page-data-utils';
+import {useDataFromSlug} from '~/helpers/page-data-utils';
 import Dropdown, {MenuItem} from './dropdown/dropdown';
 import LoginMenu from './login-menu/login-menu';
 import GiveButton from '../give-button/give-button';
 import {treatSpaceOrEnterAsClick} from '~/helpers/events';
 import './main-menu.scss';
 
 function DropdownOrMenuItem({item}) {
+    if (! item.name && ! item.label) {
+        return null;
+    }
     if ('menu' in item) {
         return (
-            <Dropdown label={item.name} navAnalytics={`Main Menu (${item.name})`}>
+            <Dropdown
+                label={item.name}
+                navAnalytics={`Main Menu (${item.name})`}
+            >
                 <MenusFromStructure structure={item.menu} />
             </Dropdown>
         );
@@ -43,18 +49,11 @@ function MenusFromCMS() {
         return null;
     }
 
-    return (
-        <MenusFromStructure structure={structure} />
-    );
+    return <MenusFromStructure structure={structure} />;
 }
 
 function K12MenuItem() {
-    return (
-        <MenuItem
-            label='&#127822; For K12 Teachers'
-            url='/k12'
-        />
-    );
+    return <MenuItem label="&#127822; For K12 Teachers" url="/k12" />;
 }
 
 function SubjectsMenu() {
@@ -69,27 +68,38 @@ function SubjectsMenu() {
     }
 
     return (
-        <Dropdown className='subjects-dropdown' label='Subjects' navAnalytics="Main Menu (Subjects)">
-            {categories.filter((obj) => obj.html !== 'K12').map((obj) => (
-                <MenuItem
-                    key={obj.value}
-                    label={obj.html}
-                    url={`/subjects/${obj.value}`}
-                />
-            ))}
+        <Dropdown
+            className="subjects-dropdown"
+            label="Subjects"
+            navAnalytics="Main Menu (Subjects)"
+        >
+            {categories
+                .filter((obj) => obj.html !== 'K12')
+                .map((obj) => (
+                    <MenuItem
+                        key={obj.value}
+                        label={obj.html}
+                        url={`/subjects/${obj.value}`}
+                    />
+                ))}
             {pathname.startsWith('/details/books') ? null : (
                 <React.Fragment>
                     <LanguageSelectorWrapper>
-                        <FormattedMessage id='view' defaultMessage='View' />{' '}
+                        <FormattedMessage id="view" defaultMessage="View" />{' '}
                         <LanguageLink locale={otherLocale} />
                     </LanguageSelectorWrapper>
                     <LanguageSelectorWrapper>
-                        <FormattedMessage id='view' defaultMessage='View' />{' '}
-                        <LanguageLink locale='pl' />
+                        <FormattedMessage id="view" defaultMessage="View" />{' '}
+                        <LanguageLink locale="pl" />
                     </LanguageSelectorWrapper>
                 </React.Fragment>
-        )}
-            {language === 'en' ? <React.Fragment><hr /><K12MenuItem /></React.Fragment> : null}
+            )}
+            {language === 'en' ? (
+                <React.Fragment>
+                    <hr />
+                    <K12MenuItem />
+                </React.Fragment>
+            ) : null}
         </Dropdown>
     );
 }
@@ -99,12 +109,18 @@ function navigateWithArrows(event) {
         case 'ArrowRight':
             event.preventDefault();
             event.stopPropagation();
-            event.target.closest('li').nextElementSibling?.querySelector('a').focus();
+            event.target
+                .closest('li')
+                .nextElementSibling?.querySelector('a')
+                .focus();
             break;
         case 'ArrowLeft':
             event.preventDefault();
             event.stopPropagation();
-            event.target.closest('li').previousElementSibling?.querySelector('a').focus();
+            event.target
+                .closest('li')
+                .previousElementSibling?.querySelector('a')
+                .focus();
             break;
         default:
             break;
@@ -117,7 +133,7 @@ export function MainMenuItems() {
         <React.Fragment>
             <SubjectsMenu />
             <MenusFromCMS />
-            <li className='give-button-item' role='presentation'>
+            <li className="give-button-item" role="presentation">
                 <GiveButton />
             </li>
             <LoginMenu />
@@ -127,7 +143,11 @@ export function MainMenuItems() {
 
 export default function MainMenu() {
     return (
-        <ul className='nav-menu main-menu no-bullets' data-analytics-nav="Main Menu" onKeyDown={navigateWithArrows}>
+        <ul
+            className="nav-menu main-menu no-bullets"
+            data-analytics-nav="Main Menu"
+            onKeyDown={navigateWithArrows}
+        >
             <MainMenuItems />
         </ul>
     );

src/app/pages/partners/active-filters/active-filters.scss

@@ -2,6 +2,7 @@
 
 .active-filters {
     @extend %content;
+
     padding: 0;
 
     @include wider-than($phone-max) {

src/app/pages/partners/results/results.scss

@@ -2,9 +2,7 @@
 @import 'mixins/placeholder-selectors';
 
 .partners .results {
-    align-items: start;
-    padding: 2rem 0 20rem;
-    row-gap: 2rem;
+    padding: 2rem $normal-margin 20rem;
 
     @include width-up-to($phone-max) {
         padding: 0 $normal-margin 6rem;
@@ -14,6 +12,16 @@
         min-height: 60rem;
     }
 
+    >:first-child {
+        @include width-up-to($phone-max) {
+            margin-bottom: $normal-margin;
+        }
+    
+        @include wider-than($phone-max) {
+            margin-bottom: 3rem;
+        }
+    }
+
     h2 {
         margin: 0;
     }
@@ -104,4 +112,73 @@
             }
         }
     }
+
+    .boxed {
+        gap: 3rem;
+
+        @include width-up-to($phone-max) {
+            gap: $normal-margin;
+            padding: 0;
+        }
+    }
+
+    .with-sidebar {
+        h2 {
+            text-align: center;
+        }
+
+        @include width-up-to($phone-max) {
+            > .boxed {
+                padding: 0;
+            }
+
+            &,
+            .sidebar-content {
+                display: flex;
+                flex-direction: column;
+                gap: $normal-margin;
+            }
+        }
+
+        @include wider-than($phone-max) {
+            display: flex;
+            flex-direction: row;
+            gap: 3rem;
+            max-width: 120rem;
+            margin: 0 auto;
+            padding-right: $normal-margin;    
+
+            .grid {
+                max-width: unset;
+            }
+    
+            > .sidebar {
+                min-width: 20rem;
+                border: thin solid black;
+                height: max-content;
+
+                .sidebar-content {
+                    background-color: ui-color(white);
+                }
+
+                h2 {
+                    @include set-font(h3);
+
+                    background-color: os-color(gray);
+                    color: ui-color(white);
+                    padding: $normal-margin;
+                }
+
+                .grid {
+                    gap: 0.2rem;
+                }
+
+                .card {
+                    border-radius: 0;
+                    box-shadow: none;
+                    border-bottom: thin solid ui-color(form-border);
+                }
+            }
+        }
+    }
 }