(function() {
  var GlassSurface = window.GlassSurface;
  var useScrollMorph = window.useScrollMorph;

  function GlassNavBar(props) {
    var scrolled = props.scrolled;
    var className = props.className || '';
    var children = props.children;
    var id = props.id || 'nav';

    var isMobile = typeof window !== 'undefined' && window.matchMedia
      ? window.matchMedia('(max-width: 768px)').matches
      : false;
    var morph = (!isMobile && useScrollMorph) ? useScrollMorph(24) : { scrolled: false };
    var isScrolled = isMobile ? false : (scrolled != null ? scrolled : morph.scrolled);

    return React.createElement(GlassSurface, {
      id: id,
      elevation: 0,
      radius: 'md',
      chrome: true,
      className: 'glass-navbar' + (isScrolled ? ' glass-navbar-scrolled' : '') + (className ? ' ' + className : '')
    }, children);
  }

  window.GlassNavBar = GlassNavBar;
})();