Tco header dropdown

src/shared/components/buttons/themed/tc.scss

@@ -7,6 +7,7 @@
   text-decoration: none !important;
   text-transform: uppercase !important;
   margin: 0 !important;
+  white-space: nowrap !important;
 }
 
 @mixin primary-green {
@@ -107,6 +108,7 @@
   text-decoration: none !important;
   text-transform: uppercase !important;
   margin: 0 !important;
+  white-space: nowrap !important;
 }
 
 @mixin secondary-gray {
@@ -133,6 +135,7 @@
   font-weight: 700 !important;
   text-transform: uppercase !important;
   margin: 0 !important;
+  white-space: nowrap !important;
 }
 
 @mixin warn-red {

src/shared/components/tc-communities/Header/index.jsx

@@ -244,14 +244,16 @@ function Header(props) {
             <div className={theme.logos}>
               {renderedLogos}
             </div>
-
-            <div className={theme.challengeDropdown}>
-              <Dropdown
-                options={communitySelector}
-                value="-1"
-              />
-            </div>
-
+            {
+              !_.startsWith(communityId, 'tco') ? (
+                <div className={theme.challengeDropdown}>
+                  <Dropdown
+                    options={communitySelector}
+                    value="-1"
+                  />
+                </div>
+              ) : null
+            }
           </div>
           <div className={theme.userWrapMobile}>
             {profile && (

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 = () => (
+    <div className={defaultStyle.profile}>
+      {
+        auth && auth.profile ? (
+          <React.Fragment>
+            <Link to={`${base}/members/${auth.profile.handle}`} className={defaultStyle.userMenuHandle}>
+              {auth.profile.handle}
+            </Link>
+            <Avatar url={auth.profile.photoURL} />
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <a href={`${config.URL.AUTH}/member?utm_source=TCO20site&retUrl=${getCurrentUrl()}`} className={defaultStyle.loginLink}>LOGIN</a>
+            <a href={`${config.URL.AUTH}/member/registration?utm_source=TCO20site&retUrl=${getCurrentUrl()}`} className={defaultStyle.signUpLink}>SIGN UP</a>
+          </React.Fragment>
+        )
+      }
+    </div>
+  );
+  return (
+    <div className={defaultStyle.topHeader}>
+      <div className={defaultStyle.logoWrapp}>
+        <Link to={base} className={defaultStyle.headerLogo}>
+          <TCO20Logo />
+        </Link>
+        <MediaQuery maxWidth={768}>
+          {
+            profileHTML()
+          }
+        </MediaQuery>
+      </div>
+      {
+        meta.menuItems ? (
+          <ContentfulMenu
+            id={meta.menuItems[0].navigationMenu}
+            spaceName={meta.menuItems[0].spaceName}
+            environment={meta.menuItems[0].environment}
+            baseUrl={base}
+          />
+        ) : null
+      }
+      <MediaQuery minWidth={769}>
+        {
+          profileHTML()
+        }
+      </MediaQuery>
+    </div>
+  );
+}
+
+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);

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;
+      }
+    }
+  }
+}

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 (
     <div>
-      {
-        meta.menuItems ? (
-          <ContentfulMenu
-            id={meta.menuItems[0].navigationMenu}
-            spaceName={meta.menuItems[0].spaceName}
-            environment={meta.menuItems[0].environment}
-            baseUrl={base}
-          />
-        ) : null
-      }
+      <TCO20Header base={base} meta={meta} />
       <Switch>
         <Route
           render={props => <Profile {...props} meta={meta} />}

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
  */