index.tsx

import type { NextPage } from "next";

import {
  HeadMeta,
  LeftSidebar,
  RightSidebar,
  PortfolioSummary,
  MainContentSection,
} from "../components";

const Home: NextPage = () => {
  return (
    <>
      <HeadMeta />
      <div className="py-10 flex flex-col">
        <div className="w-screen flex flex-col justify-start items-stretch px-4 md:mx-auto md:px-6 lg:max-w-7xl lg:grid lg:grid-cols-12 lg:gap-8">
          <LeftSidebar />
          <section className="flex flex-col lg:col-span-9 xl:col-span-10">
            <PortfolioSummary />
            <main className="mt-4 lg:grid lg:grid-cols-12 lg:gap-4">
              <div className="col-span-12 lg:col-span-8">
                <MainContentSection />
              </div>
              <RightSidebar />
            </main>
          </section>
        </div>
      </div>
    </>
  );
};

export default Home;

LeftSidebar.tsx

import {
  HomeIcon,
  FireIcon,
  UserGroupIcon,
  TrendingUpIcon,
} from "@heroicons/react/outline";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { NavLink } from "../lib";
import { classNames } from "../lib/helpers";

const navDefaultState: NavLink[] = [
  { name: "Profile", href: "/", Icon: HomeIcon, current: false },
  {
    name: "For Creators",
    href: "/creators",
    Icon: UserGroupIcon,
    current: false,
  },
  { name: "Bundles", href: "/bundles", Icon: FireIcon, current: false },
  {
    name: "Profit Loss",
    href: "/profit-loss",
    Icon: TrendingUpIcon,
    current: false,
  },
];

export interface LeftSidebarProps {
  mainNavigation?: NavLink[];
  bottomHalfLabel?: string;
  bottomHalfItems?: NavLink[];
}

// const bottomHalfLabelSample = "Bottom Items";

// const bottomLinksSample = [
//   { name: "item 1", href: "#" },
//   { name: "item 2", href: "#" },
//   { name: "item 3", href: "#" },
//   { name: "item 4", href: "#" },
//   { name: "item 5", href: "#" },
//   { name: "item 6", href: "#" },
//   { name: "item 7", href: "#" },
//   { name: "item 8", href: "#" },
// ];

export default function LeftSidebar({
  bottomHalfItems,
  bottomHalfLabel,
}: LeftSidebarProps) {
  const router = useRouter();
  const [navigation, setNavigation] = useState<NavLink[]>(navDefaultState);
  const [bottomLinks, setBottomLinks] = useState<NavLink[] | null>(
    bottomHalfItems || null
  );
  const [bottomLabel, setBottomLabel] = useState<string | null>(
    bottomHalfLabel || null
  );

  useEffect(() => {
    if (router.isReady) {
      setNavigation((prevState) => {
        return prevState.map((navLink) => {
          let link = navLink;
          const pathPartToMatch = router.pathname.split("/")[1];
          const linkPartToMatch = link.href?.split("/")[1];
          if (pathPartToMatch === linkPartToMatch) {
            link.current = true;
          }
          return link;
        });
      });
    }
  }, [router]);

  return (
    <div className="hidden sticky top-20 lg:block lg:col-span-3 xl:col-span-2">
      <nav aria-label="Sidebar" className="top-4 divide-y divide-gray-300">
        <div className="pb-8 space-y-1">
          {navigation.map(({ name, href, Icon, current }) => (
            <a
              key={name}
              href={href}
              className={classNames(
                current
                  ? "bg-gray-200 text-gray-900"
                  : "text-gray-600 hover:bg-gray-50",
                "group flex items-center px-3 py-2 text-sm font-medium rounded-md"
              )}
              aria-current={current ? "page" : undefined}
            >
              {Icon && (
                <Icon
                  className={classNames(
                    current
                      ? "text-gray-500"
                      : "text-gray-400 group-hover:text-gray-500",
                    "flex-shrink-0 -ml-1 mr-3 h-6 w-6"
                  )}
                  aria-hidden="true"
                />
              )}
              <span className="truncate">{name}</span>
            </a>
          ))}
        </div>
        {bottomLinks && (
          <div className="pt-10">
            {bottomLabel && (
              <p
                className="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"
                id="communities-headline"
              >
                {`${bottomLabel}`}
              </p>
            )}
            <div
              className="mt-3 space-y-2"
              aria-labelledby="communities-headline"
            >
              {bottomLinks.map((community) => (
                <a
                  key={community.name}
                  href={community.href}
                  className="group flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50"
                >
                  <span className="truncate">{community.name}</span>
                </a>
              ))}
            </div>
          </div>
        )}
      </nav>
    </div>
  );
}