Update unauthenticated navbar

apps/web/src/app/arrangementer/components/AttendanceCard/AttendanceCard.tsx

@@ -56,7 +56,7 @@ export const AttendanceCard = ({
   const { setTRPCSSERegisterChangeConnectionState } = useTRPCSSERegisterChangeConnectionState()
 
   const fullPathname = useFullPathname()
-  const authorizeUrl = createAuthorizeUrl({ connection: "FEIDE", redirectAfter: fullPathname })
+  const authorizeUrl = createAuthorizeUrl({ redirectAfter: fullPathname })
 
   const [closeToEvent, setCloseToEvent] = useState(false)
   const [attendanceStatus, setAttendanceStatus] = useState(getAttendanceStatus(initialAttendance))

apps/web/src/components/Navbar/MobileNavigation.tsx

@@ -1,9 +1,6 @@
 "use client"
 
-import { useFullPathname } from "@/utils/use-full-pathname"
-import { useSession } from "@dotkomonline/oauth2/react"
 import {
-  Button,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
@@ -15,22 +12,19 @@ import {
   cn,
 } from "@dotkomonline/ui"
 import * as ScrollArea from "@radix-ui/react-scroll-area"
-import { IconArrowUpRight, IconChevronDown, IconHome, IconLogin2 } from "@tabler/icons-react"
+import { IconArrowUpRight, IconChevronDown, IconHome } from "@tabler/icons-react"
 import Link from "next/link"
 import { type FC, useEffect, useRef, useState } from "react"
 
 import type { MenuItem, MenuLink } from "@/components/Navbar/Navbar"
 import { env } from "@/env"
-import { createAuthorizeUrl } from "@dotkomonline/utils"
 import { isExternal } from "../../utils/is-link-external"
 import { Hamburger } from "./Hamburger"
 import { MobileMenuCard } from "./MobileMenuCard"
 
 export const MobileNavigation: FC<{ links: MenuLink[] }> = ({ links }) => {
   const [open, setOpen] = useState(false)
   const navRef = useRef<HTMLElement>(null)
-  const session = useSession()
-  const fullPathname = useFullPathname()
 
   const homeLink: MenuLink = {
     title: "Hjem",
@@ -181,35 +175,6 @@ export const MobileNavigation: FC<{ links: MenuLink[] }> = ({ links }) => {
                       )
                     )}
                   </div>
-
-                  {session === null && (
-                    <div className="p-2 pt-8 flex justify-between gap-2">
-                      <Button
-                        element={Link}
-                        variant="solid"
-                        color="brand"
-                        className="text-sm font-semibold px-3 py-2"
-                        href={createAuthorizeUrl({ connection: "FEIDE", redirectAfter: fullPathname })}
-                        prefetch={false}
-                        icon={<IconLogin2 className="mr-1 text-xl" />}
-                      >
-                        Logg inn
-                      </Button>
-                      <DropdownMenuItem asChild>
-                        <Button
-                          // This might as well be a hard navigate as the server redirects them to the Auth0 flow anyways.
-                          element="a"
-                          variant="solid"
-                          size="md"
-                          className="font-semibold rounded-md justify-start px-3 h-10 bg-blue-100 hover:bg-blue-200/80 dark:bg-stone-700/80 dark:hover:bg-stone-600/50 w-fit"
-                          href={createAuthorizeUrl({ redirectAfter: fullPathname })}
-                          onClick={() => setOpen(false)}
-                        >
-                          Logg inn uten Feide
-                        </Button>
-                      </DropdownMenuItem>
-                    </div>
-                  )}
                 </div>
               </ScrollArea.Viewport>
 

apps/web/src/components/Navbar/Navbar.tsx

@@ -2,7 +2,7 @@
 
 import { OnlineIcon } from "@/components/atoms/OnlineIcon"
 import { env } from "@/env"
-import { type Icon, IconBuildingBank, IconCrown } from "@tabler/icons-react"
+import { type Icon, IconBuildingBank, IconCrown, IconLogin2 } from "@tabler/icons-react"
 import {
   IconArticle,
   IconBolt,
@@ -20,6 +20,10 @@ import type { FC } from "react"
 import { MainNavigation } from "./MainNavigation"
 import { MobileNavigation } from "./MobileNavigation"
 import { ProfileMenu } from "./ProfileMenu"
+import { useSession } from "@dotkomonline/oauth2/react"
+import { useFullPathname } from "@/utils/use-full-pathname"
+import { Button, cn } from "@dotkomonline/ui"
+import { createAuthorizeUrl } from "@dotkomonline/utils"
 
 export type MenuItem = {
   title: string
@@ -141,18 +145,48 @@ const links: MenuLink[] = [
 ]
 
 export const Navbar: FC = () => {
+  const fullPathname = useFullPathname()
+  const session = useSession()
+
+  const isLoggedIn = session !== null
+
   return (
-    <header className="sticky bg-blue-100/80 dark:bg-stone-800/90 backdrop-blur-xl border border-blue-100 dark:border-stone-700/30 shadow-sm top-4 z-50 flex flex-row justify-between items-center w-full max-w-screen-xl mt-4 p-3 rounded-full">
-      <Link href={env.NEXT_PUBLIC_HOME_URL}>
-        <OnlineIcon className="h-10 w-10" />
-      </Link>
+    <header className="sticky top-4 z-50 grid grid-cols-[1fr_auto] gap-1.5 items-center w-full max-w-7xl mt-4">
+      <div
+        className={cn(
+          // i have no idea why i need rounded-r-4xl and not rounded-r-full
+          "p-3 rounded-4xl bg-blue-100/80 dark:bg-stone-800/90 backdrop-blur-xl shadow-sm border border-blue-100 dark:border-stone-700/30",
+          "flex flex-row justify-between items-center w-full",
+          !isLoggedIn && "rounded-r-lg"
+        )}
+      >
+        <Link href={env.NEXT_PUBLIC_HOME_URL} className="shrink-0">
+          <OnlineIcon className="size-10 shrink-0" />
+        </Link>
 
-      <MainNavigation links={links} />
+        <MainNavigation links={links} />
 
-      <div className="ml-auto flex items-center">
-        <ProfileMenu />
-        <MobileNavigation links={links} />
+        <div className="ml-auto flex items-center">
+          <ProfileMenu />
+          <MobileNavigation links={links} />
+        </div>
       </div>
+
+      {!isLoggedIn && (
+        <div className="h-full rounded-l-lg rounded-r-4xl">
+          <Button
+            element={Link}
+            variant="solid"
+            color="brand"
+            className="font-medium min-w-19 pl-3 pr-4 xs:pl-6 xs:pr-8 py-4 rounded-l-lg rounded-r-4xl shrink-0 h-full"
+            href={createAuthorizeUrl({ redirectAfter: fullPathname })}
+            prefetch={false}
+            icon={<IconLogin2 className="mr-1.5 size-6" />}
+          >
+            <span className="hidden min-[380px]:inline">Logg inn</span>
+          </Button>
+        </div>
+      )}
     </header>
   )
 }

apps/web/src/components/Navbar/ProfileMenu.tsx

@@ -19,15 +19,13 @@ import {
   Text,
   Title,
 } from "@dotkomonline/ui"
-import { createAuthorizeUrl, createLogoutUrl } from "@dotkomonline/utils"
+import { createLogoutUrl } from "@dotkomonline/utils"
 import type { Icon } from "@tabler/icons-react"
 import {
   IconAdjustments,
   IconArrowUpRight,
   IconBug,
-  IconDotsVertical,
   IconLock,
-  IconLogin2,
   IconLogout2,
   IconMailForward,
   IconMessageReport,
@@ -131,51 +129,9 @@ const ContactDebugDropdown: FC = () => (
   </DropdownMenu>
 )
 
-const LoginAlternativesDropdown: FC = () => {
-  const fullPathname = useFullPathname()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger className="flex items-center justify-center w-6 h-10">
-        <IconDotsVertical className="" width={22} height={22} />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="end"
-        className="rounded-2xl p-2 bg-blue-50 dark:bg-stone-800 border border-blue-100 dark:border-stone-700 shadow-sm"
-        sideOffset={24}
-      >
-        <Link
-          className="flex items-center font-semibold text-sm px-3 py-2 rounded-lg hover:bg-blue-100 dark:hover:bg-stone-700 transition-colors"
-          href={createAuthorizeUrl({ redirectAfter: fullPathname })}
-          prefetch={false}
-        >
-          Logg inn uten Feide
-        </Link>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
 const UnauthenticatedActions: FC = () => {
-  const fullPathname = useFullPathname()
   return (
     <div className="flex items-center">
-      <div className="flex mr-2">
-        <Button
-          element={Link}
-          variant="solid"
-          color="brand"
-          className="text-sm font-semibold px-3 py-2"
-          href={createAuthorizeUrl({ connection: "FEIDE", redirectAfter: fullPathname })}
-          prefetch={false}
-          icon={<IconLogin2 className="mr-1 text-xl" />}
-        >
-          Logg inn
-        </Button>
-        <div className="hidden lg:block">
-          <LoginAlternativesDropdown />
-        </div>
-      </div>
       <ContactDebugDropdown />
       <ThemeDropdown />
     </div>