diff --git a/app/components/SlackAuthLink/SlackAuthLink.js b/app/components/SlackAuthLink/SlackAuthLink.js index a5b9d56a0..d4f8c164b 100644 --- a/app/components/SlackAuthLink/SlackAuthLink.js +++ b/app/components/SlackAuthLink/SlackAuthLink.js @@ -1,47 +1,22 @@ // @flow import React from 'react'; -import { observer, inject } from 'mobx-react'; +import { inject } from 'mobx-react'; +import { slackAuth } from 'shared/utils/routeHelpers'; import AuthStore from 'stores/AuthStore'; type Props = { children: React$Element<*>, - scopes?: string[], auth: AuthStore, - redirectUri: string, + scopes?: string[], + redirectUri?: string, }; -@observer -class SlackAuthLink extends React.Component { - props: Props; - - static defaultProps = { - scopes: [ - 'identity.email', - 'identity.basic', - 'identity.avatar', - 'identity.team', - ], - }; - - slackUrl = () => { - const baseUrl = 'https://slack.com/oauth/authorize'; - const params = { - client_id: SLACK_KEY, - scope: this.props.scopes ? this.props.scopes.join(' ') : '', - redirect_uri: this.props.redirectUri || SLACK_REDIRECT_URI, - state: this.props.auth.getOauthState(), - }; - - const urlParams = Object.keys(params) - .map(key => `${key}=${encodeURIComponent(params[key])}`) - .join('&'); - - return `${baseUrl}?${urlParams}`; - }; - - render() { - return {this.props.children}; - } +function SlackAuthLink({ auth, children, scopes, redirectUri }: Props) { + return ( + + {children} + + ); } export default inject('auth')(SlackAuthLink); diff --git a/app/index.js b/app/index.js index d95a906ec..d63fbb927 100644 --- a/app/index.js +++ b/app/index.js @@ -24,7 +24,6 @@ import Collection from 'scenes/Collection'; import Document from 'scenes/Document'; import Search from 'scenes/Search'; import SlackAuth from 'scenes/SlackAuth'; -import Flatpage from 'scenes/Flatpage'; import ErrorAuth from 'scenes/ErrorAuth'; import Error404 from 'scenes/Error404'; @@ -33,8 +32,6 @@ import ScrollToTop from 'components/ScrollToTop'; import Layout from 'components/Layout'; import RouteSidebarHidden from 'components/RouteSidebarHidden'; -import flatpages from 'static/flatpages'; - import { matchDocumentSlug } from 'utils/routeHelpers'; let DevTools; @@ -92,7 +89,6 @@ const Auth = ({ children }: AuthProps) => { }; const notFoundSearch = () => ; -const Api = () => ; const DocumentNew = () => ; const RedirectDocument = ({ match }: { match: Object }) => ( @@ -141,7 +137,6 @@ render( - diff --git a/app/menus/AccountMenu.js b/app/menus/AccountMenu.js index 1678bfa5c..649039072 100644 --- a/app/menus/AccountMenu.js +++ b/app/menus/AccountMenu.js @@ -1,6 +1,6 @@ // @flow import React, { Component } from 'react'; -import { Link, withRouter } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import { inject, observer } from 'mobx-react'; import UiStore from 'stores/UiStore'; import AuthStore from 'stores/AuthStore'; @@ -23,6 +23,10 @@ class AccountMenu extends Component { this.props.ui.setActiveModal('settings'); }; + handleApi = () => { + window.location.href = '/developers'; + }; + handleLogout = () => { this.props.auth.logout(); window.location.href = BASE_URL; @@ -40,9 +44,9 @@ class AccountMenu extends Component { Keyboard shortcuts - - API documentation - + + API documentation + Logout ); diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index 60f6e2f63..8e75a4849 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -169,6 +169,7 @@ class DocumentScene extends Component { if (redirect || this.props.newDocument) { this.props.history.push(document.url); + this.props.ui.setActiveDocument(document); } }; diff --git a/app/scenes/Flatpage/Flatpage.js b/app/scenes/Flatpage/Flatpage.js deleted file mode 100644 index 58bff50e4..000000000 --- a/app/scenes/Flatpage/Flatpage.js +++ /dev/null @@ -1,32 +0,0 @@ -// @flow -import React from 'react'; -import { observer } from 'mobx-react'; -import CenteredContent from 'components/CenteredContent'; -import Editor from 'components/Editor'; -import PageTitle from 'components/PageTitle'; - -type Props = { - title: string, - content: string, -}; - -const Flatpage = observer((props: Props) => { - const { title, content } = props; - - return ( - - - {}} - onSave={() => {}} - onCancel={() => {}} - onImageUploadStart={() => {}} - onImageUploadStop={() => {}} - readOnly - /> - - ); -}); - -export default Flatpage; diff --git a/app/scenes/Flatpage/index.js b/app/scenes/Flatpage/index.js deleted file mode 100644 index 55cdbb815..000000000 --- a/app/scenes/Flatpage/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -import Flatpage from './Flatpage'; -export default Flatpage; diff --git a/app/scenes/SlackAuth/SlackAuth.js b/app/scenes/SlackAuth/SlackAuth.js index 0d1e9ef3a..b4a45ec6d 100644 --- a/app/scenes/SlackAuth/SlackAuth.js +++ b/app/scenes/SlackAuth/SlackAuth.js @@ -6,7 +6,7 @@ import queryString from 'query-string'; import { observable } from 'mobx'; import { observer, inject } from 'mobx-react'; import { client } from 'utils/ApiClient'; -import { slackAuth } from 'utils/routeHelpers'; +import { slackAuth } from 'shared/utils/routeHelpers'; import AuthStore from 'stores/AuthStore'; diff --git a/app/static/flatpages/api.md b/app/static/flatpages/api.md deleted file mode 100644 index 0edc14b6b..000000000 --- a/app/static/flatpages/api.md +++ /dev/null @@ -1,199 +0,0 @@ -# Outline API - -_Our API is currently in beta and we might make minor adjustments._ - -## Making requests - -Outline's API follows JSON RPC style conventions where each API endpoint is a method on `https://www.getoutline.com/api/`. Each request needs to be made using HTTPS and both `GET` and `POST` (recommended) methods are supported. - -For `GET` requests query string parameters are expected (e.g. `/api/document.info?id=...&token=...`). When making `POST` requests, request parameters are parsed depending on `Content-Type` header. To make a call using JSON payload, one must pass `Content-Type: application/json` header: - -```shell -curl 'https://www.getoutline.com/api/documents.info?id=outline-api-NTpezNwhUP'\ - -H 'authorization: Bearer '\ - -H 'content-type: application/json'\ - -H 'accept: application/json' -``` - -## Authentication - -To access private API endpoints, you must provide a valid API key. You can create new API keys in your [account settings](https://www.getoutline.com/settings). Be careful when handling your keys as they give access to all of your documents. - -To authenticate with Outline API, you can supply the API key as a header (`Authorization: Bearer `) or as part of the payload using `token` parameter. - -Some API endpoints allow unauhenticated requests for public resources and they can be called without an API key. - -## Errors - -All successful API requests will be returned with `200` status code and `ok: true` in the response payload. If there's an error while making the request, appropriate status code is returned with the `error` message: - -```json -{ - "ok": false, - "error: "Not Found" -} -``` - -## Methods - -### `user.info` - Get current user - -This method returns the information for currently logged in user. - -#### Arguments - -`https://www.getoutline.com/api/user.info` - -Parameter | Description ------------- | ------------- -`token` | Authentication token - ---- - -### `user.s3Upload` - Gets S3 upload credentials - -You can upload small files and images as part of your documents. All files are stored using Amazon S3. Instead of uploading files to Outline, you need to upload them directly to S3 with special credentials which can be obtained through this endpoint. - -#### Arguments - -`https://www.getoutline.com/api/user.s3Upload` - -Parameter | Description ------------- | ------------- -`token` | Authentication token -`filename` | Filename of the uploaded file -`kind` | Mimetype of the document -`size` | Filesize of the document - ---- - -### `collections.list` - List your document collections - -List all your document collections. - -#### Arguments - -`https://www.getoutline.com/api/collections.list` - -Parameter | Description ------------- | ------------- -`token` | Authentication token -`offset` | Pagination offset -`limit` | Pagination limit - ---- - -### `collections.info` - Get a document collection - -Returns detailed information on a document collection. - -#### Arguments - -`https://www.getoutline.com/api/collections.info` - -Parameter | Description ------------- | ------------- -`token` | Authentication token -`id` | Collection id - ---- - -### `collections.create` - Create a document collection - -Creates a new document collection. Outline supports two types of collections: - -- `atlas` - Structured collection with a navigation tree -- `journal` - Chronological collection of documents - -#### Arguments - -`https://www.getoutline.com/api/collections.create` - -Parameter | Description ------------- | ------------- -`token` | Authentication token -`name` | Collection name -`type` | Collection type. Allowed values: `atlas`, `journal` -`description` | _(Optional)_ Short description for the collection - ---- - -### `collections.updateNavigationTree` - Organize navigation tree - -Collection navigation can be re-organized by sending a modified version of the navigation tree. This method is available for collections with type `atlas`. - -#### Arguments - -`https://www.getoutline.com/api/collections.updateNavigationTree` - -Parameter | Description ------------- | ------------- -`token` | Authentication token -`id` | Collection id -`tree` | Modified navigation tree - ---- - -### `documents.info` - Get a document - -This method returns information for a document with a specific ID. Following identifiers are allowed: - -- UUID - `id` field of the document -- URI identifier - Human readable identifier used in Outline URLs (e.g. `outline-api-i48ZEZc5zjXndcP`) - -#### Arguments - -`https://www.getoutline.com/api/documents.info` - -Parameter | Description ------------- | ------------- -`token` | Authentication token -`id` | Document id or URI identifier - ---- - -### `documents.search` - Search documents - -This methods allows you to search all of your documents with keywords. - -#### Arguments - -`https://www.getoutline.com/api/documents.search` - -Parameter | Description ------------- | ------------- -`token` | Authentication token -`query` | Search query - ---- - -### `documents.create` - Create a new document - -This method allows you to publish a new document under an existing collection. If your collection is structured `type: atlas` collection, you can also create sub-documents for other documents with optional `parentDocument` parameter. - -#### Arguments - -`https://www.getoutline.com/api/documents.create` - -Parameter | Description ------------- | ------------- -`token` | Authentication token -`collection` | `id` of the collection to which the document is created -`title` | Title for the document -`text` | Content of the document in Markdown -`parentDocument` | _(Optional)_ `id` of the parent document within the collection - ---- - -### `documents.delete` - Delete a document - -Delete a document and all of its child documents if any. - -#### Arguments - -`https://www.getoutline.com/api/documents.delete` - -Parameter | Description ------------- | ------------- -`token` | Authentication token -`id` | Document id or URI identifier diff --git a/app/static/flatpages/index.js b/app/static/flatpages/index.js deleted file mode 100644 index 3b1fe70f0..000000000 --- a/app/static/flatpages/index.js +++ /dev/null @@ -1,6 +0,0 @@ -// @flow -import api from './api.md'; - -export default { - api, -}; diff --git a/app/stores/AuthStore.js b/app/stores/AuthStore.js index 5bb7e7fc5..6ee2d9a38 100644 --- a/app/stores/AuthStore.js +++ b/app/stores/AuthStore.js @@ -53,7 +53,10 @@ class AuthStore { @action authWithSlack = async (code: string, state: string) => { - if (state !== this.oauthState) { + // in the case of direct install from the Slack app store the state is + // created on the server and set as a cookie + const serverState = Cookie.get('state', { path: '/' }); + if (state !== this.oauthState && state !== serverState) { return { success: false, }; @@ -68,6 +71,9 @@ class AuthStore { }; } + // State can only ever be used once so now's the time to remove it. + Cookie.remove('state', { path: '/' }); + invariant( res && res.data && res.data.user && res.data.team && res.data.accessToken, 'All values should be available' diff --git a/app/utils/routeHelpers.js b/app/utils/routeHelpers.js index 668f5ab56..a0926970d 100644 --- a/app/utils/routeHelpers.js +++ b/app/utils/routeHelpers.js @@ -22,31 +22,6 @@ export function documentUrl(doc: Document): string { return doc.url; } -export function slackAuth( - state: string, - scopes: string[] = [ - 'identity.email', - 'identity.basic', - 'identity.avatar', - 'identity.team', - ], - redirectUri: string = `${BASE_URL}/auth/slack` -): string { - const baseUrl = 'https://slack.com/oauth/authorize'; - const params = { - client_id: SLACK_KEY, - scope: scopes ? scopes.join(' ') : '', - redirect_uri: redirectUri, - state, - }; - - const urlParams = Object.keys(params) - .map(key => `${key}=${encodeURIComponent(params[key])}`) - .join('&'); - - return `${baseUrl}?${urlParams}`; -} - export function documentNewUrl(doc: Document): string { const newUrl = `${doc.collection.url}/new`; if (doc.parentDocumentId) { diff --git a/package.json b/package.json index 22f429109..42896346d 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer", "build": "npm run clean && npm run build:webpack", "start": "NODE_ENV=production node index.js", - "dev": "NODE_ENV=development nodemon --inspect --watch server index.js", + "dev": "NODE_ENV=development nodemon --watch server index.js", "lint": "npm run lint:flow && npm run lint:js", "lint:js": "eslint app", "lint:flow": "flow", @@ -152,7 +152,7 @@ "slate-collapse-on-escape": "^0.2.1", "slate-edit-code": "^0.10.2", "slate-edit-list": "^0.7.0", - "slate-md-serializer": "0.5.5", + "slate-md-serializer": "0.5.6", "slate-paste-linkify": "^0.2.1", "slate-prism": "^0.2.2", "slate-trailing-block": "^0.2.4", diff --git a/server/api/hooks.js b/server/api/hooks.js index 999c579d8..26269a00d 100644 --- a/server/api/hooks.js +++ b/server/api/hooks.js @@ -26,24 +26,30 @@ router.post('hooks.slack', async ctx => { limit: 5, }); - const results = []; - let number = 1; - for (const document of documents) { - results.push( - `${number}. <${process.env.URL}${document.getUrl()}|${document.title}>` - ); - number += 1; - } + if (documents) { + const results = []; + let number = 1; + for (const document of documents) { + results.push( + `${number}. <${process.env.URL}${document.getUrl()}|${document.title}>` + ); + number += 1; + } - ctx.body = { - text: 'Search results:', - attachments: [ - { - text: results.join('\n'), - color: '#3AA3E3', - }, - ], - }; + ctx.body = { + text: 'Search results:', + attachments: [ + { + text: results.join('\n'), + color: '#3AA3E3', + }, + ], + }; + } else { + ctx.body = { + text: 'No search results', + }; + } }); export default router; diff --git a/server/pages/Api.js b/server/pages/Api.js new file mode 100644 index 000000000..e41b9b52a --- /dev/null +++ b/server/pages/Api.js @@ -0,0 +1,559 @@ +// @flow +import React from 'react'; +import Grid from 'styled-components-grid'; +import { Helmet } from 'react-helmet'; +import styled from 'styled-components'; + +const Container = styled.div` + max-width: 720px; + margin: 0 auto; + + pre { + padding: 0.5em 1em; + background: #f9fbfc; + border-radius: 4px; + border: 1px solid #e8ebed; + overflow: scroll; + } + + code { + font-size: 15px; + } + + table { + border-collapse: collapse; + + thead { + td { + padding: 5px 12px 5px 0; + border-bottom: 1px solid #ddd; + vertical-align: bottom; + font-weight: 500; + } + } + + tbody, + thead { + td { + padding: 5px 12px 5px 0; + } + + td:last-child { + width: 100%; + padding-right: 0; + } + } + } + + h3 { + code { + font-size: 1.08em; + } + } +`; + +export default function Pricing() { + return ( + + + Developer API - Outline + + +

