Brijesh's Git Server — watchman-frontend @ main

admin site for watchman

src/components/MainLayout.tsx (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 
import { Kode_Mono } from "next/font/google";
import Link from "next/link";
import { useRouter } from "next/router";
import Breadcrumb from "./Breadcrumb";

const LogoFont = Kode_Mono({ subsets: ["latin"] });

type SidebarOptionType = {
  name: string;
  link: string;
};

const SidebarOptions: SidebarOptionType[] = [
  { name: "Home", link: "/" },
  { name: "Projects", link: "/projects" },
  { name: "Logs", link: "/logs" },
  { name: "Metrics", link: "/metrics" },
  { name: "Analytics", link: "/analytics" },
];

const BookmarkOptions: SidebarOptionType[] = [
  { name: "Example Project", link: "/projects/1" },
];

const MainLayout = ({ children }: { children: React.ReactNode }) => {
  const router = useRouter();
  return (
    <main className="text-slate-600 text-sm">
      <div className="flex">
        <div className="w-72 h-[calc(100vh-0px)] bg-white border-r border-slate-200 flex flex-col justify-between">
          <div>
            <div className="h-14 w-full px-4 border-b border-slate-200 flex items-center justify-between">
              <div>
                <p
                  className={`text-xl text-black font-semibold ${LogoFont.className}`}
                >
                  WATCHMAN
                </p>
              </div>
            </div>
            <div className="flex flex-col">
              <div className="bg-slate-400 text-white text-xs font-bold py-0.5 px-3">
                MENU
              </div>
              {SidebarOptions.map((option) => (
                <Link
                  key={option.name}
                  href={`${option.link}`}
                  className={`border-b border-slate-200 py-2 px-3 hover:bg-slate-100 ${
                    router.pathname.startsWith(option.link) &&
                    option.link !== "/"
                      ? "bg-slate-200"
                      : ""
                  } ${
                    router.pathname === option.link && option.link == "/"
                      ? "bg-slate-200"
                      : ""
                  }`}
                >
                  {option.name}
                </Link>
              ))}
              <div className="bg-slate-400 text-white text-xs font-bold py-0.5 px-3">
                BOOKMARKS
              </div>
              {BookmarkOptions.map((option) => (
                <Link
                  key={option.name}
                  href={option.link}
                  className={`border-b border-slate-200 py-2 px-3 hover:bg-slate-100 ${
                    router.pathname == option.link ? "bg-slate-200" : ""
                  }`}
                >
                  {option.name}
                </Link>
              ))}
            </div>
          </div>

          <div className="border-b border-slate-200 py-2 px-3">
            <p>Settings</p>
          </div>
        </div>
        <div className="w-[calc(100vw-286px)]">
          <Breadcrumb />

          <div className="p-4">{children}</div>
        </div>
      </div>
    </main>
  );
};

export default MainLayout;