fix(app): fix mobile navigation, fix styles (#442)

* fix(app): add function which close menu on click link in menu * fix(app): fix typo * fix(app): fix function call * Remove console.log * refactor(app): change functionality which close menu on click link in menu * fix(app): remove padding from Authors list item * Rebuild HeaderNavigation * Center vertically HeaderNavigation content on mobile * Add some effect on hover Author item link
typeofweb-org · Dec 20, 2022 · 6e3ab6f · 6e3ab6f
1 parent 9f64f5d
commit 6e3ab6f
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 25 deletions.
diff --git a/apps/app/src/app/(main-layout)/authors/page.tsx b/apps/app/src/app/(main-layout)/authors/page.tsx
@@ -8,7 +8,7 @@ export default function AuthorsPage() {
 			<h1 className="mb-8 text-4xl font-bold">Autorzy</h1>
 			<ul className="m-0 grid list-none grid-cols-1 gap-4 p-0 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
 				{getAllContributors().map((contributor) => (
-					<li key={contributor.login}>
+					<li key={contributor.login} className="p-0">
 						<Author contributor={contributor} />
 					</li>
 				))}

diff --git a/apps/app/src/components/Author/Author.tsx b/apps/app/src/components/Author/Author.tsx
@@ -25,8 +25,8 @@ export const Author = ({
 	);
 
 	return (
-		<a href={profile} target="_blank" rel="noreferrer">
-			<article className="flex h-full flex-col items-center rounded-lg bg-neutral-100 px-3.5 py-6 text-center shadow-[0px_1px_4px] shadow-neutral-400 active:translate-y-px dark:bg-neutral-700 dark:shadow-neutral-900">
+		<a href={profile} target="_blank" rel="noreferrer" className="no-underline">
+			<article className="flex h-full flex-col items-center rounded-lg border-2 border-transparent bg-neutral-100 px-3.5 py-6 text-center shadow-[0px_1px_4px] shadow-neutral-400 transition hover:border-violet-400 active:translate-y-px dark:bg-neutral-700 dark:shadow-neutral-900">
 				<Image
 					src={avatar_url}
 					alt={`Avatar użytkownika o loginie ${login}`}

diff --git a/apps/app/src/components/Header/ActiveNagivationLink.tsx b/apps/app/src/components/Header/ActiveNagivationLink.tsx
@@ -1,9 +1,10 @@
-import type { ReactNode } from "react";
+import type { MouseEventHandler, ReactNode } from "react";
 import { ActiveLink } from "../ActiveLink";
 
 type ActiveNavigationLinkProps = Readonly<{
 	href: string;
 	children: ReactNode;
+	onClick?: MouseEventHandler<HTMLAnchorElement>;
 }>;
 
 export const ActiveNavigationLink = (props: ActiveNavigationLinkProps) => (

diff --git a/apps/app/src/components/Header/DarkModeSwitch.tsx b/apps/app/src/components/Header/DarkModeSwitch.tsx
@@ -6,13 +6,15 @@ export const DarkModeSwitch = () => {
 	const { theme, changeTheme } = useThemeContext();
 
 	return (
-		<input
-			type="checkbox"
-			role="switch"
-			aria-label="Przełącz pomiędzy ciemnym i jasnym motywem"
-			className="relative h-6 w-10 cursor-pointer appearance-none rounded-full bg-violet-800 before:absolute before:top-1 before:left-1 before:h-[16px] before:w-[16px] before:rounded-full before:bg-white before:transition-all before:duration-200 dark:bg-violet-700 [&:checked]:before:left-[calc(100%-0.25rem)] [&:checked]:before:-translate-x-full"
-			checked={theme === "dark"}
-			onChange={() => changeTheme(theme === "dark" ? "light" : "dark")}
-		/>
+		<div className="flex">
+			<input
+				type="checkbox"
+				role="switch"
+				aria-label="Przełącz pomiędzy ciemnym i jasnym motywem"
+				className="relative h-6 w-10 cursor-pointer appearance-none rounded-full bg-violet-800 before:absolute before:top-1 before:left-1 before:h-[16px] before:w-[16px] before:rounded-full before:bg-white before:transition-all before:duration-200 dark:bg-violet-700 [&:checked]:before:left-[calc(100%-0.25rem)] [&:checked]:before:-translate-x-full"
+				checked={theme === "dark"}
+				onChange={() => changeTheme(theme === "dark" ? "light" : "dark")}
+			/>
+		</div>
 	);
 };
diff --git a/apps/app/src/components/Header/Header.tsx b/apps/app/src/components/Header/Header.tsx
@@ -1,9 +1,7 @@
 import { Container } from "../Container";
 import { AppTitle } from "../AppTitle";
 import { HeaderNavigation } from "./HeaderNavigation";
-import { ActiveNavigationLink } from "./ActiveNagivationLink";
 import { DarkModeSwitch } from "./DarkModeSwitch";
-import { LoginNavigationLink } from "./LoginNavigationLink";
 
 export const Header = () => (
 	<div className="bg-primary">
@@ -13,14 +11,6 @@ export const Header = () => (
 		>
 			<AppTitle />
 			<HeaderNavigation>
-				<ActiveNavigationLink href="/about">Jak korzystać?</ActiveNavigationLink>
-				<ActiveNavigationLink href="/authors">Autorzy</ActiveNavigationLink>
-				<a href="https://www.facebook.com/DevFAQ" target="_blank" rel="noreferrer">
-					FaceBook
-				</a>
-				<div className="sm:w-14">
-					<LoginNavigationLink />
-				</div>
 				<DarkModeSwitch />
 			</HeaderNavigation>
 		</Container>

diff --git a/apps/app/src/components/Header/HeaderNavigation.tsx b/apps/app/src/components/Header/HeaderNavigation.tsx
@@ -4,6 +4,8 @@ import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 import type { ReactNode, MouseEvent } from "react";
 import { lockScroll, unlockScroll } from "../../utils/pageScroll";
+import { ActiveNavigationLink } from "./ActiveNagivationLink";
+import { LoginNavigationLink } from "./LoginNavigationLink";
 
 const itemStyles = "ease h-0.5 w-6 bg-white transition duration-300";
 
@@ -16,17 +18,50 @@ export const HeaderNavigation = ({ children }: { children: ReactNode }) => {
 		setIsOpen((prev) => !prev);
 	};
 
+	const handleClickLink = () => {
+		setIsOpen(false);
+		unlockScroll();
+	};
+
 	return (
 		<>
 			<nav
 				id="header-navigation"
 				className={twMerge(
-					"fixed top-0 left-0 z-30 h-full w-full flex-col items-center justify-center gap-10 bg-primary text-xl uppercase sm:gap-5 sm:text-sm",
-					"sm:relative sm:flex sm:h-fit sm:w-fit sm:flex-row",
+					"fixed inset-0 z-30 flex flex-col items-center overflow-y-auto bg-primary py-20 text-xl uppercase sm:relative sm:flex sm:flex-row sm:items-center sm:gap-5 sm:py-0 sm:text-sm",
 					isOpen ? "flex" : "hidden",
 				)}
 			>
-				{children}
+				<div className="mt-auto mb-auto flex flex-col items-center gap-10 sm:flex-row sm:gap-5">
+					<ul className="flex list-none flex-col items-center gap-10 text-center sm:flex-row sm:gap-5">
+						<li>
+							<ActiveNavigationLink href="/about" onClick={handleClickLink}>
+								Jak korzystać?
+							</ActiveNavigationLink>
+						</li>
+						<li>
+							<ActiveNavigationLink href="/authors" onClick={handleClickLink}>
+								Autorzy
+							</ActiveNavigationLink>
+						</li>
+						<li>
+							<a
+								href="https://www.facebook.com/DevFAQ"
+								target="_blank"
+								rel="noreferrer"
+								onClick={handleClickLink}
+							>
+								Facebook
+							</a>
+						</li>
+						<li>
+							<div className="sm:w-14">
+								<LoginNavigationLink />
+							</div>
+						</li>
+					</ul>
+					{children}
+				</div>
 			</nav>
 			<button
 				className={twMerge(