Outline API

+

+ First thing we build for Outline was its API. It’s the heart and soul + of the service and as developers, it’s our mission to make the API as + rich and easy to use as possible. +

+

+ + While Outline is still in public beta, we might make small + adjustments, including breaking changes to the API. + +

+

Making requests

+

+ Outline’s API follows simple RPC style conventions where each API + endpoint is a method on{' '} + https://www.getoutline.com/api/<METHOD>. Both{' '} + GET and POST methods are supported but it’s + recommeded that you make all call using POST. Only HTTPS + is supported in production. +

+ +

+ For GET requests query string parameters are expected + (e.g. + /api/document.info?id=...&token=...). When making{' '} + POST requests, request parameters are parsed depending on{' '} + Content-Type header. To make a call using JSON payload, + one must pass Content-Type: application/json header: +

+ +

+ Example POST request: +

+
+          
+            {`curl https://www.getoutline.com/api/documents.info
+  -X POST
+  -H 'authorization: Bearer API_KEY'
+  -H 'content-type: application/json'
+  -H 'accept: application/json'
+  -d '{"id": "outline-api-NTpezNwhUP"}'
+`}
+          
+        
+ +

+ Example GET request: +

+
+          
+            {`curl https://www.getoutline.com/api/documents.info?id=outline-api-NTpezNwhUP&token=API_KEY
+`}
+          
+        
+ +

