Add blog to topBar and as a consequence support external links in topBar menu items

2 files changed, 25 insertions, 3 deletions

diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 1a0691e83..b1367be4f 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -169,12 +169,21 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                     path={`${WebsitePaths.Wiki}`}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
+                                    isExternal={false}
+                                />
+                                <TopBarMenuItem
+                                    title="Blog"
+                                    path={constants.URL_BLOG}
+                                    style={styles.menuItem}
+                                    isNightVersion={isNightVersion}
+                                    isExternal={true}
                                 />
                                 <TopBarMenuItem
                                     title="About"
                                     path={`${WebsitePaths.About}`}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
+                                    isExternal={false}
                                 />
                                 <TopBarMenuItem
                                     title="Portal DApp"
@@ -183,6 +192,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                     style={styles.menuItem}
                                     className={`${isFullWidthPage && 'md-hide'}`}
                                     isNightVersion={isNightVersion}
+                                    isExternal={false}
                                 />
                             </div>
                         </div>
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 96ee86142..983050abc 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -11,6 +11,7 @@ interface TopBarMenuItemProps {
     title: string;
     path?: string;
     isPrimary?: boolean;
+    isExternal: boolean;
     style?: React.CSSProperties;
     className?: string;
     isNightVersion?: boolean;
@@ -43,9 +44,20 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
                 className={`center ${this.props.className}`}
                 style={{ ...this.props.style, ...primaryStyles, color: menuItemColor }}
             >
-                <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
-                    {this.props.title}
-                </Link>
+                {this.props.isExternal ? (
+                    <a
+                        className="text-decoration-none"
+                        style={{ color: linkColor }}
+                        target="_blank"
+                        href={this.props.path}
+                    >
+                        {this.props.title}
+                    </a>
+                ) : (
+                    <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
+                        {this.props.title}
+                    </Link>
+                )}
             </div>
         );
     }