Replace reactstrap nav bar with tailwind-based one

src/common/MainHeader.tsx

@@ -1,11 +1,8 @@
-import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
+import { faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import { clsx } from 'clsx';
+import { NavBar } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC } from 'react';
-import { useEffect } from 'react';
 import { Link, useLocation } from 'react-router';
-import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import { ShlinkLogo } from './img/ShlinkLogo';
@@ -16,39 +13,28 @@ type MainHeaderDeps = {
 
 const MainHeader: FCWithDeps<unknown, MainHeaderDeps> = () => {
   const { ServersDropdown } = useDependencies(MainHeader);
-  const { flag: isNotCollapsed, toggle: toggleCollapse, setToFalse: collapse } = useToggle(false, true);
-  const location = useLocation();
-  const { pathname } = location;
-
-  // In mobile devices, collapse the navbar when location changes
-  useEffect(collapse, [location, collapse]);
+  const { pathname } = useLocation();
 
   const settingsPath = '/settings';
 
   return (
-    <Navbar color="primary" dark fixed="top" expand="md" className="tw:text-white tw:bg-lm-main tw:dark:bg-dm-main">
-      <NavbarBrand tag={Link} to="/">
-        <ShlinkLogo className="tw:inline tw:w-7 tw:mr-1" color="white" /> Shlink
-      </NavbarBrand>
-
-      <NavbarToggler onClick={toggleCollapse}>
-        <FontAwesomeIcon
-          icon={arrowIcon}
-          className={clsx('tw:transition-transform tw:duration-300', { 'tw:rotate-180': isNotCollapsed })}
-        />
-      </NavbarToggler>
-
-      <Collapse navbar isOpen={isNotCollapsed}>
-        <Nav navbar className="tw:ml-auto">
-          <NavItem>
-            <NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
-              <FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings
-            </NavLink>
-          </NavItem>
-          <ServersDropdown />
-        </Nav>
-      </Collapse>
-    </Navbar>
+    <NavBar
+      className="tw:[&]:fixed tw:top-0 tw:z-900"
+      brand={(
+        <Link to="/" className="tw:[&]:text-white tw:no-underline tw:flex tw:items-center tw:gap-2">
+          <ShlinkLogo className="tw:w-7" color="white" /> <small className="tw:font-normal">Shlink</small>
+        </Link>
+      )}
+    >
+      <NavBar.MenuItem
+        to={settingsPath}
+        active={pathname.startsWith(settingsPath)}
+        className="tw:flex tw:items-center tw:gap-1.5"
+      >
+        <FontAwesomeIcon icon={cogsIcon} /> Settings
+      </NavBar.MenuItem>
+      <ServersDropdown />
+    </NavBar>
   );
 };