Replaced Layout

Trunk-Player · Apr 1, 2024 · e4c9276 · e4c9276
1 parent a9cf4a0
commit e4c9276
Show file tree

Hide file tree

Showing 27 changed files with 218 additions and 905 deletions.
diff --git a/app/[locale]/(loggedIn)/LoginButton.tsx b/app/[locale]/(loggedIn)/LoginButton.tsx
diff --git a/app/[locale]/(loggedIn)/LogoutButton.tsx b/app/[locale]/(loggedIn)/LogoutButton.tsx
diff --git a/app/[locale]/(loggedIn)/components/DashboardHeader.tsx b/app/[locale]/(loggedIn)/components/DashboardHeader.tsx
diff --git a/app/[locale]/(loggedIn)/components/layout/Footer.tsx b/app/[locale]/(loggedIn)/components/layout/Footer.tsx
@@ -0,0 +1,5 @@
+const Footer = () => {
+  return <footer>{/* TODO: Add Footer */}</footer>;
+};
+
+export default Footer;
diff --git a/app/[locale]/(loggedIn)/components/layout/Header.tsx b/app/[locale]/(loggedIn)/components/layout/Header.tsx
@@ -0,0 +1,66 @@
+import Link from "next/link";
+
+import TopNavigationMenu from "./TopNavigationMenu";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import { HomeIcon, HamburgerMenuIcon } from "@radix-ui/react-icons";
+
+const Header = () => {
+  return (
+    <header className="flex items-center justify-between h-16 px-6 bg-slate-800 text-white">
+      <div className="flex justify-start items-center gap-x-4">
+        <span className="hidden lg:inline">
+          <HomeIcon className="w-6 h-6" />
+        </span>
+        <span className="lg:hidden">
+          <Button
+            variant="none"
+            size="content"
+            className="pt-2"
+          >
+            <HamburgerMenuIcon className="w-6 h-6" />
+          </Button>
+        </span>
+        <h1 className="text-large font-semibold">Trunk Player</h1>
+      </div>
+      <TopNavigationMenu />
+      <div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="none"
+              size="content"
+            >
+              <Avatar>
+                <AvatarFallback className="text-slate-800">TU</AvatarFallback>
+              </Avatar>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel className="text-center">
+              Trunk Player User
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <Link
+              href="/logout"
+              className="block px-2 py-1.5 text-sm focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50"
+            >
+              Logout
+            </Link>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/app/[locale]/(loggedIn)/components/layout/TopNavigationMenu.tsx b/app/[locale]/(loggedIn)/components/layout/TopNavigationMenu.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import Link from "next/link";
+
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  navigationMenuTriggerStyle,
+  navigationSubMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+
+const TopNavigationMenu = () => {
+  return (
+    <NavigationMenu className="hidden lg:flex">
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <Link
+            href="/"
+            legacyBehavior
+            passHref
+          >
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              Dashboard
+            </NavigationMenuLink>
+          </Link>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <Link
+            href="/reports"
+            legacyBehavior
+            passHref
+          >
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              Reports
+            </NavigationMenuLink>
+          </Link>
+        </NavigationMenuItem>
+        <NavigationMenu>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Config</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="w-40 p-4">
+                <NavigationMenuItem>
+                  <Link
+                    href="/systems"
+                    legacyBehavior
+                    passHref
+                  >
+                    <NavigationMenuLink
+                      className={navigationSubMenuTriggerStyle()}
+                    >
+                      Systems
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <Link
+                    href="/systems"
+                    legacyBehavior
+                    passHref
+                  >
+                    <NavigationMenuLink
+                      className={navigationSubMenuTriggerStyle()}
+                    >
+                      Scanners
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <Link
+                    href="/systems"
+                    legacyBehavior
+                    passHref
+                  >
+                    <NavigationMenuLink
+                      className={navigationSubMenuTriggerStyle()}
+                    >
+                      Scan Lists
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <Link
+                    href="/systems"
+                    legacyBehavior
+                    passHref
+                  >
+                    <NavigationMenuLink
+                      className={navigationSubMenuTriggerStyle()}
+                    >
+                      Talk Groups
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenu>
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+};
+
+export default TopNavigationMenu;
diff --git a/app/[locale]/(loggedIn)/components/layout/__stories__/Header.stories.tsx b/app/[locale]/(loggedIn)/components/layout/__stories__/Header.stories.tsx
@@ -0,0 +1,23 @@
+/* eslint-disable react/jsx-no-literals */
+import Header from "../Header";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Layout/Header",
+  component: Header,
+  parameters: {
+    layout: "fullscreen",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const LoggedIn: Story = {
+  args: {},
+};