"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _core = require("@emotion/core");

var _react = require("react");

var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));

var _List = _interopRequireDefault(require("@material-ui/core/List"));

var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _reactRouter = require("react-router");

var _burger = _interopRequireDefault(require("../../assets/burger.svg"));

var _styles = require("../../constants/styles");

var _index = require("../index");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n  padding-left: 20px;\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  padding-top: 8px;\n  margin: 0;\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  font-weight: 500;\n  font-family: Rubik, sans-serif;\n  font-size: ", "rem;\n  line-height: ", "rem;\n  color: ", ";\n  text-decoration: none;\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  padding: 10px 10px 10px 0;\n\n  :focus {\n    outline: none;\n  }\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  height: 45px !important;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  justify-self: center;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  display: grid;\n  padding: 16px 20px 12px;\n  align-items: center;\n  justify-content: space-between;\n  grid-template-columns: repeat(3, 1fr);\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var primary = _index.BrandColors.primary,
    secondary = _index.BrandColors.secondary;
var contentWrapper = (0, _core.css)(_templateObject());
var logoWrapper = (0, _core.css)(_templateObject2());
var logoStyle = (0, _core.css)(_templateObject3());
var hamburgerStyle = (0, _core.css)(_templateObject4());
var linkStyle = (0, _core.css)(_templateObject5(), 24 / _styles.defaultFontSize, 28 / _styles.defaultFontSize, primary.hex);
var subHeaderStyle = (0, _core.css)(_templateObject6(), linkStyle, secondary.hex);
var subLinkStyle = (0, _core.css)(_templateObject7(), linkStyle);

var SmallNav = function SmallNav() {
  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      open = _useState2[0],
      setOpen = _useState2[1];

  var toggleDrawer = function toggleDrawer(isOpen) {
    return function (event) {
      if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) {
        return;
      }

      setOpen(isOpen);
    };
  };

  var fullList = function fullList() {
    return (0, _core.jsx)("div", {
      className: {
        width: "auto"
      },
      role: "presentation",
      onClick: toggleDrawer(false),
      onKeyDown: toggleDrawer(false)
    }, (0, _core.jsx)("div", {
      css: contentWrapper
    }, (0, _core.jsx)("div", null, (0, _core.jsx)("button", {
      type: "button",
      onClick: toggleDrawer(false),
      css: hamburgerStyle
    }, (0, _core.jsx)("img", {
      src: _burger["default"],
      alt: "Close menu"
    }))), (0, _core.jsx)(_reactRouter.Link, {
      to: "/",
      css: logoWrapper
    }, (0, _core.jsx)(_index.Logo, {
      type: "squareLogo",
      css: logoStyle
    })), (0, _core.jsx)("div", null)), (0, _core.jsx)(_List["default"], {
      component: "nav",
      style: {
        paddingTop: 0
      }
    }, (0, _core.jsx)(_Divider["default"], null), (0, _core.jsx)(_ListItem["default"], null, (0, _core.jsx)(_reactRouter.Link, {
      to: "/cards",
      css: linkStyle
    }, (0, _core.jsx)(_ListItemText["default"], {
      primary: "EXPLORE CIVIC"
    }))), (0, _core.jsx)(_Divider["default"], null), (0, _core.jsx)(_ListSubheader["default"], {
      component: "div",
      id: "nested-list-subheader"
    }, (0, _core.jsx)("p", {
      css: subHeaderStyle
    }, "JOIN THE MOVEMENT")), (0, _core.jsx)(_ListItem["default"], null, (0, _core.jsx)("a", {
      css: subLinkStyle,
      href: "#work-with-us"
    }, (0, _core.jsx)(_ListItemText["default"], {
      primary: "Work With Us"
    }))), (0, _core.jsx)(_ListItem["default"], null, (0, _core.jsx)("a", {
      css: subLinkStyle,
      href: "#become-a-contributor"
    }, (0, _core.jsx)(_ListItemText["default"], {
      primary: "Become a Contributor"
    }))), (0, _core.jsx)(_Divider["default"], null), (0, _core.jsx)(_ListSubheader["default"], {
      component: "div",
      id: "nested-list-subheader"
    }, (0, _core.jsx)("p", {
      css: subHeaderStyle
    }, "ABOUT")), (0, _core.jsx)(_ListItem["default"], null, (0, _core.jsx)("a", {
      css: subLinkStyle,
      href: "#civic-platform"
    }, (0, _core.jsx)(_ListItemText["default"], {
      primary: "Civic Platform"
    }))), (0, _core.jsx)(_ListItem["default"], null, (0, _core.jsx)("a", {
      css: subLinkStyle,
      href: "#civic-software-foundation"
    }, (0, _core.jsx)(_ListItemText["default"], {
      primary: "Civic Software Foundation"
    }))), (0, _core.jsx)(_Divider["default"], null), (0, _core.jsx)(_ListItem["default"], null, (0, _core.jsx)("a", {
      css: linkStyle,
      href: "#contact-us"
    }, (0, _core.jsx)(_ListItemText["default"], {
      primary: "CONTACT"
    })))));
  };

  return (0, _core.jsx)("nav", {
    css: contentWrapper
  }, (0, _core.jsx)("div", null, (0, _core.jsx)("button", {
    type: "button",
    onClick: toggleDrawer(true),
    css: hamburgerStyle
  }, (0, _core.jsx)("img", {
    src: _burger["default"],
    alt: "Open menu"
  })), (0, _core.jsx)(_Drawer["default"], {
    anchor: "top",
    open: open,
    onClose: toggleDrawer(false)
  }, fullList())), (0, _core.jsx)(_reactRouter.Link, {
    to: "/",
    css: logoWrapper
  }, (0, _core.jsx)(_index.Logo, {
    type: "squareLogo",
    css: logoStyle
  })), (0, _core.jsx)("div", null));
};

var _default = SmallNav;
exports["default"] = _default;