[GH-307] Increase clickable area on sidebar items (#344)

This moves the click handler from sidebar item titles to the sidebar items
themselves. This way, the clickable area matches with the visually highlighted
area on hover.

Fixes: #307

webapp/src/components/sidebar/sidebarBoardItem.scss

@@ -30,6 +30,10 @@
             }
         }
 
+        &:not(.no-views) {
+            cursor: pointer;
+        }
+
         >.Icon {
             stroke: rgba(var(--sidebar-fg), 0.3);
             height: 14px;
@@ -72,7 +76,6 @@
 
     .octo-sidebar-title {
         font-weight: 600;
-        cursor: pointer;
         flex-grow: 1;
         white-space: nowrap;
         overflow: hidden;

webapp/src/components/sidebar/sidebarBoardItem.tsx

@@ -83,16 +83,16 @@ const SidebarBoardItem = React.memo((props: Props) => {
 
     return (
         <div className='SidebarBoardItem'>
-            <div className={'octo-sidebar-item ' + (collapsed ? 'collapsed' : 'expanded')}>
+            <div
+                className={'octo-sidebar-item ' + (collapsed ? 'collapsed' : 'expanded')}
+                onClick={() => props.showBoard(board.id)}
+            >
                 <IconButton
                     icon={<DisclosureTriangle/>}
                     onClick={() => setCollapsed(!collapsed)}
                 />
                 <div
                     className='octo-sidebar-title'
-                    onClick={() => {
-                        props.showBoard(board.id)
-                    }}
                     title={displayTitle}
                 >
                     {board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
@@ -151,13 +151,11 @@ const SidebarBoardItem = React.memo((props: Props) => {
                 <div
                     key={view.id}
                     className='octo-sidebar-item subitem'
+                    onClick={() => props.showView(view.id, board.id)}
                 >
                     {iconForViewType(view.viewType)}
                     <div
                         className='octo-sidebar-title'
-                        onClick={() => {
-                            props.showView(view.id, board.id)
-                        }}
                         title={view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}
                     >
                         {view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}