feat: add menu nav logic, favicon etc

src/components/Layout/Header/Navbar/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import cn from 'classnames'
+import ROUTES from 'constants/routes'
+
+import styles from './style.module.css'
+
+const NAVBAR = {
+  [ROUTES.DISCOVERY]: [
+    {
+      label: '个性推荐',
+      route: ROUTES.RECOMMENDATION
+    },
+    {
+      label: '歌单',
+      route: ROUTES.SONG_LIST
+    },
+    {
+      label: '排行榜',
+      route: ROUTES.LEADER_BOARD
+    },
+    {
+      label: '歌手',
+      route: ROUTES.SINGERS
+    },
+    {
+      label: '最新音乐',
+      route: ROUTES.LATEST_MUSIC
+    }
+  ],
+  [ROUTES.VIDEOS]: [
+    {
+      label: '视频',
+      route: ROUTES.VIDEO
+    },
+    {
+      label: 'MV',
+      route: ROUTES.MV
+    }
+  ]
+}
+
+const Navbar = () => {
+  const history = useHistory()
+  const { pathname } = useLocation()
+
+  const matchPathPrefix = Object.keys(NAVBAR).find((key) => pathname.startsWith(key)) || ROUTES.DISCOVERY
+  const items = NAVBAR[matchPathPrefix]
+
+  const hasMatchRoute = items.find(({ route }) => route === pathname)
+
+  const handleItemClick = (route: string) => {
+    history.push(route)
+  }
+
+  return (
+    <div className={styles.root}>
+      {
+        items.map(({ label, route }, index) => {
+          const isActive = hasMatchRoute ? route === pathname : index === 0
+
+          return (
+            <div
+              key={label}
+              className={cn(styles.item, isActive ? styles.active : '')}
+              onClick={() => handleItemClick(route)}
+            >
+              {label}
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default Navbar

src/components/Layout/Header/Navbar/style.module.css

@@ -0,0 +1,21 @@
+@value colors: "~styles/colors.module.css";
+@value grey, black from colors;
+
+.root {
+  display: flex;
+  align-items: center;
+}
+
+.item {
+  margin-right: 2em;
+  cursor: pointer;
+  color: grey;
+
+  &:hover {
+    color: black;
+  }
+}
+
+.active {
+  color: black;
+}

src/components/Layout/Header/index.tsx

@@ -1,9 +1,16 @@
 import React from 'react'
+import { useHistory } from 'react-router-dom'
 import { Icon } from '@blueprintjs/core'
 
+import Navbar from './Navbar'
 import styles from './style.module.css'
 
 const Header = () => {
+  const history = useHistory()
+
+  const handleGoBack = () => history.goBack()
+  const handleGoForward = () => history.goForward()
+
   return (
     <div className={styles.root}>
       <div className={styles.actions}>
@@ -20,13 +27,13 @@ const Header = () => {
         </div>
 
         <div className={styles.backForward}>
-          <div><Icon icon='chevron-left' /></div>
-          <div><Icon icon='chevron-right' /></div>
+          <div onClick={handleGoBack}><Icon icon='chevron-left' /></div>
+          <div onClick={handleGoForward}><Icon icon='chevron-right' /></div>
         </div>
       </div>
 
-      <div>
-        <div>hhh</div>
+      <div className={styles.content}>
+        <Navbar />
         <div>ddd</div>
       </div>
     </div>

src/components/Layout/Header/style.module.css

@@ -62,7 +62,7 @@
 .backForward {
   display: flex;
   position: absolute;
-  bottom: 10px;
+  bottom: 15px;
   right: 10px;
 
   div {
@@ -80,3 +80,11 @@
     background-color: rgb(232, 232, 232);
   }
 }
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - sidebarWidth);
+  padding: 0 20px;
+}

src/components/Layout/Sidebar/Menus/index.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { Icon, IconName } from '@blueprintjs/core'
+import { useHistory, useLocation } from 'react-router-dom'
+import cn from 'classnames'
+
+import ROUTES from 'constants/routes'
+import styles from './style.module.css'
+
+interface IMenuItem {
+  icon: IconName,
+  label: string,
+  active?: boolean,
+  route: string
+}
+
+interface IMenu {
+  title?: string,
+  items: IMenuItem[]
+}
+
+const MENU: IMenu[] = [
+  {
+    items: [
+      {
+        icon: 'music',
+        label: '发现音乐',
+        route: ROUTES.DISCOVERY
+      },
+      {
+        icon: 'mobile-video',
+        label: '视频',
+        route: ROUTES.VIDEOS
+      }
+    ]
+  },
+  {
+    title: '我的音乐',
+    items: [
+      {
+        icon: 'import',
+        label: '下载管理',
+        route: ROUTES.DOWNLOAD
+      },
+      {
+        icon: 'cloud',
+        label: '我的音乐云盘',
+        route: ROUTES.CLOUD
+      },
+      {
+        icon: 'star-empty',
+        label: '我的收藏',
+        route: ROUTES.COLLECTION
+      }
+    ]
+  }
+]
+
+const Menus = () => {
+  const history = useHistory()
+  const { pathname } = useLocation()
+
+  const handleMenuItemClick = (route: string) => {
+    history.push(route)
+  }
+
+  return (
+    <>
+      {MENU.map(({ title, items }, index) => {
+        return (
+          <div className={styles.block} key={index}>
+            {title && <div className={styles.title}>{title}</div>}
+            <div className={styles.tabs}>
+              {items.map(({ icon, label, route }) => {
+                const isActive = pathname.startsWith(route) || (pathname === ROUTES.ROOT && route === ROUTES.DISCOVERY)
+                return (
+                  <div
+                    key={label}
+                    className={isActive ? cn(styles.tab, styles.active) : styles.tab}
+                    onClick={() => handleMenuItemClick(route)}
+                  >
+                    <Icon icon={icon} />
+                    {label}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export default Menus

src/components/Layout/Sidebar/Menus/style.module.css

@@ -0,0 +1,33 @@
+@value colors: "~styles/colors.module.css";
+@value grey from colors;
+
+.tabs {
+  color: rgb(77, 77, 77);
+  cursor: default;
+
+  .tab {
+    padding: 10px 20px;
+
+    span {
+      margin-right: 10px;
+    }
+  }
+
+  .tab:hover {
+    background-color: rgb(227, 227, 227);
+  }
+
+  .active {
+    color: rgb(208, 58, 54);
+  }
+}
+
+.block {
+  margin-bottom: 25px;
+
+  .title {
+    padding-left: 20px;
+    font-size: 0.8em;
+    color: grey;
+  }
+}

src/components/Layout/Sidebar/index.tsx

@@ -1,22 +1,22 @@
 import React from 'react'
 import { Icon, Popover, Menu, MenuItem } from '@blueprintjs/core'
-import cn from 'classnames'
 
+import Menus from './Menus'
 import LoginDialog from './LoginDialog'
 import { getSession, removeSession } from 'helpers/session'
 import authApis from 'apis/auth'
 import useAsyncFn from 'hooks/useAsyncFn'
 import styles from './style.module.css'
 
-const { useState, useMemo } = React
+const { useState } = React
 
 const Sidebar = () => {
   const session = getSession()
   const isLogged = session && session.userId
   const [showLoginDialog, setShowLoginDialog] = useState(false)
   const [logoutState, logoutFn] = useAsyncFn(authApis.logout)
 
-  const handleNameClicke = () => setShowLoginDialog(true)
+  const handleNameClick = () => setShowLoginDialog(true)
   const handleLoginDialogClose = () => setShowLoginDialog(false)
   const handleLogout = async () => {
     // TODO: should removeSession after logoutFn()
@@ -45,41 +45,14 @@ const Sidebar = () => {
             </div>
           </Popover>
         ) : (
-          <div className={styles.name} onClick={handleNameClicke}>
+          <div className={styles.name} onClick={handleNameClick}>
             <span>未登录</span>
             <Icon icon='play' />
           </div>
         )}
       </div>
 
-      <div className={styles.tabs}>
-        <div className={cn(styles.tab, styles.enabled)}>
-          <Icon icon='music' />
-          发现音乐
-        </div>
-        <div className={styles.tab}>
-          <Icon icon='mobile-video' />
-          视频
-        </div>
-      </div>
-
-      <div className={styles.block}>
-        <div className={styles.title}>我的音乐</div>
-        <div className={styles.tabs}>
-          <div className={styles.tab}>
-            <Icon icon='import' />
-            下载管理
-          </div>
-          <div className={styles.tab}>
-            <Icon icon='cloud' />
-            我的音乐云盘
-          </div>
-          <div className={styles.tab}>
-            <Icon icon='star-empty' />
-            我的收藏
-          </div>
-        </div>
-      </div>
+      <Menus />
 
       <LoginDialog
         isOpen={showLoginDialog}

src/components/Layout/Sidebar/style.module.css

@@ -40,34 +40,3 @@
     cursor: default;
   }
 }
-
-.tabs {
-  color: rgb(77, 77, 77);
-  cursor: default;
-
-  .tab {
-    padding: 10px 20px;
-
-    span {
-      margin-right: 10px;
-    }
-  }
-
-  .tab:hover {
-    background-color: rgb(227, 227, 227);
-  }
-
-  .enabled {
-    color: rgb(208, 58, 54);
-  }
-}
-
-.block {
-  margin-top: 25px;
-
-  .title {
-    padding-left: 20px;
-    font-size: 0.8em;
-    color: rgb(129, 129, 129);
-  }
-}