Function NavBar

data-browser/src/components/Navigation.tsx:73–226

Persistently shown navigation bar

()

/** Persistently shown navigation bar */
function NavBar() {
  const [subject] = useCurrentSubject();
  const [input, setInput] = useState<string>('');
  const [query] = useSearchQuery();
  const history = useHistory();
  const [inputRef, setInputFocus] = useFocus();
  const { navbarTop, navbarFloating, sideBarLocked, setSideBarLocked, agent } =
    useSettings();
  const [showButtons, setShowButtons] = React.useState<boolean>(true);

  useEffect(() => {
    setInput(query);
  }, [query]);

  useEffect(() => {
    // Prevents setting an empty input if the first letter of a query has just been typed
    !query && setInput(subject);
  }, [subject, query]);

  useHotkeys('/', e => {
    e.preventDefault();
    //@ts-ignore this does seem callable
    inputRef.current.select();
  });

  useHotkeys(
    'esc',
    e => {
      e.preventDefault();
      //@ts-ignore this does seem callable
      inputRef.current.blur();
    },
    { enableOnTags: ['INPUT'] },
  );

  useHotkeys('/', e => {
    e.preventDefault();
    setInputFocus();
  });

  function handleChange(e) {
    setInput(e.target.value);
    try {
      tryValidURL(e.target.value);
      // Replace instead of push to make the back-button behavior better.
      history.replace(openURL(e.target.value));
    } catch (_err) {
      history.replace(searchURL(e.target.value));
    }
  }

  function handleSelect(e) {
    e.target.select();
  }

  /** Checks if the app is running in PWA / stand alone mode or in a browser */
  const isInStandaloneMode = () =>
    window.matchMedia('(display-mode: standalone)').matches ||