Fixed mobile login (#165)

* Fixed mobile login * Fixed extra space
rit-sse · Oct 20, 2024 · ed1f3f0 · ed1f3f0
1 parent 6616f51
commit ed1f3f0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/next/components/nav/AuthButton.tsx b/next/components/nav/AuthButton.tsx
@@ -6,14 +6,14 @@ export default function AuthButton() {
 
  if (session) {
  return (
- <HoverBoldButton text="Logout" dataLabel="Logout" onClick={() => signOut()} />
+ <HoverBoldButton className="text-left" text="Logout" dataLabel="Logout" onClick={() => signOut()} />
  );
  } else {
  return (
  // Setting the data-label to "Sign Out" is a hack to prevent
  // layout shift when the button changes from "Sign In" to "Sign Out"
  // data-label is used by the bold-pseudo CSS class to display a pseudo-element
- <HoverBoldButton text="Login" dataLabel="Logout" onClick={() => signIn('google')} />
+ <HoverBoldButton className="text-left" text="Login" dataLabel="Logout" onClick={() => signIn('google')} />
  );
  }
 }
diff --git a/next/components/nav/MobileNavDropdown.tsx b/next/components/nav/MobileNavDropdown.tsx
@@ -1,5 +1,6 @@
-import React, { MouseEvent } from "react";
 import Link from "next/link";
+import React, { MouseEvent } from "react";
+import AuthButton from "./AuthButton";
 import { NavItemProps, OnClickProps } from "./NavItem";
 
 const MobileNavDropdown: React.FC<{ navItems: NavItemProps[] } & OnClickProps> = ({ navItems, onClickFunc }) => {
@@ -11,8 +12,17 @@ const MobileNavDropdown: React.FC<{ navItems: NavItemProps[] } & OnClickProps> =
  return (
  <ul className="mt-4 menu dropdown-content text-xl rounded-md w-64 shadow-lg shadow-base-300 bg-base-100">
  {navItems.map((navItem, index) => (
+ navItem.title === "Login" ? (
+ <li className="" key={index}>
+ <div className="p-0">
+ <AuthButton /> 
+ </div>
+
+ </li>
+ ) : (
  <li className="list-none" key={index}>
  {navItem.route ? (
+
  <Link className="hover:bg-secondary focus:bg-secondary" href={navItem.route} onClick={(e) => handleNavigationClick(e)}>
  <summary>{navItem.title}</summary>
  </Link>
@@ -31,7 +41,7 @@ const MobileNavDropdown: React.FC<{ navItems: NavItemProps[] } & OnClickProps> =
  </details>
  )}
  </li>
- ))}
+ )))}
  </ul>
  );
 };

diff --git a/next/components/nav/Navbar.tsx b/next/components/nav/Navbar.tsx
@@ -1,12 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import NavItem, { NavItemProps } from "./NavItem";
-import MobileNavDropdown from "./MobileNavDropdown";
 import SSELogoFull from "../common/SSELogoFull";
 import SSELogoSmall from "../common/SSELogoSmall";
 import AuthButton from "./AuthButton";
-import DarkModeToggle from "../common/DarkModeToggle";
+import MobileNavDropdown from "./MobileNavDropdown";
+import NavItem, { NavItemProps } from "./NavItem";
 
 const navItems: NavItemProps[] = [
  {
@@ -39,7 +38,8 @@ const navItems: NavItemProps[] = [
  {
  title: "Primary Officer's Policy",
  route: "/about/primary-officers-policy",
- }
+ },
+
  ],
  },
  {
@@ -70,6 +70,9 @@ const navItems: NavItemProps[] = [
  { // Go links dropdown removed. Check commit d2f1d82 in feature branch if we need to restore the dropdowns.
  title: "Go Links",
  route: "/go"
+ },
+ {
+ title: "Login",
  }
 ];
 
@@ -104,11 +107,15 @@ const Navbar: React.FC = () => {
  <div className="hidden md:visible md:inline-flex">
  <ul className="inline-flex flex-row flex-nowrap justify-between text-center text-lg">
  {navItems.map((navItem, index) => (
- <NavItem key={index} {...navItem} onClickFunc={blurOnClick} />
+ navItem.title === "Login" ? (
+ <li className="flex flex-row justify-center items-center" key={index}>
+ <AuthButton />
+ </li>
+ ) : (
+ <NavItem key={index} {...navItem} onClickFunc={blurOnClick} />
+ )
  ))}
- <li className="flex flex-row justify-center items-center">
- <AuthButton />
- </li>
+
  </ul>
  </div>
  <div className="dropdown dropdown-end md:hidden justify-end ">