{profile && (
diff --git a/src/shared/containers/tc-communities/tco20/Header.jsx b/src/shared/containers/tc-communities/tco20/Header.jsx
new file mode 100644
index 0000000000..57057f0e8d
--- /dev/null
+++ b/src/shared/containers/tc-communities/tco20/Header.jsx
@@ -0,0 +1,83 @@
+/** TCO20 special header */
+
+import PT from 'prop-types';
+import React from 'react';
+import ContentfulMenu from 'components/Contentful/Menu';
+import { Link, config } from 'topcoder-react-utils';
+import { connect } from 'react-redux';
+import { Avatar } from 'topcoder-react-ui-kit';
+import MediaQuery from 'react-responsive';
+import { getCurrentUrl } from 'utils/url';
+import TCO20Logo from 'assets/themes/tco/TCO20.svg';
+import defaultStyle from './header.scss';
+
+function TCO20Header(props) {
+ const { base, meta, auth } = props;
+ const profileHTML = () => (
+
+ {
+ auth && auth.profile ? (
+
+
+ {auth.profile.handle}
+
+
+
+ ) : (
+
+ LOGIN
+ SIGN UP
+
+ )
+ }
+
+ );
+ return (
+
+
+
+
+
+
+ {
+ profileHTML()
+ }
+
+
+ {
+ meta.menuItems ? (
+
+ ) : null
+ }
+
+ {
+ profileHTML()
+ }
+
+
+ );
+}
+
+TCO20Header.defaultProps = {
+ base: '',
+ auth: null,
+};
+
+TCO20Header.propTypes = {
+ base: PT.string,
+ meta: PT.shape().isRequired,
+ auth: PT.shape(),
+};
+
+function mapStateToProps(state) {
+ return {
+ auth: state.auth,
+ };
+}
+
+export default connect(mapStateToProps)(TCO20Header);
diff --git a/src/shared/containers/tc-communities/tco20/header.scss b/src/shared/containers/tc-communities/tco20/header.scss
new file mode 100644
index 0000000000..ebe422a655
--- /dev/null
+++ b/src/shared/containers/tc-communities/tco20/header.scss
@@ -0,0 +1,66 @@
+@import '~styles/mixins';
+@import 'components/buttons/themed/tc.scss';
+
+.topHeader {
+ display: flex;
+ align-items: center;
+ background-color: $tc-black;
+
+ @include xs-to-sm {
+ flex-direction: column;
+ padding-top: 15px;
+ }
+
+ .logoWrapp {
+ display: flex;
+ justify-content: space-between;
+
+ @include xs-to-sm {
+ width: 100%;
+ }
+
+ .headerLogo {
+ svg {
+ max-height: 28px;
+
+ @include xs-to-sm {
+ margin-left: -35px;
+ }
+ }
+ }
+ }
+
+ .profile {
+ margin-right: 26px;
+ display: flex;
+
+ .userMenuHandle {
+ color: #fff;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 30px;
+ white-space: nowrap;
+ font-family: Roboto, sans-serif;
+ margin-right: 12px;
+ }
+
+ .loginLink {
+ text-decoration: none;
+ color: #888894;
+ font-family: Roboto, sans-serif;
+ font-size: 13px;
+ font-weight: bold;
+ line-height: 30px;
+ margin-right: 30px;
+ }
+
+ .signUpLink {
+ @include primary-borderless;
+ @include sm;
+
+ &:hover {
+ @include primary-borderless;
+ }
+ }
+ }
+}
diff --git a/src/shared/routes/Communities/TCO20/Routes.jsx b/src/shared/routes/Communities/TCO20/Routes.jsx
index 3f4ab6b468..bfb0a513bb 100644
--- a/src/shared/routes/Communities/TCO20/Routes.jsx
+++ b/src/shared/routes/Communities/TCO20/Routes.jsx
@@ -7,24 +7,15 @@ import PT from 'prop-types';
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import ContentfulRoute from 'components/Contentful/Route';
-import ContentfulMenu from 'components/Contentful/Menu';
import Viewport from 'components/Contentful/Viewport';
import Profile from 'routes/Profile';
import ProfileStats from 'routes/ProfileStats';
+import TCO20Header from 'containers/tc-communities/tco20/Header';
export default function TCO20({ base, meta }) {
return (
- {
- meta.menuItems ? (
-
- ) : null
- }
+
}
diff --git a/src/shared/utils/url.js b/src/shared/utils/url.js
index f7c76b3da9..52ad5430a8 100644
--- a/src/shared/utils/url.js
+++ b/src/shared/utils/url.js
@@ -8,6 +8,15 @@ import _ from 'lodash';
import qs from 'qs';
import { isomorphy } from 'topcoder-react-utils';
import { BUCKETS } from 'utils/challenge-listing/buckets';
+
+/**
+ * Get current URL
+ */
+export function getCurrentUrl() {
+ if (isomorphy.isServerSide()) return null;
+ return window.location.href;
+}
+
/**
* Get current URL hash parameters as object
*/