From 0d5f45b9b41a5bc12842517ec8f615657dbe0689 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 8 Dec 2020 15:00:03 -0800
Subject: [PATCH] Move sidebar Add Board button to bottom

---
 webapp/src/components/sidebar.scss |  10 +-
 webapp/src/components/sidebar.tsx  | 146 ++++++++++++++---------------
 2 files changed, 79 insertions(+), 77 deletions(-)

diff --git a/webapp/src/components/sidebar.scss b/webapp/src/components/sidebar.scss
index d2fdd0352..fa6cb248b 100644
--- a/webapp/src/components/sidebar.scss
+++ b/webapp/src/components/sidebar.scss
@@ -7,7 +7,7 @@
 	min-height: 100%;
 	color: rgb(var(--sidebar-fg));
 	background-color: rgb(var(--sidebar-bg));
-    padding: 10px 0;
+    padding-top: 10px;
 
     &.hidden {
         position: absolute;
@@ -26,12 +26,12 @@
     }
 
     >* {
-        flex-shrink: 0;
+        flex: 0 0 auto;
     }
 
     .octo-sidebar-list {
+        flex: 1 1 auto;
         overflow-y: auto;
-        max-height: calc(100% - 78px);
         max-width: 250px;
     }
 
@@ -135,4 +135,8 @@
         stroke: rgba(var(--sidebar-fg), 0.5);
         stroke-width: 6px;
     }
+
+    .Button {
+        min-height: 30px;
+    }
 }
diff --git a/webapp/src/components/sidebar.tsx b/webapp/src/components/sidebar.tsx
index b5257d6f1..0453f01bf 100644
--- a/webapp/src/components/sidebar.tsx
+++ b/webapp/src/components/sidebar.tsx
@@ -181,84 +181,82 @@ class Sidebar extends React.Component<Props, State> {
                             )
                         })
                     }
-
-                    <br/>
-
-                    <MenuWrapper>
-                        <Button>
-                            <FormattedMessage
-                                id='Sidebar.add-board'
-                                defaultMessage='+ Add Board'
-                            />
-                        </Button>
-                        <Menu position='top'>
-                            <Menu.Label>
-                                <b>
-                                    <FormattedMessage
-                                        id='Sidebar.select-a-template'
-                                        defaultMessage='Select a template'
-                                    />
-                                </b>
-                            </Menu.Label>
-
-                            <Menu.Separator/>
-
-                            {workspaceTree.boardTemplates.map((boardTemplate) => {
-                                let displayName = boardTemplate.title || intl.formatMessage({id: 'Sidebar.untitled', defaultMessage: 'Untitled'})
-                                if (boardTemplate.icon) {
-                                    displayName = `${boardTemplate.icon} ${displayName}`
-                                }
-                                return (
-                                    <Menu.Text
-                                        key={boardTemplate.id}
-                                        id={boardTemplate.id}
-                                        name={displayName}
-                                        onClick={() => {
-                                            this.addBoardFromTemplate(boardTemplate.id)
-                                        }}
-                                        rightIcon={
-                                            <MenuWrapper stopPropagationOnToggle={true}>
-                                                <IconButton icon={<OptionsIcon/>}/>
-                                                <Menu position='left'>
-                                                    <Menu.Text
-                                                        id='edit'
-                                                        name={intl.formatMessage({id: 'Sidebar.edit-template', defaultMessage: 'Edit'})}
-                                                        onClick={() => {
-                                                            this.props.showBoard(boardTemplate.id)
-                                                        }}
-                                                    />
-                                                    <Menu.Text
-                                                        icon={<DeleteIcon/>}
-                                                        id='delete'
-                                                        name={intl.formatMessage({id: 'Sidebar.delete-template', defaultMessage: 'Delete'})}
-                                                        onClick={async () => {
-                                                            await mutator.deleteBlock(boardTemplate, 'delete board template')
-                                                        }}
-                                                    />
-                                                </Menu>
-                                            </MenuWrapper>
-                                        }
-                                    />
-                                )
-                            })}
-
-                            <Menu.Text
-                                id='empty-template'
-                                name={intl.formatMessage({id: 'Sidebar.empty-board', defaultMessage: 'Empty board'})}
-                                onClick={this.addBoardClicked}
-                            />
-
-                            <Menu.Text
-                                id='add-template'
-                                name={intl.formatMessage({id: 'Sidebar.add-template', defaultMessage: '+ New template'})}
-                                onClick={this.addBoardTemplateClicked}
-                            />
-                        </Menu>
-                    </MenuWrapper>
                 </div>
 
                 <div className='octo-spacer'/>
 
+                <MenuWrapper>
+                    <Button>
+                        <FormattedMessage
+                            id='Sidebar.add-board'
+                            defaultMessage='+ Add Board'
+                        />
+                    </Button>
+                    <Menu position='top'>
+                        <Menu.Label>
+                            <b>
+                                <FormattedMessage
+                                    id='Sidebar.select-a-template'
+                                    defaultMessage='Select a template'
+                                />
+                            </b>
+                        </Menu.Label>
+
+                        <Menu.Separator/>
+
+                        {workspaceTree.boardTemplates.map((boardTemplate) => {
+                            let displayName = boardTemplate.title || intl.formatMessage({id: 'Sidebar.untitled', defaultMessage: 'Untitled'})
+                            if (boardTemplate.icon) {
+                                displayName = `${boardTemplate.icon} ${displayName}`
+                            }
+                            return (
+                                <Menu.Text
+                                    key={boardTemplate.id}
+                                    id={boardTemplate.id}
+                                    name={displayName}
+                                    onClick={() => {
+                                        this.addBoardFromTemplate(boardTemplate.id)
+                                    }}
+                                    rightIcon={
+                                        <MenuWrapper stopPropagationOnToggle={true}>
+                                            <IconButton icon={<OptionsIcon/>}/>
+                                            <Menu position='left'>
+                                                <Menu.Text
+                                                    id='edit'
+                                                    name={intl.formatMessage({id: 'Sidebar.edit-template', defaultMessage: 'Edit'})}
+                                                    onClick={() => {
+                                                        this.props.showBoard(boardTemplate.id)
+                                                    }}
+                                                />
+                                                <Menu.Text
+                                                    icon={<DeleteIcon/>}
+                                                    id='delete'
+                                                    name={intl.formatMessage({id: 'Sidebar.delete-template', defaultMessage: 'Delete'})}
+                                                    onClick={async () => {
+                                                        await mutator.deleteBlock(boardTemplate, 'delete board template')
+                                                    }}
+                                                />
+                                            </Menu>
+                                        </MenuWrapper>
+                                    }
+                                />
+                            )
+                        })}
+
+                        <Menu.Text
+                            id='empty-template'
+                            name={intl.formatMessage({id: 'Sidebar.empty-board', defaultMessage: 'Empty board'})}
+                            onClick={this.addBoardClicked}
+                        />
+
+                        <Menu.Text
+                            id='add-template'
+                            name={intl.formatMessage({id: 'Sidebar.add-template', defaultMessage: '+ New template'})}
+                            onClick={this.addBoardTemplateClicked}
+                        />
+                    </Menu>
+                </MenuWrapper>
+
                 <MenuWrapper>
                     <Button>
                         <FormattedMessage