feat: improve main nav

Author: waltergalvao

apps/web/src/app/metrics-and-insights/page.tsx

@@ -81,7 +81,7 @@ export const MetricsAndInsightsPage = () => {
             ]}
           />
           <FilterMultiSelect
-            label="Owner"
+            label="Team"
             icon={IconTeam}
             asyncController={useTeamAsyncOptions}
             withSearch

apps/web/src/components/app-shell/app-shell.tsx

@@ -25,7 +25,7 @@ export const AppShell = ({ children }: Props) => {
       }}
       layout={isSmallScreen ? "default" : "alt"}
       navbar={{
-        width: hasSubnav ? 330 : 80,
+        width: hasSubnav ? 330 : 91,
         breakpoint: "sm",
         collapsed: { desktop: false, mobile: !isMobileNavOpen },
       }}

apps/web/src/components/navbar/navbar-item.module.css

@@ -3,7 +3,6 @@
 }
 
 .button {
-  padding: 13px !important;
   border-radius: var(--mantine-radius-md);
   display: flex;
   align-items: center;
@@ -15,27 +14,22 @@
 }
 
 .label {
-  color: var(--mantine-color-dark-1);
-  padding-left: 8px;
+  color: var(--mantine-color-dark-1) !important;
 }
 
-.button:hover {
-  background-color: var(--mantine-color-gray-light-hover) !important;
+.button:not(.active):hover .label {
+  color: var(--mantine-color-green-3) !important;
 }
 
-.active {
-  background-color: var(--mantine-color-green-light-hover) !important;
+.button:not(.active):hover .icon {
+  color: var(--mantine-color-green-3) !important;
 }
 
 .active .label {
-  color: var(--mantine-color-green-2);
+  color: var(--mantine-color-green-3) !important;
 }
 
 .active svg,
 .active:hover {
-  color: var(--mantine-color-green-2);
-}
-
-.active:hover {
-  background-color: var(--mantine-color-green-light-hover) !important;
+  color: var(--mantine-color-green-3);
 }

apps/web/src/components/navbar/navbar-item.tsx

@@ -1,4 +1,4 @@
-import { Tooltip, UnstyledButton } from "@mantine/core";
+import { UnstyledButton, Text, Stack } from "@mantine/core";
 import type { Icon } from "@tabler/icons-react";
 import { Link } from "react-router-dom";
 import classes from "./navbar-item.module.css";
@@ -19,18 +19,19 @@ export const NavbarItem = ({
   onClick,
 }: NavbarItemProps) => {
   const button = (
-    <Tooltip
-      label={label}
-      position="right"
-      transitionProps={{ duration: 0 }}
+    <UnstyledButton
+      py="xs"
+      className={`${classes.button} ${active ? classes.active : ""}`}
+      w="80px"
       onClick={onClick}
     >
-      <UnstyledButton
-        className={`${classes.button} ${active ? classes.active : ""}`}
-      >
-        <Icon stroke={1.5} />
-      </UnstyledButton>
-    </Tooltip>
+      <Stack gap={5} align="center">
+        <Icon stroke={1.5} className={classes.icon} />
+        <Text fz="sm" className={classes.label}>
+          {label}
+        </Text>
+      </Stack>
+    </UnstyledButton>
   );
 
   if (href) {

apps/web/src/components/navbar/navbar.tsx

@@ -29,8 +29,9 @@ export const Navbar = ({ closeMobileNav }: NavbarProps) => {
           >
             <Stack
               gap={5}
-              p="md"
-              maw={80}
+              py="md"
+              px={5}
+              w={90}
               style={{ flexGrow: 1 }}
               align="center"
             >
@@ -42,18 +43,21 @@ export const Navbar = ({ closeMobileNav }: NavbarProps) => {
                 style={{ marginBottom: 24 }}
               />
               {navItems.map((link) => (
-                <NavbarItem
-                  {...link}
-                  active={
-                    pathname === link.href ||
-                    (link.href != "/" && pathname.startsWith(link.href || ""))
-                  }
-                  key={link.label}
-                  onClick={() => closeMobileNav()}
-                />
+                <div key={link.label}>
+                  <NavbarItem
+                    {...link}
+                    active={
+                      pathname === link.href ||
+                      (link.href != "/" && pathname.startsWith(link.href || ""))
+                    }
+                    key={link.label}
+                    label={link.label}
+                    onClick={() => closeMobileNav()}
+                  />
+                </div>
               ))}
             </Stack>
-            <Stack justify="center" align="center" p="md" maw={80}>
+            <Stack justify="center" align="center" p="md" maw={90}>
               <NavbarItem
                 label="Settings"
                 icon={IconSettings}

apps/web/src/providers/nav.provider.ts

@@ -14,24 +14,24 @@ export const navItems: (Omit<NavbarItemProps, "href"> & {
   href: string;
 })[] = [
   { icon: IconHome2, label: "Home", href: "/" },
-  {
-    icon: IconChartPie,
-    label: "Metrics & Insights",
-    href: "/metrics-and-insights",
-  },
   {
     icon: IconUser,
     label: "Humans",
     href: "/humans",
   },
+  {
+    icon: IconChartPie,
+    label: "Metrics",
+    href: "/metrics-and-insights",
+  },
   {
     icon: IconStack3,
     label: "Systems",
     href: "/systems",
   },
   {
     icon: IconBolt,
-    label: "Automations",
+    label: "Automate",
     href: "/automations",
   },
 ];