Adding sidebar collapse/expand

webapp/i18n/en.json

@@ -35,6 +35,7 @@
   "Sidebar.import-archive": "Import Archive",
   "Sidebar.light-theme": "Light Theme",
   "Sidebar.mattermost-theme": "Mattermost Theme",
+  "Sidebar.no-views-in-board": "No pages inside",
   "Sidebar.set-language": "Set Language",
   "Sidebar.set-theme": "Set Theme",
   "Sidebar.settings": "Settings",
@@ -68,4 +69,4 @@
   "ViewTitle.random-icon": "Random",
   "ViewTitle.remove-icon": "Remove Icon",
   "ViewTitle.untitled-board": "Untitled Board"
-}
+}

webapp/i18n/es.json

@@ -35,6 +35,7 @@
   "Sidebar.import-archive": "Importar Archivo",
   "Sidebar.light-theme": "Apariencia Clara",
   "Sidebar.mattermost-theme": "Aparencia Mattermost",
+  "Sidebar.no-views-in-board": "No hay páginas dentro",
   "Sidebar.set-language": "Establecer idioma",
   "Sidebar.set-theme": "Establecer apariencia",
   "Sidebar.settings": "Configuración",

webapp/src/components/sidebar.scss

@@ -56,26 +56,38 @@
 
         font-weight: 500;
         padding: 3px 20px;
+        &:hover {
+            background-color: rgba(var(--sidebar-fg), 0.05);
+        }
         &.subitem {
             color: rgba(var(--sidebar-fg), 0.6);
             font-weight: 400;
             margin-left: 20px;
         }
+        &.no-views {
+            color: rgba(var(--sidebar-fg), 0.4);
+            &:hover {
+                background-color: rgba(var(--sidebar-bg));
+            }
+        }
+        .octo-button {
+            &:hover {
+                background-color: rgba(var(--sidebar-fg), 0.1);
+            }
+            &.expanded {
+                .SubmenuTriangleIcon {
+                    transform: rotate(90deg);
+                }
+            }
+            .SubmenuTriangleIcon {
+                transition: 200ms ease-in-out;
+                transform: rotate(0deg);
+            }
+        }
     }
 
     .octo-sidebar-title {
         cursor: pointer;
         flex-grow: 1;
     }
-
-    .octo-sidebar-item {
-        &:hover {
-            background-color: rgba(var(--sidebar-fg), 0.05);
-        }
-        .octo-button {
-            &:hover {
-                background-color: rgba(var(--sidebar-fg), 0.1);
-            }
-        }
-    }
 }

webapp/src/components/sidebar.tsx

@@ -14,6 +14,8 @@ import OptionsIcon from '../widgets/icons/options'
 import ShowSidebarIcon from '../widgets/icons/showSidebar'
 import HideSidebarIcon from '../widgets/icons/hideSidebar'
 import HamburgerIcon from '../widgets/icons/hamburger'
+import SubmenuTriangleIcon from '../widgets/icons/submenuTriangle'
+import DotIcon from '../widgets/icons/dot'
 import {WorkspaceTree} from '../viewModel/workspaceTree'
 import {BoardView} from '../blocks/boardView'
 
@@ -30,12 +32,13 @@ type Props = {
 
 type State = {
     isHidden: boolean
+    collapsedBoards: {[key: string]: boolean}
 }
 
 class Sidebar extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props)
-        this.state = {isHidden: false}
+        this.state = {isHidden: false, collapsedBoards: {}}
     }
 
     shouldComponentUpdate(): boolean {
@@ -49,6 +52,7 @@ class Sidebar extends React.Component<Props, State> {
         }
 
         const {boards, views} = workspaceTree
+        const {collapsedBoards} = this.state
 
         if (this.state.isHidden) {
             return (
@@ -88,6 +92,16 @@ class Sidebar extends React.Component<Props, State> {
                         return (
                             <div key={board.id}>
                                 <div className='octo-sidebar-item octo-hover-container'>
+                                    <div
+                                        className={'octo-button square ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}
+                                        onClick={() => {
+                                            const newCollapsedBoards = {...this.state.collapsedBoards}
+                                            newCollapsedBoards[board.id] = !newCollapsedBoards[board.id]
+                                            this.setState({collapsedBoards: newCollapsedBoards})
+                                        }}
+                                    >
+                                        <SubmenuTriangleIcon/>
+                                    </div>
                                     <div
                                         className='octo-sidebar-title'
                                         onClick={() => {
@@ -119,11 +133,19 @@ class Sidebar extends React.Component<Props, State> {
                                         </Menu>
                                     </MenuWrapper>
                                 </div>
-                                {boardViews.map((view) => {
+                                {!collapsedBoards[board.id] && boardViews.length === 0 &&
-                                    return (<div
+                                    <div className='octo-sidebar-item subitem no-views'>
+                                        <FormattedMessage
+                                            id='Sidebar.no-views-in-board'
+                                            defaultMessage='No pages inside'
+                                        />
+                                    </div>}
+                                {!collapsedBoards[board.id] && boardViews.map((view) => (
+                                    <div
                                         key={view.id}
                                         className='octo-sidebar-item subitem octo-hover-container'
-                                            >
+                                    >
+                                        <DotIcon/>
                                         <div
                                             className='octo-sidebar-title'
                                             onClick={() => {
@@ -137,8 +159,8 @@ class Sidebar extends React.Component<Props, State> {
                                                 />
                                             )}
                                         </div>
-                                    </div>)
+                                    </div>
-                                })}
+                                ))}
                             </div>
                         )
                     })

webapp/src/widgets/icons/dot.scss

@@ -0,0 +1,5 @@
+.DotIcon {
+    fill: rgba(var(--main-fg), 0.5);
+	width: 24px;
+	height: 24px;
+}

webapp/src/widgets/icons/dot.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+
+import './dot.scss'
+
+export default function DotIcon(): JSX.Element {
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='DotIcon Icon'
+            viewBox='0 0 100 100'
+        >
+            <circle
+                cx='50'
+                cy='50'
+                r='5'
+            />
+        </svg>
+    )
+}