Merge pull request #4 from poshaughnessy/peter-tweaks

Fix for external links href
SamsungInternet · Aug 15, 2018 · 2acb1ba · 2acb1ba
2 parents af3e0a4 + d5237ff
commit 2acb1ba
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/src/components/Menu/Item.js b/src/components/Menu/Item.js
@@ -7,10 +7,10 @@ const Item = props => {
 
   let linky;
   if (!external) {
-    linky = <Link to={to} className={"hiddenItem" in props ? "inHiddenItem" : ""}onClick={onClick}data-slug={to}>{label}</Link>
+    linky = <Link to={to} className={"hiddenItem" in props ? "inHiddenItem" : ""} onClick={onClick} data-slug={to} data-external={external}>{label}</Link>
   }
   else {
-    linky = <a href={to}>{label}</a>
+    linky = <a href={to} className={"hiddenItem" in props ? "inHiddenItem" : ""} data-external={external}>{label}</a>
   }
   return (
     <React.Fragment>
@@ -43,7 +43,7 @@ const Item = props => {
           .item {
             :global(a) {
             text-shadow:
-              -1px -1px 2px  ${theme.hero.backgroundColor}, 
+              -1px -1px 2px  ${theme.hero.backgroundColor},
               1px -1px 2px ${theme.hero.backgroundColor},
               -1px 1px 2px  ${theme.hero.backgroundColor},
               1px 1px 2px  ${theme.hero.backgroundColor};

diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js
@@ -23,9 +23,9 @@ class Menu extends React.Component {
     this.items = [
       { to: "/category/", label: "Categories", icon: FaTag },
       ...pages,
-      { to: "https://medium.com/samsung-internet-dev", label: "Blog", icon: FaTag },
-      { to: "https://github.com/SamsungInternet/support/issues", label: "Support", icon: FaTag },
-      { to: "https://github.com/SamsungInternet", label: "Demos", icon: FaTag }
+      { to: "https://medium.com/samsung-internet-dev", label: "Blog", icon: FaTag, external: true },
+      { to: "https://github.com/SamsungInternet/support/issues", label: "Support", icon: FaTag, external: true },
+      { to: "https://github.com/SamsungInternet", label: "Demos", icon: FaTag, external: true }
     ];
 
     this.renderedItems = []; // will contain references to rendered DOM elements of menu
@@ -90,8 +90,9 @@ class Menu extends React.Component {
           item.classList.add("hideItem");
           item.classList.remove("item");
           result.hiddenItems.push({
-            to: link.getAttribute("data-slug"),
-            label: link.text
+            to: link.getAttribute("href"),
+            label: link.text,
+            external: link.getAttribute("data-external")
           });
         }
         return result;
@@ -145,15 +146,15 @@ class Menu extends React.Component {
         <nav className={`menu ${open ? "open" : ""}`} rel="js-menu">
           <ul className="itemList" ref={this.itemList}>
             {this.items.map(item => (
-              <Item item={item} key={item.label} theme={theme} external={false} />
+              <Item item={item} key={item.label} theme={theme} external={item.external} />
             ))}
           </ul>
           {this.state.hiddenItems.length > 0 && <Expand onClick={this.toggleMenu} theme={theme} />}
           {open &&
             screenWidth >= 1024 && (
               <ul className="hiddenItemList">
                 {this.state.hiddenItems.map(item => (
-                  <Item item={item} key={item.label} hiddenItem theme={theme} />
+                  <Item item={item} key={item.label} hiddenItem theme={theme} external={item.external} />
                 ))}
               </ul>
             )}
@@ -170,7 +171,7 @@ class Menu extends React.Component {
             width: 100%;
             z-index: 1;
             transition: all ${theme.time.duration.default};
-           
+
           }
 
           @media (max-width: 1024px) {