Add podcasts menu

components/site-nav/index.js

@@ -11,10 +11,13 @@ const SiteNav = () => (
       <div className='nav-links'>
         <a href='/roadmaps'>Roadmaps</a>
         <a href='/guides'>Guides</a>
-        <a href='/podcasts'>Podcasts</a>
+        <a href='/podcasts'>
+          Podcasts
+          <span className='new-item' />
+        </a>
       </div>
 
-      <div className='ml-3 align-items-center d-flex'>
+      <div className='ml-3 align-items-center d-none d-md-flex'>
         <iframe src="https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="190px" height="30px"></iframe>
       </div>
     </div>

components/site-nav/style.js

@@ -29,6 +29,7 @@ export const HeaderWrap = styled.div`
 
   .nav-links {
     a {
+      position: relative;
       padding: 0 10px;
       text-decoration: none;
       font-size: 16px;
@@ -46,5 +47,15 @@ export const HeaderWrap = styled.div`
         background: #2d2d2d;
       }
     }
+
+    .new-item {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: inline-block;
+      padding: 3px;
+      background: #e25712;
+      border-radius: 100%;
+    }
   }
 `;