add source and docs link on NavTop

heyjul3s · Dec 20, 2020 · ea0725c · ea0725c
1 parent f15e853
commit ea0725c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/docs/components/Global/NavTop/NavTop.tsx b/docs/components/Global/NavTop/NavTop.tsx
@@ -1,6 +1,15 @@
 import React from 'react';
-import { NavTopContainer } from './styles';
+import { NavTopContainer, NavTopMenu, NavTopLink } from './styles';
 
 export function NavTop() {
-  return <NavTopContainer />;
+  return (
+    <NavTopContainer>
+      <NavTopMenu>
+        <NavTopLink href="https//github.com/heyjul3s/artifak">
+          Github
+        </NavTopLink>
+        <NavTopLink href="/docs">Docs</NavTopLink>
+      </NavTopMenu>
+    </NavTopContainer>
+  );
 }
diff --git a/docs/components/Global/NavTop/styles.ts b/docs/components/Global/NavTop/styles.ts
@@ -1,9 +1,26 @@
 import styled from 'styled-components';
+import { AnchorLink } from '../../AnchorLink';
+
+export const NavTopMenu = styled.nav`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  padding: 0 1.5rem;
+`;
+
+export const NavTopLink = styled(AnchorLink)`
+  position: relative;
+  z-index: 1;
+  color: white;
+  margin-right: 15px;
+`;
 
 export const NavTopContainer = styled.div`
   position: relative;
   width: 100%;
   height: 60px;
+
   ${({ theme }) => `
     background-color: ${theme.colors.primary};
     background-image: repeating-linear-gradient(