@uiw/react-markdown-preview-example/esm/NavMenu.js

Preview the markdown files and run the React examples in the documentation.

import _extends from "@babel/runtime/helpers/extends";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
import { Fragment, useEffect } from 'react';
import GitHubCorners from '@uiw/react-github-corners';
import styled from 'styled-components';
import { store, useStores } from "./store.js";
import { SupVersion } from "./index.js";
import { Logo as LogoIcon } from "./Logo.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function NavMenu(props) {
  useEffect(() => store.setNavMenu(props), [props]);
  return null;
}
var Nav = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  width: 100%;\n  backdrop-filter: saturate(180%) blur(0.4rem);\n  border-bottom: 1px solid var(--color-neutral-muted, #30363d);\n  z-index: 99;\n  top: 0;\n  left: 0;\n"])));
var NavInner = styled.article(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  padding-left: 10px;\n  padding-right: 10px;\n  max-width: 960px;\n  margin: 0 auto;\n  @media (min-width: 1024px) {\n    max-width: 62rem;\n  }\n"])));
var Logo = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  display: flex;\n  color: var(--color-theme-text);\n  align-items: center;\n  height: 24px;\n  padding: 10px 0;\n  svg {\n    width: 23px;\n    height: 23px;\n    margin: initial !important;\n  }\n"])));
var Menus = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.65rem;\n  a {\n    color: var(--color-fg-muted);\n    text-decoration: none;\n    transition: all 0.2s ease-in-out 0s;\n    &:hover {\n      color: var(--color-fg-default);\n    }\n  }\n"])));
var Title = styled.h2(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  font-weight: 900;\n  font-size: 1.2em;\n  margin: 0;\n  margin-left: 0.55rem;\n  white-space: nowrap;\n"])));
var GithubHref = styled.a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  color: var(--color-fg-default);\n  svg {\n    margin-top: 2px;\n  }\n"])));
export function NavMenuView(props) {
  var {
    disableDarkMode,
    disableCorners,
    version,
    logo
  } = props;
  var store = useStores();
  if (store.navMenu) {
    return /*#__PURE__*/_jsx(Nav, {
      children: /*#__PURE__*/_jsxs(NavInner, {
        children: [/*#__PURE__*/_jsxs(Logo, {
          children: [store.navMenu.logo || logo || LogoIcon, store.navMenu.title && /*#__PURE__*/_jsx(Title, {
            children: store.navMenu.title
          }), version && /*#__PURE__*/_jsx(SupVersion, {
            style: {
              position: 'initial',
              marginTop: '-0.7.em'
            },
            children: version
          })]
        }), /*#__PURE__*/_jsxs(Menus, {
          children: [store.navMenu.menus && store.navMenu.menus.map((item, idx) => {
            return /*#__PURE__*/_jsx(Fragment, {
              children: item
            }, idx);
          }), !disableCorners && /*#__PURE__*/_jsx(GithubHref, {
            href: store.corners.href,
            target: "_blank",
            rel: "noopener noreferrer",
            children: /*#__PURE__*/_jsx("svg", {
              viewBox: "0 0 24 24",
              fill: "none",
              stroke: "currentColor",
              strokeWidth: "2",
              width: "18px",
              strokeLinecap: "round",
              strokeLinejoin: "round",
              children: /*#__PURE__*/_jsx("path", {
                d: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
              })
            })
          }), !disableDarkMode && /*#__PURE__*/_jsx("dark-mode", _extends({
            permanent: true,
            style: {
              fontSize: 19
            }
          }, store.darkMode))]
        })]
      })
    });
  }
  return /*#__PURE__*/_jsxs(Fragment, {
    children: [!disableDarkMode && /*#__PURE__*/_jsx("dark-mode", _extends({
      permanent: true,
      style: {
        position: 'fixed',
        top: 8,
        left: 12,
        zIndex: 99,
        fontSize: 28
      }
    }, store.darkMode)), !disableCorners && /*#__PURE__*/_jsx(GitHubCorners, _extends({
      fixed: true,
      target: "__blank",
      zIndex: 10
    }, store.corners))]
  });
}