navigation refactor edildi

MuratDenizli · Jun 8, 2020 · 6aa9cef · 6aa9cef
1 parent b95ef10
commit 6aa9cef
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 47 deletions.
diff --git a/components/navigation-button.js b/components/navigation-button.js
@@ -12,8 +12,8 @@ function NavigationButton({ notify, selected, children, ...props }) {
       className={cn(styles.navButton, selected && styles.navButtonSelected)}
       {...props}
     >
+      {notify > 0 && <span className={styles.notify}>{notify}</span>}
       {children}
-      {notify && <span className={styles.notify}>{notify}</span>}
     </Button>
   )
 }

diff --git a/components/navigation.js b/components/navigation.js
@@ -1,5 +1,7 @@
 import React from 'react'
 
+import styles from './navigation.module.css'
+
 import NavigationButton from './navigation-button'
 import TextTitle from './text-title'
 import {
@@ -11,57 +13,99 @@ import {
   Bookmark,
   Lists,
   Profile,
-  More
+  More,
+  HomeFill,
+  ProfileFill,
+  ListsFill,
+  BookmarkFill,
+  MessagesFill,
+  NotificationFill,
+  ExplorerFill
 } from './icons'
 
-import styles from './navigation.module.css'
+const MENU = [
+  {
+    key: 'twitter',
+    icon: <Twitter />,
+    iconSelected: <Twitter />,
+    title: '',
+    notify: 0
+  },
+  {
+    key: 'home',
+    icon: <Home />,
+    iconSelected: <HomeFill />,
+    title: 'Home',
+    notify: 0
+  },
+  {
+    key: 'explore',
+    icon: <Explore />,
+    iconSelected: <ExplorerFill />,
+    title: 'Explore',
+    notify: 0
+  },
+  {
+    key: 'notification',
+    icon: <Notification />,
+    iconSelected: <NotificationFill />,
+    title: 'Notification',
+    notify: 17
+  },
+  {
+    key: 'messages',
+    icon: <Messages />,
+    iconSelected: <MessagesFill />,
+    title: 'Messages',
+    notify: 0
+  },
+  {
+    key: 'bookmark',
+    icon: <Bookmark />,
+    iconSelected: <BookmarkFill />,
+    title: 'Bookmark',
+    notify: 0
+  },
+  {
+    key: 'lists',
+    icon: <Lists />,
+    iconSelected: <ListsFill />,
+    title: 'Lists',
+    notify: 0
+  },
+  {
+    key: 'profile',
+    icon: <Profile />,
+    iconSelected: <ProfileFill />,
+    title: 'Profile',
+    notify: 0
+  },
+  {
+    key: 'more',
+    icon: <More />,
+    iconSelected: <More />,
+    title: 'More',
+    notify: 0
+  }
+]
 
-function Navigation({ flat = false, selectedKey }) {
+function Navigation({ flat = false, selectedKey = 'home' }) {
   return (
     <nav className={styles.nav}>
-      <NavigationButton>
-        <Twitter />
-      </NavigationButton>
-
-      <NavigationButton selected={selectedKey === 'home'}>
-        <Home />
-        <TextTitle>Home</TextTitle>
-      </NavigationButton>
-
-      <NavigationButton selected={selectedKey === 'explore'}>
-        <Explore />
-        <TextTitle>Explore</TextTitle>
-      </NavigationButton>
-
-      <NavigationButton notify={17} selected={selectedKey === 'notification'}>
-        <Notification />
-        <TextTitle>Notification</TextTitle>
-      </NavigationButton>
-
-      <NavigationButton selected={selectedKey === 'messages'}>
-        <Messages />
-        <TextTitle>Messages</TextTitle>
-      </NavigationButton>
-
-      <NavigationButton selected={selectedKey === 'bookmark'}>
-        <Bookmark />
-        <TextTitle>Bookmark</TextTitle>
-      </NavigationButton>
-
-      <NavigationButton selected={selectedKey === 'lists'}>
-        <Lists />
-        <TextTitle>Lists</TextTitle>
-      </NavigationButton>
-
-      <NavigationButton selected={selectedKey === 'profile'}>
-        <Profile />
-        <TextTitle>Profile</TextTitle>
-      </NavigationButton>
-
-      <NavigationButton selected={selectedKey === 'more'}>
-        <More />
-        <TextTitle>More</TextTitle>
-      </NavigationButton>
+      {MENU.map((menu) => {
+        const showTitle = !flat && menu.title.length > 0
+        const selected = selectedKey === menu.key
+        return (
+          <NavigationButton
+            key={menu.key}
+            notify={menu.notify}
+            selected={selected}
+          >
+            {selected ? menu.iconSelected : menu.icon}
+            {showTitle && <TextTitle>{menu.title}</TextTitle>}
+          </NavigationButton>
+        )
+      })}
     </nav>
   )
 }