Skip to content

Commit 6e3ab6f

Browse files
grzegorzpokorskigrzegorzpokorski
authored
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
1 parent 9f64f5d commit 6e3ab6f

File tree

6 files changed

+53
-25
lines changed

6 files changed

+53
-25
lines changed

‎apps/app/src/app/(main-layout)/authors/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function AuthorsPage() {
88
<h1 className="mb-8 text-4xl font-bold">Autorzy</h1>
99
<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">
1010
{getAllContributors().map((contributor) => (
11-
<li key={contributor.login}>
11+
<li key={contributor.login} className="p-0">
1212
<Author contributor={contributor} />
1313
</li>
1414
))}

‎apps/app/src/components/Author/Author.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export const Author = ({
2525
);
2626

2727
return (
28-
<a href={profile} target="_blank" rel="noreferrer">
29-
<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">
28+
<a href={profile} target="_blank" rel="noreferrer" className="no-underline">
29+
<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">
3030
<Image
3131
src={avatar_url}
3232
alt={`Avatar użytkownika o loginie ${login}`}

‎apps/app/src/components/Header/ActiveNagivationLink.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import type { ReactNode } from "react";
1+
import type { MouseEventHandler, ReactNode } from "react";
22
import { ActiveLink } from "../ActiveLink";
33

44
type ActiveNavigationLinkProps = Readonly<{
55
href: string;
66
children: ReactNode;
7+
onClick?: MouseEventHandler<HTMLAnchorElement>;
78
}>;
89

910
export const ActiveNavigationLink = (props: ActiveNavigationLinkProps) => (

‎apps/app/src/components/Header/DarkModeSwitch.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ export const DarkModeSwitch = () => {
66
const { theme, changeTheme } = useThemeContext();
77

88
return (
9-
<input
10-
type="checkbox"
11-
role="switch"
12-
aria-label="Przełącz pomiędzy ciemnym i jasnym motywem"
13-
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"
14-
checked={theme === "dark"}
15-
onChange={() => changeTheme(theme === "dark" ? "light" : "dark")}
16-
/>
9+
<div className="flex">
10+
<input
11+
type="checkbox"
12+
role="switch"
13+
aria-label="Przełącz pomiędzy ciemnym i jasnym motywem"
14+
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"
15+
checked={theme === "dark"}
16+
onChange={() => changeTheme(theme === "dark" ? "light" : "dark")}
17+
/>
18+
</div>
1719
);
1820
};

‎apps/app/src/components/Header/Header.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { Container } from "../Container";
22
import { AppTitle } from "../AppTitle";
33
import { HeaderNavigation } from "./HeaderNavigation";
4-
import { ActiveNavigationLink } from "./ActiveNagivationLink";
54
import { DarkModeSwitch } from "./DarkModeSwitch";
6-
import { LoginNavigationLink } from "./LoginNavigationLink";
75

86
export const Header = () => (
97
<div className="bg-primary">
@@ -13,14 +11,6 @@ export const Header = () => (
1311
>
1412
<AppTitle />
1513
<HeaderNavigation>
16-
<ActiveNavigationLink href="/about">Jak korzystać?</ActiveNavigationLink>
17-
<ActiveNavigationLink href="/authors">Autorzy</ActiveNavigationLink>
18-
<a href="https://www.facebook.com/DevFAQ" target="_blank" rel="noreferrer">
19-
FaceBook
20-
</a>
21-
<div className="sm:w-14">
22-
<LoginNavigationLink />
23-
</div>
2414
<DarkModeSwitch />
2515
</HeaderNavigation>
2616
</Container>

‎apps/app/src/components/Header/HeaderNavigation.tsx‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { useState } from "react";
44
import { twMerge } from "tailwind-merge";
55
import type { ReactNode, MouseEvent } from "react";
66
import { lockScroll, unlockScroll } from "../../utils/pageScroll";
7+
import { ActiveNavigationLink } from "./ActiveNagivationLink";
8+
import { LoginNavigationLink } from "./LoginNavigationLink";
79

810
const itemStyles = "ease h-0.5 w-6 bg-white transition duration-300";
911

@@ -16,17 +18,50 @@ export const HeaderNavigation = ({ children }: { children: ReactNode }) => {
1618
setIsOpen((prev) => !prev);
1719
};
1820

21+
const handleClickLink = () => {
22+
setIsOpen(false);
23+
unlockScroll();
24+
};
25+
1926
return (
2027
<>
2128
<nav
2229
id="header-navigation"
2330
className={twMerge(
24-
"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",
25-
"sm:relative sm:flex sm:h-fit sm:w-fit sm:flex-row",
31+
"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",
2632
isOpen ? "flex" : "hidden",
2733
)}
2834
>
29-
{children}
35+
<div className="mt-auto mb-auto flex flex-col items-center gap-10 sm:flex-row sm:gap-5">
36+
<ul className="flex list-none flex-col items-center gap-10 text-center sm:flex-row sm:gap-5">
37+
<li>
38+
<ActiveNavigationLink href="/about" onClick={handleClickLink}>
39+
Jak korzystać?
40+
</ActiveNavigationLink>
41+
</li>
42+
<li>
43+
<ActiveNavigationLink href="/authors" onClick={handleClickLink}>
44+
Autorzy
45+
</ActiveNavigationLink>
46+
</li>
47+
<li>
48+
<a
49+
href="https://www.facebook.com/DevFAQ"
50+
target="_blank"
51+
rel="noreferrer"
52+
onClick={handleClickLink}
53+
>
54+
Facebook
55+
</a>
56+
</li>
57+
<li>
58+
<div className="sm:w-14">
59+
<LoginNavigationLink />
60+
</div>
61+
</li>
62+
</ul>
63+
{children}
64+
</div>
3065
</nav>
3166
<button
3267
className={twMerge(

0 commit comments

Comments
 (0)