From 095dc4db19d57fbb5103a22c04e739c5a7df77f7 Mon Sep 17 00:00:00 2001 From: Sigrid Elnan Date: Mon, 16 Oct 2023 14:57:18 +0200 Subject: [PATCH] Clean up navbar code, add logout button --- frontend/src/app/layout.tsx | 5 +- frontend/src/components/AppProviders.tsx | 17 ----- frontend/src/components/NavBar.tsx | 23 +++++++ frontend/src/components/NavBarDropdown.tsx | 36 +++++++++++ frontend/src/components/NavBarLink.tsx | 26 ++++++++ frontend/src/components/NavBarUserIcon.tsx | 18 ++++++ frontend/src/components/PageLayout.tsx | 15 ----- .../ThemeRegistry/ThemeRegistry.tsx | 18 ------ .../src/components/ThemeRegistry/theme.ts | 22 ------- frontend/src/components/VibesNavBar.tsx | 44 ------------- frontend/src/components/VibesNavBarTabs.tsx | 25 -------- .../components/vibes-buttons/SignInButton.tsx | 22 ------- .../vibes-buttons/SignInSignOutButton.tsx | 19 ------ .../vibes-buttons/SignOutButton.tsx | 64 ------------------- 14 files changed, 106 insertions(+), 248 deletions(-) delete mode 100644 frontend/src/components/AppProviders.tsx create mode 100644 frontend/src/components/NavBar.tsx create mode 100644 frontend/src/components/NavBarDropdown.tsx create mode 100644 frontend/src/components/NavBarLink.tsx create mode 100644 frontend/src/components/NavBarUserIcon.tsx delete mode 100644 frontend/src/components/PageLayout.tsx delete mode 100644 frontend/src/components/ThemeRegistry/ThemeRegistry.tsx delete mode 100644 frontend/src/components/ThemeRegistry/theme.ts delete mode 100644 frontend/src/components/VibesNavBar.tsx delete mode 100644 frontend/src/components/VibesNavBarTabs.tsx delete mode 100644 frontend/src/components/vibes-buttons/SignInButton.tsx delete mode 100644 frontend/src/components/vibes-buttons/SignInSignOutButton.tsx delete mode 100644 frontend/src/components/vibes-buttons/SignOutButton.tsx diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 551f0a96..e6444b34 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -1,6 +1,6 @@ import "./globals.css"; import Head from "next/head"; -import AppProviders from "../components/AppProviders"; +import NavBar from "@/components/NavBar"; export default function RootLayout({ children, @@ -17,7 +17,8 @@ export default function RootLayout({ /> - {children} + + {children} ); diff --git a/frontend/src/components/AppProviders.tsx b/frontend/src/components/AppProviders.tsx deleted file mode 100644 index 058e887d..00000000 --- a/frontend/src/components/AppProviders.tsx +++ /dev/null @@ -1,17 +0,0 @@ -"use client"; -import { CssBaseline } from "@mui/material"; -import PageLayout from "./PageLayout"; -import ThemeRegistry from "./ThemeRegistry/ThemeRegistry"; - -export default function AppProviders({ - children, -}: { - children: React.ReactNode; -}) { - return ( - - - {children} - - ); -} diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx new file mode 100644 index 00000000..4eaaa234 --- /dev/null +++ b/frontend/src/components/NavBar.tsx @@ -0,0 +1,23 @@ +import Image from "next/image"; +import NavBarLink from "./NavBarLink"; +import NavBarUserIcon from "./NavBarUserIcon"; + +export default async function NavBar() { + return ( +
+
+ +
+
+ Variant logo + +
+
+ ); +} diff --git a/frontend/src/components/NavBarDropdown.tsx b/frontend/src/components/NavBarDropdown.tsx new file mode 100644 index 00000000..ffc2b6e5 --- /dev/null +++ b/frontend/src/components/NavBarDropdown.tsx @@ -0,0 +1,36 @@ +"use client"; +import React, { useState } from "react"; +import { signOut } from "next-auth/react"; + +export default function Dropdown(props: { initials: string }) { + const [isOpen, setIsOpen] = useState(false); + + function toggle() { + setIsOpen((old) => !old); + } + + const transClass = isOpen ? "flex" : "hidden"; + + return ( + <> +
+ +
+ +
+
+ + ); +} diff --git a/frontend/src/components/NavBarLink.tsx b/frontend/src/components/NavBarLink.tsx new file mode 100644 index 00000000..1f493229 --- /dev/null +++ b/frontend/src/components/NavBarLink.tsx @@ -0,0 +1,26 @@ +"use client"; +import { usePathname } from "next/navigation"; + +export default function NavBarLink(props: { text: string; path: string }) { + const pathname = usePathname(); + const isCurrentPath = props.path.includes(pathname); + + if (isCurrentPath) { + return ( + + {props.text} + + ); + } else + return ( + + {props.text} + + ); +} diff --git a/frontend/src/components/NavBarUserIcon.tsx b/frontend/src/components/NavBarUserIcon.tsx new file mode 100644 index 00000000..5867412b --- /dev/null +++ b/frontend/src/components/NavBarUserIcon.tsx @@ -0,0 +1,18 @@ +import { + authOptions, + getCustomServerSession, +} from "@/app/api/auth/[...nextauth]/route"; +import Dropdown from "./NavBarDropdown"; + +export default async function NavBarUserIcon() { + const session = await getCustomServerSession(authOptions); + const initials = + session.user?.name + ?.split(" ") + .map((n) => n.charAt(0).toUpperCase()) + .join("") || ""; + + if (session) { + return ; + } +} diff --git a/frontend/src/components/PageLayout.tsx b/frontend/src/components/PageLayout.tsx deleted file mode 100644 index 452c0b58..00000000 --- a/frontend/src/components/PageLayout.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import VibesAppBar from "./VibesNavBar"; -import React from "react"; - -export default function PageLayout({ - children, -}: { - children: React.ReactNode; -}) { - return ( -
- - {children} -
- ); -} diff --git a/frontend/src/components/ThemeRegistry/ThemeRegistry.tsx b/frontend/src/components/ThemeRegistry/ThemeRegistry.tsx deleted file mode 100644 index 8a1b9fe9..00000000 --- a/frontend/src/components/ThemeRegistry/ThemeRegistry.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import CssBaseline from "@mui/material/CssBaseline"; -import { ThemeProvider } from "@mui/material/styles"; -import * as React from "react"; -import theme from "./theme"; - -export default function ThemeRegistry({ - children, -}: { - children: React.ReactNode; -}) { - return ( - - {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - - {children} - - ); -} diff --git a/frontend/src/components/ThemeRegistry/theme.ts b/frontend/src/components/ThemeRegistry/theme.ts deleted file mode 100644 index 58ec6b97..00000000 --- a/frontend/src/components/ThemeRegistry/theme.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { createTheme } from "@mui/material/styles"; - -const theme = createTheme({ - typography: { - fontFamily: ["Graphik-Regular", "Helvetica", "Arial"].join(","), - button: { - textTransform: "none", - }, - }, - palette: { - mode: "light", - primary: { - main: "rgba(66, 61, 137, 1)", - contrastText: "#fff", - }, - secondary: { - main: "rgba(66, 61, 137, 1)", - }, - }, -}); - -export default theme; diff --git a/frontend/src/components/VibesNavBar.tsx b/frontend/src/components/VibesNavBar.tsx deleted file mode 100644 index 5dd6bf60..00000000 --- a/frontend/src/components/VibesNavBar.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { AppBar, Box, Tab, Toolbar } from "@mui/material"; -import Image from "next/image"; -import VibesNavBarTabs from "./VibesNavBarTabs"; -import SignInSignOutButton from "./vibes-buttons/SignInSignOutButton"; - -export default function VibesAppBar() { - return ( - - - - - - - Variant logo - - - - ); -} diff --git a/frontend/src/components/VibesNavBarTabs.tsx b/frontend/src/components/VibesNavBarTabs.tsx deleted file mode 100644 index 8053446f..00000000 --- a/frontend/src/components/VibesNavBarTabs.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Tabs, TabsProps } from "@mui/material"; -import { styled } from "@mui/material/styles"; - -const VibesNavBarTabs = styled((props: VibesNavBarTabsProps) => ( - }} - /> -))({ - "& .MuiTabs-indicator": { - display: "flex", - justifyContent: "center", - backgroundColor: "transparent", - }, - "& .MuiTabs-indicatorSpan": { - width: "100%", - backgroundColor: "rgba(104, 233, 221, 1)", - }, -}); - -interface VibesNavBarTabsProps extends TabsProps { - children?: React.ReactNode; -} - -export default VibesNavBarTabs; diff --git a/frontend/src/components/vibes-buttons/SignInButton.tsx b/frontend/src/components/vibes-buttons/SignInButton.tsx deleted file mode 100644 index fff1b607..00000000 --- a/frontend/src/components/vibes-buttons/SignInButton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -"use client"; - -import LoginIcon from "@mui/icons-material/Login"; -import { IconButton } from "@mui/material"; -import { signIn } from "next-auth/react"; - -function SignInButton() { - return ( -
- signIn("azure-ad")} - size="small" - color="inherit" - sx={{ ml: 2 }} - > - - -
- ); -} - -export default SignInButton; diff --git a/frontend/src/components/vibes-buttons/SignInSignOutButton.tsx b/frontend/src/components/vibes-buttons/SignInSignOutButton.tsx deleted file mode 100644 index 2c7ae883..00000000 --- a/frontend/src/components/vibes-buttons/SignInSignOutButton.tsx +++ /dev/null @@ -1,19 +0,0 @@ -"use client"; -import { CircularProgress } from "@mui/material"; -import SignInButton from "./SignInButton"; -import SignOutButton from "./SignOutButton"; -import { useSession } from "next-auth/react"; - -function SignInSignOutButton() { - const { status } = useSession(); - - if (status === "authenticated") { - return ; - } else if (status === "unauthenticated") { - return ; - } else { - return ; - } -} - -export default SignInSignOutButton; diff --git a/frontend/src/components/vibes-buttons/SignOutButton.tsx b/frontend/src/components/vibes-buttons/SignOutButton.tsx deleted file mode 100644 index f3953a2c..00000000 --- a/frontend/src/components/vibes-buttons/SignOutButton.tsx +++ /dev/null @@ -1,64 +0,0 @@ -"use client"; -import { AnchorProp } from "@/types"; -import { Logout } from "@mui/icons-material"; -import { Avatar, ListItemIcon } from "@mui/material"; -import IconButton from "@mui/material/IconButton"; -import Menu from "@mui/material/Menu"; -import MenuItem from "@mui/material/MenuItem"; -import { signOut } from "next-auth/react"; - -import { useState } from "react"; - -export default function SignOutButton() { - const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); - - return ( -
- setAnchorEl(event.currentTarget)} - size="small" - color="inherit" - sx={{ ml: 2 }} - aria-controls={open ? "account-menu" : undefined} - aria-haspopup="true" - aria-expanded={open ? "true" : undefined} - > - - ABC - - - setAnchorEl(null)} - > - signOut()}> - - - - Log out - - -
- ); -}