diff --git a/src/core/client/admin/components/App.css b/src/core/client/admin/components/App.css
new file mode 100644
index 000000000..47d40f6b0
--- /dev/null
+++ b/src/core/client/admin/components/App.css
@@ -0,0 +1,4 @@
+.root {
+ width: 1080px;
+ margin: 0 auto;
+}
diff --git a/src/core/client/admin/components/App.tsx b/src/core/client/admin/components/App.tsx
index c0c061fea..57a3ce8e1 100644
--- a/src/core/client/admin/components/App.tsx
+++ b/src/core/client/admin/components/App.tsx
@@ -1,12 +1,15 @@
import React, { StatelessComponent } from "react";
import { HorizontalGutter } from "talk-ui/components";
-import NavigationContainer from "../containers/NavigationContainer";
+import styles from "./App.css";
+import Navigation from "./Navigation";
const App: StatelessComponent = ({ children }) => (
-
-
- {children}
-
+
+
+
+ {children}
+
+
);
export default App;
diff --git a/src/core/client/admin/components/Community.tsx b/src/core/client/admin/components/Community.tsx
index a5cebfc87..73dfddf69 100644
--- a/src/core/client/admin/components/Community.tsx
+++ b/src/core/client/admin/components/Community.tsx
@@ -1,8 +1,10 @@
import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
const Community: StatelessComponent = ({ children }) => (
- Community
+
+ Community
+
);
export default Community;
diff --git a/src/core/client/admin/components/Configure.tsx b/src/core/client/admin/components/Configure.tsx
index cd91a7bfc..264c0a614 100644
--- a/src/core/client/admin/components/Configure.tsx
+++ b/src/core/client/admin/components/Configure.tsx
@@ -1,8 +1,10 @@
import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
const Configure: StatelessComponent = ({ children }) => (
- Configure
+
+ Configure
+
);
export default Configure;
diff --git a/src/core/client/admin/components/Moderate.tsx b/src/core/client/admin/components/Moderate.tsx
index 04eb7dc53..d527ebd27 100644
--- a/src/core/client/admin/components/Moderate.tsx
+++ b/src/core/client/admin/components/Moderate.tsx
@@ -1,8 +1,10 @@
import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
const Moderate: StatelessComponent = ({ children }) => (
- Moderate
+
+ Moderate
+
);
export default Moderate;
diff --git a/src/core/client/admin/components/Navigation.css b/src/core/client/admin/components/Navigation.css
new file mode 100644
index 000000000..c41c8523c
--- /dev/null
+++ b/src/core/client/admin/components/Navigation.css
@@ -0,0 +1,7 @@
+.link {
+ text-decoration: none;
+}
+
+.active {
+ border-bottom: 3px solid var(--palette-primary-main);
+}
diff --git a/src/core/client/admin/components/Navigation.tsx b/src/core/client/admin/components/Navigation.tsx
index ec92665ee..f440ac418 100644
--- a/src/core/client/admin/components/Navigation.tsx
+++ b/src/core/client/admin/components/Navigation.tsx
@@ -1,25 +1,39 @@
+import { Link } from "found";
import React, { StatelessComponent } from "react";
import { Button, Flex, Typography } from "talk-ui/components";
+import styles from "./Navigation.css";
-export interface AppProps {
- goToModerate: () => void;
- goToCommunity: () => void;
- goToStories: () => void;
- goToConfigure: () => void;
-}
-
-const Navigation: StatelessComponent = ({
- goToModerate,
- goToCommunity,
- goToStories,
- goToConfigure,
-}) => (
+const Navigation: StatelessComponent = () => (
Talk
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/core/client/admin/components/Stories.tsx b/src/core/client/admin/components/Stories.tsx
index 3232b8f7b..148848bff 100644
--- a/src/core/client/admin/components/Stories.tsx
+++ b/src/core/client/admin/components/Stories.tsx
@@ -1,8 +1,10 @@
import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
const Stories: StatelessComponent = ({ children }) => (
- Stories
+
+ Stories
+
);
export default Stories;
diff --git a/src/core/client/admin/containers/NavigationContainer.tsx b/src/core/client/admin/containers/NavigationContainer.tsx
deleted file mode 100644
index 62cadb39d..000000000
--- a/src/core/client/admin/containers/NavigationContainer.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Router, withRouter } from "found";
-import React, { Component } from "react";
-import Navigation from "../components/Navigation";
-
-interface NavigationContainerProps {
- router: Router;
-}
-
-class NavigationContainer extends Component {
- private goToModerate = () => this.props.router.replace("/admin/moderate");
- private goToCommunity = () => this.props.router.replace("/admin/community");
- private goToStories = () => this.props.router.replace("/admin/stories");
- private goToConfigure = () => this.props.router.replace("/admin/configures");
- public render() {
- return (
-
- );
- }
-}
-
-export default withRouter(NavigationContainer);