manifold/client/src/backend/components/theme/HeaderPreview/index.js at b6e07de93e8576819f4770d3d9ebfa3c7da4ec4f · ManifoldScholar/manifold · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { useFromStore } from "hooks";
import { useTranslation } from "react-i18next";
import SetCSSProperty from "global/components/utility/SetCSSProperty";
import PressLogo from "global/components/PressLogo";
import HeaderLogo from "global/components/atomic/HeaderLogo";
import IconComposer from "global/components/utility/IconComposer";

const DEFAULTS = {
  accentColor: "#52e3ac",
  foregroundColor: "#696969",
  backgroundColor: "#ffffff",
  activeColor: "#363636"
};

export default function HeaderPreview({
  accentColor,
  foregroundColor,
  backgroundColor,
  activeColor
}) {
  const { t } = useTranslation();
  const settings = useFromStore({ requestKey: "settings", action: "select" });
  const offset = settings.attributes.theme.headerOffset;
  const navStyle = offset
    ? { position: "relative", top: parseInt(offset, 10) }
    : {};

  return (
    <div
      className="library-header library-header--light"
      style={{
        "--color-accent-primary": accentColor || DEFAULTS.accentColor,
        "--hover-color": accentColor || DEFAULTS.accentColor,
        "--color-header-background":
          backgroundColor || DEFAULTS.backgroundColor,
        "--color-header-foreground":
          foregroundColor || DEFAULTS.foregroundColor,
        "--color-header-foreground-active": activeColor || DEFAULTS.activeColor
      }}
      inert=""
    >
      <SetCSSProperty
        measurement="height"
        propertyName="--library-header-height"
      >
        <div className="library-header__inner-preview">
          <HeaderLogo as="span">
            <>
              <span className="screen-reader-text">
                {t("navigation.return_home")}
              </span>
              <PressLogo
                url={settings.attributes.pressLogoStyles.medium}
                styles={settings.attributes.theme.logoStyles}
                aria-hidden="true"
              />
            </>
          </HeaderLogo>
          <nav
            className="site-nav show-82"
            aria-label={t("navigation.primary")}
            style={navStyle}
          >
            <ul className="site-nav__list">
              <li className="site-nav__item">
                <span className="site-nav__link site-nav__link--active">
                  {t("titles.home")}
                </span>
              </li>
              <li className="site-nav__item">
                <span className="site-nav__link">
                  {t("glossary.project_title_case_other")}
                </span>
              </li>
              <li className="site-nav__item">
                <span className="site-nav__link">
                  {t("glossary.journal_title_case_other")}
                </span>
              </li>
              <li className="site-nav__item">
                <span className="site-nav__link">
                  {t("glossary.reading_group_title_case_other")}
                </span>
              </li>
            </ul>
          </nav>
          <nav className="breadcrumb-list hide-82">
            <span>
              <span className="breadcrumb-list__link">{t("titles.home")}</span>
            </span>
          </nav>
          <span className="mobile-nav-toggle hide-82">
            <IconComposer
              icon="menu32"
              size="default"
              className="mobile-nav-trigger__icon"
            />
          </span>
        </div>
      </SetCSSProperty>
    </div>
  );
}