frontend: More compact menu

frontend/src/App.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {connect} from 'react-redux'
-import {List, Grid, Container, Menu, Icon, Button, Header} from 'semantic-ui-react'
+import {List, Grid, Container, Menu, Icon, Button, Header, Dropdown} from 'semantic-ui-react'
 import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
 
 import config from 'config.json'
@@ -32,30 +32,24 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
             Tracks
           </Link>
 
-          {login ? (
             <Menu.Menu position="right">
-              <Link to="/upload" component={Menu.Item}>
-                <Button compact primary>
-                  <Icon name="cloud upload" />
-                  Upload
-                </Button>
-              </Link>
-
-              <Link to="/settings" component={Menu.Item}>
+          {login ? (
+            <Dropdown item trigger={
                 <Avatar user={login} className={styles.avatar} />
-              </Link>
-
-              <Link component={Menu.Item} to="/logout">
-                <Button compact>Logout</Button>
-              </Link>
-            </Menu.Menu>
+              }>
+                <Dropdown.Menu>
+                  <Link to="/upload" component={Dropdown.Item} icon="cloud upload" text="Upload tracks" />
+                  <Link to="/settings" component={Dropdown.Item} icon="cog" text="Settings" />
+                    <Dropdown.Divider />
+                  <Link to="/logout" component={Dropdown.Item} icon="sign-out" text="Logout" />
+              </Dropdown.Menu>
+              </Dropdown>
           ) : (
-            <Menu.Menu>
               <Menu.Item>
                 <LoginButton as="a" compact />
               </Menu.Item>
-            </Menu.Menu>
           )}
+            </Menu.Menu>
         </Container>
       </Menu>
 

frontend/src/pages/TracksPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {connect} from 'react-redux'
-import {Message, Item, Tab, Loader, Pagination, Icon} from 'semantic-ui-react'
+import {Button, Message, Item, Menu, Loader, Pagination, Icon} from 'semantic-ui-react'
 import {useObservable} from 'rxjs-hooks'
 import {Link, useHistory, useRouteMatch} from 'react-router-dom'
 import {of, from, concat} from 'rxjs'
@@ -14,25 +14,23 @@ import {useQueryParam} from 'query'
 
 function TracksPageTabs() {
   const history = useHistory()
-  const panes = React.useMemo(
-    () => [
-      {menuItem: 'Public tracks', url: '/tracks'},
-      {menuItem: 'My tracks', url: '/my/tracks'},
-    ],
-    []
-  )
 
-  const onTabChange = React.useCallback(
+  const onClick = React.useCallback(
     (e, data) => {
-      history.push(panes[data.activeIndex].url)
+      history.push(data.name)
     },
-    [history, panes]
+    [history]
   )
 
-  const isOwnTracksPage = useRouteMatch('/my/tracks')
-  const activeIndex = isOwnTracksPage ? 1 : 0
+  const isOwnTracksPage = Boolean(useRouteMatch('/my/tracks'))
 
-  return <Tab menu={{secondary: true, pointing: true}} {...{panes, onTabChange, activeIndex}} />
+  return (
+    <Menu pointing secondary>
+      <Menu.Item name="/tracks" active={!isOwnTracksPage} {...{onClick}}>Tracks</Menu.Item>
+      <Menu.Item name="/my/tracks" active={isOwnTracksPage} {...{onClick}} />
+    <Menu.Item name="/upload" position='right' {...{onClick}}><Button color='green' compact size='small'>Upload</Button></Menu.Item>
+    </Menu>
+  )
 }
 
 function TrackList({privateTracks}: {privateTracks: boolean}) {