chore: Standardized headers (#1883)

* feat: Collection to standard header
feat: Sticky tabs

* chore: Document to standard header

* chore: Dashboard -> Home
chore: Scene component

* chore: Trash, Templates, Drafts

* fix: Mobile improvements

* fix: Content showing at sides and occassionally ontop of sticky headers

app/components/Sidebar/components/TeamButton.js

@@ -0,0 +1,86 @@
+// @flow
+import { ExpandedIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import Flex from "components/Flex";
+import TeamLogo from "components/TeamLogo";
+
+type Props = {|
+  teamName: string,
+  subheading: React.Node,
+  showDisclosure?: boolean,
+  onClick: (event: SyntheticEvent<>) => void,
+  logoUrl: string,
+|};
+
+const TeamButton = React.forwardRef<Props, any>(
+  ({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => (
+    <Wrapper>
+      <Header justify="flex-start" align="center" ref={ref} {...rest}>
+        <TeamLogo
+          alt={`${teamName} logo`}
+          src={logoUrl}
+          width={38}
+          height={38}
+        />
+        <Flex align="flex-start" column>
+          <TeamName showDisclosure>
+            {teamName} {showDisclosure && <Disclosure color="currentColor" />}
+          </TeamName>
+          <Subheading>{subheading}</Subheading>
+        </Flex>
+      </Header>
+    </Wrapper>
+  )
+);
+
+const Disclosure = styled(ExpandedIcon)`
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+
+const Subheading = styled.div`
+  padding-left: 10px;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  white-space: nowrap;
+  color: ${(props) => props.theme.sidebarText};
+`;
+
+const TeamName = styled.div`
+  position: relative;
+  padding-left: 10px;
+  padding-right: 24px;
+  font-weight: 600;
+  color: ${(props) => props.theme.text};
+  white-space: nowrap;
+  text-decoration: none;
+  font-size: 16px;
+`;
+
+const Wrapper = styled.div`
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+
+const Header = styled.button`
+  display: flex;
+  align-items: center;
+  padding: 20px 24px;
+  background: none;
+  line-height: inherit;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  width: 100%;
+
+  &:active,
+  &:hover {
+    transition: background 100ms ease-in-out;
+    background: rgba(0, 0, 0, 0.05);
+  }
+`;
+
+export default TeamButton;