Tight header condition

components/navigation/DesktopHeader.tsx

@@ -1,13 +1,17 @@
 import classNames from 'classnames';
 import Link from 'next/link';
-import React, { useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
 import OxenLogoSVG from '../../assets/svgs/brand.svg';
 import { NAVIGATION, UI } from '../../constants';
+import { ScreenContext } from '../../contexts/screen';
 
 export function DesktopHeader() {
+  const { width } = useContext(ScreenContext);
   const navBarRef = useRef(null);
 
+  const tightHeader = width < 740 && width > UI.TABLET_BREAKPOINT;
+
   return (
     <div
       ref={navBarRef}
@@ -15,7 +19,7 @@ export function DesktopHeader() {
         height: `${UI.HEADER_HEIGHT_PX}px`,
       }}
       className={classNames(
-        'w-full bg-alt flex items-center border-b border-primary',
+        'w-full overflow-hidden bg-alt flex items-center border-b border-primary',
       )}
     >
       <div className="flex items-center w-full h-full px-6">
@@ -23,7 +27,12 @@ export function DesktopHeader() {
           <div className="flex flex-grow">
             <Link href="/">
               <a className="flex items-center flex-shrink-0 text-primary">
-                <OxenLogoSVG className="h-8 fill-current" />
+                <OxenLogoSVG
+                  className={classNames(
+                    'fill-current',
+                    tightHeader ? 'h-6' : 'h-8',
+                  )}
+                />
               </a>
             </Link>
           </div>

components/navigation/Header.tsx

@@ -4,6 +4,6 @@ import { DesktopHeader } from './DesktopHeader';
 import { MobileHeader } from './MobileHeader';
 
 export function Header() {
-  const { isHuge } = useContext(ScreenContext);
-  return <>{isHuge ? <DesktopHeader /> : <MobileHeader />}</>;
+  const { isDesktop } = useContext(ScreenContext);
+  return <>{isDesktop ? <DesktopHeader /> : <MobileHeader />}</>;
 }

components/navigation/MobileHeader.tsx

@@ -6,18 +6,28 @@ import OxenLogoSVG from '../../assets/svgs/brand.svg';
 import TriangleSVG from '../../assets/svgs/triangle.svg';
 import { UI } from '../../constants';
 import { ScreenContext } from '../../contexts/screen';
-import { collapseSideMenu, expandSideMenu } from '../../state/navigation';
+import {
+  collapseSideMenu,
+  expandMobileHeaderMenu,
+  expandSideMenu,
+  PageType,
+} from '../../state/navigation';
 import { IState } from '../../state/reducers';
+import { MobileMenu } from './MobileMenu';
 
 export function MobileHeader() {
-  const { isMobile } = useContext(ScreenContext);
-  const { sideMenuExpanded: expanded } = useSelector(
+  const { isMobile, isTablet } = useContext(ScreenContext);
+  const { sideMenuExpanded, headerMobileMenuExpanded, pageType } = useSelector(
     (state: IState) => state.navigation,
   );
   const dispatch = useDispatch();
 
+  // On blog page, the sidebar disappears so we need a
+  // hamburger menu for topbar links
+  const isBlog = pageType === PageType.BLOG;
+
   const toggleSideMenu = () =>
-    dispatch(expanded ? collapseSideMenu() : expandSideMenu());
+    dispatch(sideMenuExpanded ? collapseSideMenu() : expandSideMenu());
 
   return (
     <div
@@ -38,15 +48,28 @@ export function MobileHeader() {
           </Link>
         </div>
 
-        {isMobile && (
+        {isMobile && !isBlog && (
           <TriangleSVG
             onClick={() => toggleSideMenu()}
             className={classNames(
               'h-3 transform outline-none duration-300',
-              expanded ? 'rotate-180' : '-rotate-60',
+              sideMenuExpanded ? 'rotate-180' : '-rotate-60',
             )}
           />
         )}
+
+        {isTablet && !isBlog && (
+          <>
+            <TriangleSVG
+              onClick={() => dispatch(expandMobileHeaderMenu())}
+              className={classNames(
+                'h-3 transform outline-none duration-300',
+                headerMobileMenuExpanded ? 'rotate-90' : 'rotate-90',
+              )}
+            />
+            <MobileMenu />
+          </>
+        )}
       </div>
     </div>
   );

components/navigation/MobileMenu.tsx

@@ -0,0 +1,47 @@
+import Link from 'next/link';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { v4 as uuid } from 'uuid';
+import { NAVIGATION, UI } from '../../constants';
+import { IState } from '../../state/reducers';
+
+export function MobileMenu() {
+  const { headerMobileMenuExpanded: expanded } = useSelector(
+    (state: IState) => state.navigation,
+  );
+
+  return (
+    <div
+      style={{
+        marginTop: `${UI.HEADER_HEIGHT_PX}px`,
+        display: expanded ? 'block' : 'none',
+      }}
+      className="absolute top-0 left-0 right-0 overflow-hidden"
+    >
+      <div
+        style={{
+          transform: expanded ? 'translateY(0)' : 'translateY(-100%)',
+        }}
+        className="flex flex-col duration-300 bg-gray-100"
+      >
+        {NAVIGATION.MENU_ITEMS.map(item => {
+          return (
+            <div key={uuid()}>
+              {item.external ? (
+                <a className="w-full py-4 text-lg text-center uppercase focus:bg-secondary hover:bg-secondary focus:text-white hover:text-white">
+                  {item.label}
+                </a>
+              ) : (
+                <Link key={item.label} href={item.href} as={item.href}>
+                  <a className="w-full py-4 text-lg text-center uppercase focus:bg-secondary hover:bg-secondary focus:text-white hover:text-white">
+                    {item.label}
+                  </a>
+                </Link>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/navigation/SideMenuInner.tsx

@@ -40,7 +40,7 @@ export function SideMenuInner() {
 
       <Contained>
         <div className="flex flex-col w-full space-y-4">
-          {!isHuge && (
+          {!isDesktop && (
             <div
               className={classNames(
                 'flex flex-col pt-8 pb-2 font-medium uppercase font-prompt',

constants/navigation.ts

@@ -25,8 +25,8 @@ const MENU_ITEMS: IMenuItem[] = [
     external: true,
   },
   {
-    label: 'Community',
-    href: '/community',
+    label: 'Get Involved',
+    href: '/get-involved',
     newTab: false,
     subtle: false,
     external: false,

services/cms.ts

@@ -17,6 +17,7 @@ export class CmsApi {
     return this.client
       .getEntries({
         content_type: 'post', // only fetch blog post entry
+        order: 'sys.createdAt',
       })
       .then(entries => {
         if (entries && entries.items && entries.items.length > 0) {
@@ -55,6 +56,7 @@ export class CmsApi {
     try {
       const entries = await this.client.getEntries({
         content_type: 'splitPage', // only fetch blog post entry
+        order: 'sys.createdAt',
       });
 
       if (entries && entries.items && entries.items.length > 0) {

state/navigation.ts

@@ -16,10 +16,11 @@ export type TPages = {
 };
 
 export interface INavigation {
-  headerCollapsed: boolean;
-  sideMenuExpanded: boolean;
   pageType: PageType;
   postTitle?: string;
+  headerCollapsed: boolean;
+  sideMenuExpanded: boolean;
+  headerMobileMenuExpanded: boolean;
   pages?: TPages;
 }
 
@@ -36,6 +37,7 @@ export const initialNavigationState: INavigation = {
   postTitle: undefined,
   headerCollapsed: true,
   sideMenuExpanded: false,
+  headerMobileMenuExpanded: false,
 };
 
 export enum NavigationActions {
@@ -45,6 +47,8 @@ export enum NavigationActions {
   EXPAND_SIDE_MENU = 'EXPAND_SIDE_MENU',
   COLLAPSE_SIDE_MENU = 'COLLAPSE_SIDE_MENU',
   SET_SPLIT_PAGES_CONTENT = 'SET_SPLIT_PAGES_CONTENT',
+  EXPAND_MOBILE_HEADER_MENU = 'EXPAND_MOBILE_HEADER_MENU',
+  COLLAPSE_MOBILE_HEADER_MENU = 'COLLAPSE_MOBILE_HEADER_MENU',
 }
 
 // ////////////////////////////// //
@@ -78,3 +82,11 @@ export const setSplitPagesContent = (pages: TPages) => ({
   type: NavigationActions.SET_SPLIT_PAGES_CONTENT,
   payload: pages,
 });
+
+export const expandMobileHeaderMenu = () => ({
+  type: NavigationActions.EXPAND_MOBILE_HEADER_MENU,
+});
+
+export const collapseMobileHeader = () => ({
+  type: NavigationActions.COLLAPSE_MOBILE_HEADER_MENU,
+});

state/reducers/navigation.ts

@@ -32,6 +32,12 @@ export const navigationReducer = (
     case NavigationActions.SET_SPLIT_PAGES_CONTENT: {
       return { ...state, pages: action.payload };
     }
+    case NavigationActions.EXPAND_MOBILE_HEADER_MENU: {
+      return { ...state, headerMobileMenuExpanded: true };
+    }
+    case NavigationActions.COLLAPSE_MOBILE_HEADER_MENU: {
+      return { ...state, headerMobileMenuExpanded: false };
+    }
     default:
       return state;
   }