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) } })); }

import { css, jsx } from "@emotion/core";
import { useState } from "react";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListSubheader from "@material-ui/core/ListSubheader";
import Divider from "@material-ui/core/Divider";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import { Link } from "react-router";
import hamburgerMenu from "../../assets/burger.svg";
import { defaultFontSize } from "../../constants/styles";
import { Logo, BrandColors } from "../index";
var primary = BrandColors.primary,
    secondary = BrandColors.secondary;
var contentWrapper = css(_templateObject());
var logoWrapper = css(_templateObject2());
var logoStyle = css(_templateObject3());
var hamburgerStyle = css(_templateObject4());
var linkStyle = css(_templateObject5(), 24 / defaultFontSize, 28 / defaultFontSize, primary.hex);
var subHeaderStyle = css(_templateObject6(), linkStyle, secondary.hex);
var subLinkStyle = css(_templateObject7(), linkStyle);

var SmallNav = function SmallNav() {
  var _useState = 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 jsx("div", {
      className: {
        width: "auto"
      },
      role: "presentation",
      onClick: toggleDrawer(false),
      onKeyDown: toggleDrawer(false)
    }, jsx("div", {
      css: contentWrapper
    }, jsx("div", null, jsx("button", {
      type: "button",
      onClick: toggleDrawer(false),
      css: hamburgerStyle
    }, jsx("img", {
      src: hamburgerMenu,
      alt: "Close menu"
    }))), jsx(Link, {
      to: "/",
      css: logoWrapper
    }, jsx(Logo, {
      type: "squareLogo",
      css: logoStyle
    })), jsx("div", null)), jsx(List, {
      component: "nav",
      style: {
        paddingTop: 0
      }
    }, jsx(Divider, null), jsx(ListItem, null, jsx(Link, {
      to: "/cards",
      css: linkStyle
    }, jsx(ListItemText, {
      primary: "EXPLORE CIVIC"
    }))), jsx(Divider, null), jsx(ListSubheader, {
      component: "div",
      id: "nested-list-subheader"
    }, jsx("p", {
      css: subHeaderStyle
    }, "JOIN THE MOVEMENT")), jsx(ListItem, null, jsx(Link, {
      to: {
        pathname: "/",
        hash: "#work-with-us"
      },
      css: subLinkStyle
    }, jsx(ListItemText, {
      primary: "Work With Us"
    }))), jsx(ListItem, null, jsx(Link, {
      to: {
        pathname: "/",
        hash: "#become-a-contributor"
      },
      css: subLinkStyle
    }, jsx(ListItemText, {
      primary: "Become a Contributor"
    }))), jsx(Divider, null), jsx(ListSubheader, {
      component: "div",
      id: "nested-list-subheader"
    }, jsx("p", {
      css: subHeaderStyle
    }, "ABOUT")), jsx(ListItem, null, jsx(Link, {
      to: {
        pathname: "/",
        hash: "#civic-platform"
      },
      css: subLinkStyle
    }, jsx(ListItemText, {
      primary: "Civic Platform"
    }))), jsx(ListItem, null, jsx(Link, {
      to: {
        pathname: "/",
        hash: "#civic-software-foundation"
      },
      css: subLinkStyle
    }, jsx(ListItemText, {
      primary: "Civic Software Foundation"
    }))), jsx(Divider, null), jsx(ListItem, null, jsx(Link, {
      to: {
        pathname: "/",
        hash: "#contact-us"
      },
      css: subLinkStyle
    }, jsx(ListItemText, {
      primary: "CONTACT"
    })))));
  };

  return jsx("nav", {
    css: contentWrapper
  }, jsx("div", null, jsx("button", {
    type: "button",
    onClick: toggleDrawer(true),
    css: hamburgerStyle
  }, jsx("img", {
    src: hamburgerMenu,
    alt: "Open menu"
  })), jsx(Drawer, {
    anchor: "top",
    open: open,
    onClose: toggleDrawer(false)
  }, fullList())), jsx(Link, {
    to: "/",
    css: logoWrapper
  }, jsx(Logo, {
    type: "squareLogo",
    css: logoStyle
  })), jsx("div", null));
};

export default SmallNav;