From 0c301fcf0c5d878f985d3e93c65d8172699811b6 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 26 Feb 2021 10:51:14 -0800
Subject: [PATCH] fix: Enlarge scrollable area in sidebar for improved UX on
 small screens

---
 app/components/Scrollable.js                 |   6 +-
 app/components/Sidebar/Main.js               | 177 +++++++++----------
 app/components/Sidebar/components/Section.js |   6 +-
 3 files changed, 94 insertions(+), 95 deletions(-)

diff --git a/app/components/Scrollable.js b/app/components/Scrollable.js
index 762301a6..2c686970 100644
--- a/app/components/Scrollable.js
+++ b/app/components/Scrollable.js
@@ -8,9 +8,10 @@ type Props = {|
   shadow?: boolean,
   topShadow?: boolean,
   bottomShadow?: boolean,
+  flex?: boolean,
 |};
 
-function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
+function Scrollable({ shadow, topShadow, bottomShadow, flex, ...rest }: Props) {
   const ref = React.useRef<?HTMLDivElement>();
   const [topShadowVisible, setTopShadow] = React.useState(false);
   const [bottomShadowVisible, setBottomShadow] = React.useState(false);
@@ -42,6 +43,7 @@ function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
     <Wrapper
       ref={ref}
       onScroll={updateShadows}
+      $flex={flex}
       $topShadowVisible={topShadowVisible}
       $bottomShadowVisible={bottomShadowVisible}
       {...rest}
@@ -50,6 +52,8 @@ function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
 }
 
 const Wrapper = styled.div`
+  display: ${(props) => (props.$flex ? "flex" : "block")};
+  flex-direction: column;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
diff --git a/app/components/Sidebar/Main.js b/app/components/Sidebar/Main.js
index 69c4f021..eb563117 100644
--- a/app/components/Sidebar/Main.js
+++ b/app/components/Sidebar/Main.js
@@ -81,96 +81,92 @@ function MainSidebar() {
           />
         )}
       </AccountMenu>
-      <Flex auto column>
-        <Scrollable shadow>
-          <Section>
+      <Scrollable flex topShadow>
+        <Section>
+          <SidebarLink
+            to="/home"
+            icon={<HomeIcon color="currentColor" />}
+            exact={false}
+            label={t("Home")}
+          />
+          <SidebarLink
+            to={{
+              pathname: "/search",
+              state: { fromMenu: true },
+            }}
+            icon={<SearchIcon color="currentColor" />}
+            label={t("Search")}
+            exact={false}
+          />
+          <SidebarLink
+            to="/starred"
+            icon={<StarredIcon color="currentColor" />}
+            exact={false}
+            label={t("Starred")}
+          />
+          <SidebarLink
+            to="/templates"
+            icon={<ShapesIcon color="currentColor" />}
+            exact={false}
+            label={t("Templates")}
+            active={documents.active ? documents.active.template : undefined}
+          />
+          <SidebarLink
+            to="/drafts"
+            icon={<EditIcon color="currentColor" />}
+            label={
+              <Drafts align="center">
+                {t("Drafts")}
+                <Bubble count={documents.totalDrafts} />
+              </Drafts>
+            }
+            active={
+              documents.active
+                ? !documents.active.publishedAt &&
+                  !documents.active.isDeleted &&
+                  !documents.active.isTemplate
+                : undefined
+            }
+          />
+        </Section>
+        <Section auto>
+          <Collections onCreateCollection={handleCreateCollectionModalOpen} />
+        </Section>
+        <Section>
+          <SidebarLink
+            to="/archive"
+            icon={<ArchiveIcon color="currentColor" />}
+            exact={false}
+            label={t("Archive")}
+            active={
+              documents.active
+                ? documents.active.isArchived && !documents.active.isDeleted
+                : undefined
+            }
+          />
+          <SidebarLink
+            to="/trash"
+            icon={<TrashIcon color="currentColor" />}
+            exact={false}
+            label={t("Trash")}
+            active={documents.active ? documents.active.isDeleted : undefined}
+          />
+          <SidebarLink
+            to="/settings"
+            icon={<SettingsIcon color="currentColor" />}
+            exact={false}
+            label={t("Settings")}
+          />
+          {can.invite && (
             <SidebarLink
-              to="/home"
-              icon={<HomeIcon color="currentColor" />}
-              exact={false}
-              label={t("Home")}
+              to="/settings/people"
+              onClick={handleInviteModalOpen}
+              icon={<PlusIcon color="currentColor" />}
+              label={`${t("Invite people")}…`}
             />
-            <SidebarLink
-              to={{
-                pathname: "/search",
-                state: { fromMenu: true },
-              }}
-              icon={<SearchIcon color="currentColor" />}
-              label={t("Search")}
-              exact={false}
-            />
-            <SidebarLink
-              to="/starred"
-              icon={<StarredIcon color="currentColor" />}
-              exact={false}
-              label={t("Starred")}
-            />
-            <SidebarLink
-              to="/templates"
-              icon={<ShapesIcon color="currentColor" />}
-              exact={false}
-              label={t("Templates")}
-              active={documents.active ? documents.active.template : undefined}
-            />
-            <SidebarLink
-              to="/drafts"
-              icon={<EditIcon color="currentColor" />}
-              label={
-                <Drafts align="center">
-                  {t("Drafts")}
-                  <Bubble count={documents.totalDrafts} />
-                </Drafts>
-              }
-              active={
-                documents.active
-                  ? !documents.active.publishedAt &&
-                    !documents.active.isDeleted &&
-                    !documents.active.isTemplate
-                  : undefined
-              }
-            />
-          </Section>
-          <Section>
-            <Collections onCreateCollection={handleCreateCollectionModalOpen} />
-          </Section>
-        </Scrollable>
-        <Secondary>
-          <Section>
-            <SidebarLink
-              to="/archive"
-              icon={<ArchiveIcon color="currentColor" />}
-              exact={false}
-              label={t("Archive")}
-              active={
-                documents.active
-                  ? documents.active.isArchived && !documents.active.isDeleted
-                  : undefined
-              }
-            />
-            <SidebarLink
-              to="/trash"
-              icon={<TrashIcon color="currentColor" />}
-              exact={false}
-              label={t("Trash")}
-              active={documents.active ? documents.active.isDeleted : undefined}
-            />
-            <SidebarLink
-              to="/settings"
-              icon={<SettingsIcon color="currentColor" />}
-              exact={false}
-              label={t("Settings")}
-            />
-            {can.invite && (
-              <SidebarLink
-                to="/settings/people"
-                onClick={handleInviteModalOpen}
-                icon={<PlusIcon color="currentColor" />}
-                label={`${t("Invite people")}…`}
-              />
-            )}
-          </Section>
-        </Secondary>
-      </Flex>
+          )}
+        </Section>
+      </Scrollable>
       {can.invite && (
         <Modal
           title={t("Invite people")}
@@ -191,11 +187,6 @@ function MainSidebar() {
   );
 }
 
-const Secondary = styled.div`
-  overflow-x: hidden;
-  flex-shrink: 0;
-`;
-
 const Drafts = styled(Flex)`
   height: 24px;
 `;
diff --git a/app/components/Sidebar/components/Section.js b/app/components/Sidebar/components/Section.js
index b18d275a..2469fa9d 100644
--- a/app/components/Sidebar/components/Section.js
+++ b/app/components/Sidebar/components/Section.js
@@ -5,9 +5,13 @@ import Flex from "components/Flex";
 const Section = styled(Flex)`
   position: relative;
   flex-direction: column;
-  margin: 20px 8px;
+  margin: 0 8px 20px;
   min-width: ${(props) => props.theme.sidebarMinWidth}px;
   flex-shrink: 0;
+
+  &:first-child {
+    margin-top: 20px;
+  }
 `;
 
 export default Section;