Authentication

+ +

+ To access private API endpoints, you must provide a valid API key. You + can create new API keys in your{' '} + account settings. Be + careful when handling your keys as they give access to all of your + documents. +

+ +

+ To authenticate with Outline API, you can supply the API key as a + header (Authorization: Bearer YOUR_API_KEY) or as part of + the payload using token parameter. If you're making{' '} + GET requests, header based authentication is recommended + so that your keys don't leak into logs. +

+ +

+ Some API endpoints allow unauhenticated requests for public resources + and they can be called without an API key. +

+ +

Errors

+ +

+ All successful API requests will be returned with 200{' '} + status code and ok: true in the response payload. If + there’s an error while making the request, appropriate status code is + returned with the error message: +

+ +
+          
+            {`{
+  "ok": false,
+  "error: "Not Found"
+}
+`}
+          
+        
+ +

Methods

+ + + + This method returns the information for currently logged in user. + + + + + + + + + You can upload small files and images as part of your documents. + All files are stored using Amazon S3. Instead of uploading files + to Outline, you need to upload them directly to S3 with special + credentials which can be obtained through this endpoint. + + + + + + + + + + List all your document collections. + + + + + + Returns detailed information on a document collection. + + + + + + + + Creates a new document collection. + + + + + + + + + This method allows you to modify already created document. + + + + + + + + + + + Delete a collection and all of its documents. This action can`t be + undone so please be careful. + + + + + + + + +

+ This method returns information for a document with a specific + ID. Following identifiers are allowed: +

+
    +
  • + UUID - id field of the document +
  • +
  • + URI identifier - Human readable identifier used in Outline + URLs (e.g. outline-api-i48ZEZc5zjXndcP) +
  • +
+
+ + + +
+ + + + This methods allows you to search all of your documents with + keywords. + + + + + + + + + This method allows you to publish a new document under an existing + collection. By default a document is set to the parent collection + root. If you want to create a subdocument, you can pass{' '} + parentDocument to set parent document. + + + + ID of the collection to which the document is + created + + } + required + /> + + + + ID of the parent document within the collection + + } + /> + + + + + + This method allows you to modify already created document. + + + + + + + + + + + Move a document into a new location inside the collection. This is + easily done by defining the parent document ID and optional index. + If no parent document is provided, the document will be moved to + the collection root. + + + + + + + + + + + Delete a document and all of its child documents if any. + + + + + + + + + Get a document with its ID or URL identifier from user’s + collections. + + + + + + + + + Star (favorite) a document for authenticated user. + + + + + + + + + Unstar as starred (favorited) a document for authenticated user. + + + + + + + + + Return recently viewed documents for the authenticated user + + + + + + + Return recently starred documents for the authenticated user + + + + + + + Return revisions for a document. Upon each edit, a new revision is + stored. + + + +
+
+
+ ); +} + +const MethodList = styled.ul` + margin-bottom: 80px; +`; + +const Methods = (props: { children: React.Element<*> }) => { + const children = React.Children.toArray(props.children); + const methods = children.map(child => child.props.method); + + return ( +
+ + {methods.map(method => ( +
  • + {method} +
  • + ))} +
    + {children} +
    + ); +}; + +const MethodContainer = styled.div` + margin-bottom: 80px; +`; + +const Request = styled.h4` + text-transform: capitalize; +`; + +type MethodProps = { + method: string, + label: string, + children: React.Element<*>, +}; + +const Method = (props: MethodProps) => { + const children = React.Children.toArray(props.children); + const description = children.find(child => child.type === Description); + const apiArgs = children.find(child => child.type === Arguments); + + return ( + +

    + {props.method} - {props.label} +

    +
    {description}
    + HTTP request & arguments +

    + {`${process.env.URL}/api/${props.method}`} +

    + {apiArgs} +
    + ); +}; + +const Description = (props: { children: React.Element<*> }) => ( +

    {props.children}

    +); + +type ArgumentsProps = { + pagination?: boolean, + children?: React.Element<*> | string, +}; + +const Arguments = (props: ArgumentsProps) => ( + + + + + + + + + + + {props.pagination && ( + // $FlowIssue + + )} + {props.children} + +
    ArgumentRequiredDescription
    +); + +type ArgumentProps = { + id: string, + required?: boolean, + description: React.Element<*> | string, +}; + +const Argument = (props: ArgumentProps) => ( + + + {props.id} + + + {props.required ? 'required' : 'optional'} + + {props.description} + +); +const PaginationArguments = () => [ + , + , +]; diff --git a/server/pages/Home.js b/server/pages/Home.js index 93d9bc0e0..b2e62d7ab 100644 --- a/server/pages/Home.js +++ b/server/pages/Home.js @@ -14,8 +14,8 @@ function Home() {

    Your team’s knowledge base

    - Documentation, meeting notes, playbooks, onboarding, work logs, - brainstorming, decisions, & more… + Team wiki, documentation, meeting notes, playbooks, onboarding, work + logs, brainstorming, & more…

    @@ -24,7 +24,7 @@ function Home() { -

    Blazing Fast

    +

    Blazing Fast Wiki

    Outline is fast, really fast. We’ve worked hard to ensure millisecond response times, documents load instantly, search is @@ -34,9 +34,10 @@ function Home() {

    # Markdown Support

    - Outline stores all documents in plain Markdown. Shortcuts are - also built right into the editor so you can easily format using{' '} - **markdown syntax** if you like. + Outline stores, imports and exports all documents in plain + Markdown. Shortcuts are also built right into the editor so you + can easily format using **markdown syntax** if + you like.

    @@ -85,9 +86,9 @@ function Home() {

    On the same page as us? Create a beta account to give Outline a try.

    -

    + -

    + @@ -134,6 +135,10 @@ const Footer = styled.div` padding: 6em; `; +const FooterCTA = styled.p` + padding-top: 1em; +`; + const HeroText = styled.p` font-size: 18px; max-width: 600px; diff --git a/server/pages/components/Hero.js b/server/pages/components/Hero.js index 142d8d525..58f7bfd1c 100644 --- a/server/pages/components/Hero.js +++ b/server/pages/components/Hero.js @@ -4,6 +4,7 @@ import styled from 'styled-components'; const Hero = styled.div` width: 100%; height: 70vh; + max-height: 600px; padding: 6em 2em 0; text-align: center; diff --git a/server/pages/components/Layout.js b/server/pages/components/Layout.js index a962cfac6..d6371c995 100644 --- a/server/pages/components/Layout.js +++ b/server/pages/components/Layout.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import { Helmet } from 'react-helmet'; -import Navigation from './Navigation'; +import { TopNavigation, BottomNavigation } from './Navigation'; import Analytics from '../../../shared/components/Analytics'; import globalStyles from '../../../shared/styles/globals'; import { color } from '../../../shared/styles/constants'; @@ -48,8 +48,9 @@ export default function Layout({ children }: Props) { {'{{CSS}}'} - + {children} + ); diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js index a2b84ee39..3610c638c 100644 --- a/server/pages/components/Navigation.js +++ b/server/pages/components/Navigation.js @@ -1,10 +1,17 @@ // @flow import React from 'react'; import styled from 'styled-components'; -import { signin, developers, blogUrl } from '../../utils/routeHelpers'; +import { + signin, + developers, + githubUrl, + spectrumUrl, + blogUrl, + twitterUrl, +} from '../../utils/routeHelpers'; import { color } from '../../../shared/styles/constants'; -function Navigation() { +function TopNavigation() { return (