{"size": 2622, "ext": "js", "max_stars_repo_path": "src/app/views/components/Navigation/index.js", "max_stars_repo_name": "naomiHauret/haaaveyoureadtrump", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/app/views/components/Navigation/index.js", "max_issues_repo_name": "naomiHauret/haaaveyoureadtrump", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/app/views/components/Navigation/index.js", "max_forks_repo_name": "naomiHauret/haaaveyoureadtrump", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.488372093, "max_line_length": 120, "alphanum_fraction": 0.5213577422}
import { h } from "hyperapp"
import { Link } from "@hyperapp/router"
import { ds } from "assets/styles/theme"
import cxs from "cxs"
import { pxTo } from "design-system-utils"
import { homePageUrl, aboutPageUrl, donaldMenuPageUrl, aboutPageName, donaldMenuPageName } from "app/routes"
const baseFontSize = ds.get("typo.sizes.base")

export default ({ location, showGraph }) => (
  <nav
    class={cxs({
      position: "absolute",
      zIndex: location.pathname === homePageUrl || showGraph === true ? -1 : 2,
      right: pxTo(65, baseFontSize, "rem"),
      top: "50%",
      transform: "translateY(-50%)",
      opacity: location.pathname === homePageUrl ? 0 : 1,
    })}
  >
    <ul
      class={cxs({
        listStyle: "none",
        margin: 0,
        padding: 0,
        "> li:not(:last-child)": {
          marginBottom: pxTo(25, baseFontSize, "rem"),
        },
        "> li span": {
          display: "none",
        },
        "> li a": {
          display: "block",
          width: pxTo(10, baseFontSize, "rem"),
          height: pxTo(10, baseFontSize, "rem"),
          borderWidth: pxTo(1, baseFontSize, "rem"),
          borderRadius: "100%",
          borderStyle: "solid",
        },
      })}
    >
      <li>
        <Link
          to={homePageUrl}
          class={cxs({
            borderColor:
              location.pathname === homePageUrl ? ds.get("colors.texts.navigation") : ds.get("colors.americanDarkGrey"),
            backgroundColor: location.pathname === homePageUrl ? ds.get("colors.texts.navigation") : "transparent",
          })}
        >
          <span>Home</span>
        </Link>
      </li>
      <li>
        <Link
          to={aboutPageUrl}
          class={cxs({
            borderColor:
              location.pathname === aboutPageUrl
                ? ds.get("colors.texts.navigation")
                : ds.get("colors.americanDarkGrey"),
            backgroundColor: location.pathname === aboutPageUrl ? ds.get("colors.texts.navigation") : "transparent",
          })}
        >
          <span>{aboutPageName}</span>
        </Link>
      </li>
      <li>
        <Link
          to={donaldMenuPageUrl}
          class={cxs({
            borderColor:
              location.pathname === donaldMenuPageUrl
                ? ds.get("colors.texts.navigation")
                : ds.get("colors.americanDarkGrey"),

            backgroundColor:
              location.pathname === donaldMenuPageUrl ? ds.get("colors.texts.navigation") : "transparent",
          })}
        >
          <span>{donaldMenuPageName}</span>
        </Link>
      </li>
    </ul>
  </nav>
)
