Learner Dash

The Learner Dash Header component handles the same responsibilities as the Home Header on the account and dashboard pages.

Learner Dash Header Props

Prop	Description
company	Object The Company to which the current instance belongs.
currentUser	Object OR Boolean If authenticated, a CurrentUser object containing information regarding current user. If not authenticated, will pass false
shouldLinkLogo	Boolean Determines whether the school logo should be linked to or be served as a static image.
logoLink	String The destination to which the school logo should link.

Example

// LearnerDashHeader.jsx
import React, { useEffect, useState } from 'react';

export default function LearnerDashHeader({ company, currentUser, shouldLinkLogo, logoLink}) {
  return (
    <div>
      <div>
        {company?.appearanceBlock?.logoAsset && (
          <Logo asset={company.appearanceBlock.logoAsset} shouldLinkLogo={shouldLinkLogo} logoLink={logoLink} />
        )}
      </div>
      <div>
        {currentUser?.id && currentUser?.role?.hasManagerInterfaceAccess && (
          <div>
            <a href="/learn/manager">Manager Access</a>
          </div>
        )}
        {currentUser?.firstName ? (
          <div>
            <span>Hello, {currentUser.firstName}!</span>
          </div>
        ) : (
          <div>
            <a href="/learn/sign_in">Sign In</a>
          </div>
        )}
      </div>
    </div>
  )
}

function Logo({asset, shouldLinkLogo, logoLink}) {
  if (shouldLinkLogo) {
    return (
      <a href={logoLink}>
        <img src={asset} />
      </a>
    )
  } else {
    return (<img src={asset} />)
  }
  
}