TabNavigation

[Fahimansari]

TabPanel

• Common style:
  • The tabs should have transparent backgroundColor with indicator placement at bottom
  • Overflow in x direction should be scrollable but the scrollbar shouldn't de displayed
  • Highlighting logic should be controllable
    • I should be able to mention what to look in the URL in order to show a Tab as selected. (Will explain it better in the loom video)
• Common properties
  • Nextjs cached Links
  • Should be able to mention the href and Tab Name (maybe by passing an array of objects)
  • Should have a Chip that shows stats if stats are defined

Below is a working TabPanel component code. Maybe it's a good starting point:

https://www.loom.com/share/c5ed09859c7c42aca43fd03b3a77be05

"use client";

import React from "react";
import { Tabs, TabList, Tab, Box } from "@mui/joy";
import Link from "@mui/joy/Link";
import { usePathname } from "next/navigation";

interface TabNavigationProps {
  o_id: string;
}

const tabs = [
  { label: "Overview", value: "overview" },
  { label: "PO Requests", value: "po_requests" },
  { label: "Budgets", value: "budgets" },
  { label: "Vendors", value: "vendors" },
  { label: "Approvals", value: "approvals" },
  { label: "Payment Schedules", value: "payment_schedules" },
  { label: "Admin", value: "admin" },
];

export default function TabNavigation({ o_id }: TabNavigationProps) {
  const pathname = usePathname();
  const pathSegments = pathname.split("/");

  const getCurrentTab = () => {
    if (pathSegments.includes("budget")) return "budgets";
    if (pathSegments.includes("po_request")) return "po_requests";
    if (pathSegments.includes("vendor")) return "vendors";
    if (pathSegments.includes("approvals")) return "approvals";
    if (pathSegments[pathSegments.length - 1] === "por") return "overview";
    return pathSegments[pathSegments.length - 1];
  };

  const currentTab = getCurrentTab();

  return (
    <Box sx={{ overflowX: "auto" }}>
      <Tabs
        value={currentTab}
        sx={{
          backgroundColor: "white",
          "& .MuiTab-root": {
            bgcolor: "transparent",
            "&.Mui-selected": {
              bgcolor: "transparent",
            },
          },
        }}
      >
        <TabList
          sx={{
            flexWrap: "nowrap",
            overflowX: "auto",
            scrollbarWidth: "none",
            msOverflowStyle: "none",
            "&::-webkit-scrollbar": {
              display: "none",
            },
            "&": {
              scrollbarWidth: "none",
              "-ms-overflow-style": "none",
            },
          }}
        >
          {tabs.map((tab) => (
            <Tab
              indicatorPlacement="bottom"
              key={tab.value}
              value={tab.value}
              component={Link}
              href={
                tab.value === "overview"
                  ? `/org/${o_id}/por`
                  : tab.value === "approvals"
                    ? `/org/${o_id}/por/approvals/pending`
                    : `/org/${o_id}/por/${tab.value}`
              }
              sx={{
                color: "black",
                "&:hover": {
                  textDecoration: "none",
                },
                flex: "none",
              }}
            >
              {tab.label}
            </Tab>
          ))}
        </TabList>
      </Tabs>
    </Box>
  );
}

[Pete-Sony]

Quick Question Is my assumption right? The Tab Component should not have a Tab Panel. The Tab Panel is the body that is renderd when you click on the Tab. This is not the requirement here. You want something similar to a Navbar in functionality but Looks Like a tab Also I will be attempting to combine Vertical TabPanel with this component

[Fahimansari]

@Pete-Sony Yeh you are right