Merged develop

src/utils/NavPills.scss

@@ -0,0 +1,30 @@
+@import './base';
+
+.nav-pills__nav {
+  position: sticky !important;
+  top: $headerHeight - 1px;
+  z-index: 2;
+}
+
+.nav-pills__nav-link {
+  border-radius: 0 !important;
+  padding-bottom: calc(.5rem - 3px) !important;
+  border-bottom: 3px solid transparent;
+  color: #5d6778;
+  font-weight: 700;
+  cursor: pointer;
+
+  @media (min-width: $smMin) and (max-width: $mdMax) {
+    font-size: 89%;
+  }
+}
+
+.nav-pills__nav-link:hover {
+  color: $mainColor !important;
+}
+
+.nav-pills__nav-link.active {
+  border-color: $mainColor;
+  background-color: var(--primary-color) !important;
+  color: $mainColor !important;
+}

src/utils/NavPills.tsx

@@ -0,0 +1,29 @@
+import { FC, Children, isValidElement } from 'react';
+import { Card, Nav, NavLink } from 'reactstrap';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+import './NavPills.scss';
+
+interface NavPillProps {
+  to: string;
+  replace?: boolean;
+}
+
+export const NavPillItem: FC<NavPillProps> = ({ children, ...rest }) => (
+  <NavLink className="nav-pills__nav-link" tag={RouterNavLink} {...rest}>
+    {children}
+  </NavLink>
+);
+
+export const NavPills: FC<{ fill?: boolean }> = ({ children, fill = false }) => (
+  <Card className="nav-pills__nav p-0 overflow-hidden mb-3" body>
+    <Nav pills fill={fill}>
+      {Children.map(children, (child) => {
+        if (!isValidElement(child) || child.type !== NavPillItem) {
+          throw new Error('Only NavPillItem children are allowed inside NavPills.');
+        }
+
+        return child;
+      })}
+    </Nav>
+  </Card>
+);