Skip to content

Commit 5dc01ab

Browse files
andrew-s28andrew-s28
authored
Fix navbar rendering issues (#5)
* convert to useWidth and useHeight separately * add debounce to useWidth and useHeight * swap navbar to use media queries instead of state
1 parent b74c9c7 commit 5dc01ab

File tree

4 files changed

+184
-131
lines changed

4 files changed

+184
-131
lines changed

‎frontend/src/components/Navbar.tsx‎

Lines changed: 126 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import DarkModeSwitch from "./DarkModeSwitch";
22
import GitHub from "./ui/GitHubMark";
3-
import { Link } from "@tanstack/react-router";
4-
import { useWindowSize } from "~/hooks/useWindowSize";
3+
import { Link, useLocation } from "@tanstack/react-router";
54
import { Popover } from "radix-ui";
65
import { MenuIcon, HomeIcon } from "lucide-react";
76
import { Route as ProjectsRoute } from "~/routes/projects.index";
87
import { Route as BlogRoute } from "~/routes/blog.index";
98
import { Route as AboutRoute } from "~/routes/about";
109
import { cn } from "~/utils/utils";
10+
import { useEffect, useState } from "react";
1111

1212
export interface NavbarProps {
1313
height: string;
@@ -37,142 +37,145 @@ const navStyles = {
3737
};
3838

3939
export default function Navbar() {
40-
const { width } = useWindowSize();
40+
const [isOpen, setIsOpen] = useState(false);
41+
const pathname = useLocation().pathname;
42+
43+
useEffect(() => {
44+
setIsOpen(false);
45+
}, [pathname]);
46+
4147
return (
4248
<div className={navStyles.container}>
43-
{width >= 768 ? (
44-
<nav
45-
className={cn(
46-
navStyles.nav,
47-
"justify-between grid px-5 grid-cols-3 max-w-6xl"
48-
)}
49+
<nav
50+
className={cn(
51+
navStyles.nav,
52+
"justify-between px-5 grid-cols-3 max-w-6xl hidden md:grid"
53+
)}
54+
>
55+
<Link
56+
to="/"
57+
activeProps={{ className: navStyles.active }}
58+
inactiveProps={{ className: navStyles.inactive }}
59+
activeOptions={{ exact: true }}
60+
className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-gray-600/20"
61+
resetScroll
62+
aria-label="Home page link"
4963
>
64+
<HomeIcon className="p-0" size={32} aria-label="Home icon" />
65+
</Link>
66+
<div className="align-middle grow-0 flex px-5">
67+
<Link
68+
to={BlogRoute.to}
69+
activeProps={{ className: navStyles.active }}
70+
inactiveProps={{ className: navStyles.inactive }}
71+
className={navStyles.button}
72+
resetScroll
73+
>
74+
Blog
75+
</Link>
76+
<Link
77+
to={ProjectsRoute.to}
78+
activeProps={{ className: navStyles.active }}
79+
inactiveProps={{ className: navStyles.inactive }}
80+
className={navStyles.button}
81+
resetScroll
82+
>
83+
Projects
84+
</Link>
85+
<Link
86+
to={AboutRoute.to}
87+
activeProps={{ className: navStyles.active }}
88+
inactiveProps={{ className: navStyles.inactive }}
89+
className={navStyles.button}
90+
resetScroll
91+
>
92+
About
93+
</Link>
94+
</div>
95+
<div className="flex items-center justify-end grow-0">
96+
<div className="px-2">
97+
<GitHub githubLink={"https://github.com/andrew-s28/"} />
98+
</div>
99+
<div className="px-2">
100+
<DarkModeSwitch />
101+
</div>
102+
</div>
103+
</nav>
104+
<nav className={cn(navStyles.nav, "flex justify-center md:hidden")}>
105+
<div className="flex items-center justify-between w-full px-2">
50106
<Link
51107
to="/"
52108
activeProps={{ className: navStyles.active }}
53109
inactiveProps={{ className: navStyles.inactive }}
54110
activeOptions={{ exact: true }}
55111
className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-gray-600/20"
56112
resetScroll
57-
aria-label="Home page link"
58113
>
59-
<HomeIcon className="p-0" size={32} aria-label="Home icon" />
114+
<HomeIcon className="p-0" size={32} />
60115
</Link>
61-
<div className="align-middle grow-0 flex px-5">
62-
<Link
63-
to={BlogRoute.to}
64-
activeProps={{ className: navStyles.active }}
65-
inactiveProps={{ className: navStyles.inactive }}
66-
className={navStyles.button}
67-
resetScroll
68-
>
69-
Blog
70-
</Link>
71-
<Link
72-
to={ProjectsRoute.to}
73-
activeProps={{ className: navStyles.active }}
74-
inactiveProps={{ className: navStyles.inactive }}
75-
className={navStyles.button}
76-
resetScroll
77-
>
78-
Projects
79-
</Link>
80-
<Link
81-
to={AboutRoute.to}
82-
activeProps={{ className: navStyles.active }}
83-
inactiveProps={{ className: navStyles.inactive }}
84-
className={navStyles.button}
85-
resetScroll
86-
>
87-
About
88-
</Link>
89-
</div>
90-
<div className="flex items-center justify-end grow-0">
91-
<div className="px-2">
92-
<GitHub githubLink={"https://github.com/andrew-s28/"} />
93-
</div>
94-
<div className="px-2">
95-
<DarkModeSwitch />
96-
</div>
97-
</div>
98-
</nav>
99-
) : (
100-
<nav className={cn(navStyles.nav, "flex justify-center")}>
101-
<div className="flex items-center justify-between w-full px-2">
102-
<Link
103-
to="/"
104-
activeProps={{ className: navStyles.active }}
105-
inactiveProps={{ className: navStyles.inactive }}
106-
activeOptions={{ exact: true }}
107-
className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-gray-600/20"
108-
resetScroll
109-
>
110-
<HomeIcon className="p-0" size={32} />
111-
</Link>
112116

113-
<div className="align-middle justify-center grow-0 px-4">
114-
<Popover.Root>
115-
<Popover.Trigger className="flex items-center justify-center h-full cursor-pointer outline-0 focus-visible:ring-1 focus-visible:ring-blue-500">
116-
<div className="flex items-center justify-center h-full cursor-pointer outline-0 focus-visible:ring-1 focus-visible:ring-blue-500">
117-
<MenuIcon className="w-full" size={32} />
118-
<span className="sr-only">Toggle menu</span>
119-
</div>
120-
</Popover.Trigger>
121-
<Popover.Portal>
122-
<Popover.Content
123-
className="w-64 bg-dawn-pink-100 dark:bg-night-sky-950 p-2 rounded-lg shadow-xl z-50 border-night-sky-950 dark:border-dawn-pink-100 border-2"
124-
sideOffset={5}
125-
>
126-
<div className="flex flex-col space-y-1">
127-
<Link
128-
to={BlogRoute.to}
129-
className="px-4 py-2 hover:bg-muted rounded-md text-center"
130-
activeProps={{
131-
className:
132-
"font-bold bg-dawn-pink-300 dark:bg-night-sky-900",
133-
}}
134-
resetScroll
135-
>
136-
Blog
137-
</Link>
138-
<Link
139-
to={ProjectsRoute.to}
140-
className="px-4 py-2 hover:bg-muted rounded-md text-center"
141-
activeProps={{
142-
className:
143-
"font-bold bg-dawn-pink-300 dark:bg-night-sky-900",
144-
}}
145-
resetScroll
146-
>
147-
Projects
148-
</Link>
149-
<Link
150-
to={AboutRoute.to}
151-
className="px-4 py-2 hover:bg-muted rounded-md text-center"
152-
activeProps={{
153-
className:
154-
"font-bold bg-dawn-pink-300 dark:bg-night-sky-900",
155-
}}
156-
resetScroll
157-
>
158-
About
159-
</Link>
160-
<div className="px-2 flex items-center justify-center">
161-
<GitHub githubLink={"https://github.com/andrew-s28/"} />
162-
<DarkModeSwitch />
163-
</div>
117+
<div className="align-middle justify-center grow-0 px-4">
118+
<Popover.Root open={isOpen} onOpenChange={setIsOpen}>
119+
<Popover.Trigger className="flex items-center justify-center h-full cursor-pointer outline-0 focus-visible:ring-1 focus-visible:ring-blue-500">
120+
<div className="flex items-center justify-center h-full cursor-pointer outline-0 focus-visible:ring-1 focus-visible:ring-blue-500">
121+
<MenuIcon className="w-full" size={32} />
122+
<span className="sr-only">Toggle menu</span>
123+
</div>
124+
</Popover.Trigger>
125+
<Popover.Portal>
126+
<Popover.Content
127+
className="w-64 bg-dawn-pink-100 dark:bg-night-sky-950 p-2 rounded-lg shadow-xl z-50 border-night-sky-950 dark:border-dawn-pink-100 border-2"
128+
sideOffset={5}
129+
>
130+
<div className="flex flex-col space-y-1">
131+
<Link
132+
to={BlogRoute.to}
133+
className="px-4 py-2 hover:bg-muted rounded-md text-center"
134+
activeProps={{
135+
className:
136+
"font-bold bg-dawn-pink-300 dark:bg-night-sky-900",
137+
}}
138+
resetScroll
139+
>
140+
Blog
141+
</Link>
142+
<Link
143+
to={ProjectsRoute.to}
144+
className="px-4 py-2 hover:bg-muted rounded-md text-center"
145+
activeProps={{
146+
className:
147+
"font-bold bg-dawn-pink-300 dark:bg-night-sky-900",
148+
}}
149+
resetScroll
150+
>
151+
Projects
152+
</Link>
153+
<Link
154+
to={AboutRoute.to}
155+
className="px-4 py-2 hover:bg-muted rounded-md text-center"
156+
activeProps={{
157+
className:
158+
"font-bold bg-dawn-pink-300 dark:bg-night-sky-900",
159+
}}
160+
resetScroll
161+
>
162+
About
163+
</Link>
164+
<div className="px-2 flex items-center justify-center">
165+
<GitHub githubLink={"https://github.com/andrew-s28/"} />
166+
<DarkModeSwitch />
164167
</div>
165-
<Popover.Arrow
166-
height={10}
167-
className="dark:fill-dawn-pink-100 fill-night-sky-950"
168-
/>
169-
</Popover.Content>
170-
</Popover.Portal>
171-
</Popover.Root>
172-
</div>
168+
</div>
169+
<Popover.Arrow
170+
height={10}
171+
className="dark:fill-dawn-pink-100 fill-night-sky-950"
172+
/>
173+
</Popover.Content>
174+
</Popover.Portal>
175+
</Popover.Root>
173176
</div>
174-
</nav>
175-
)}
177+
</div>
178+
</nav>
176179
</div>
177180
);
178181
}

‎frontend/src/hooks/useWindowSize.tsx‎

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,58 @@
11
import { useState, useEffect } from "react";
22

3+
export function useWidth() {
4+
const [width, setWidth] = useState<number | null>(null);
5+
6+
useEffect(() => {
7+
let timeoutId: ReturnType<typeof setTimeout> | null = null;
8+
9+
const handleResize = () => {
10+
if (timeoutId) clearTimeout(timeoutId);
11+
timeoutId = setTimeout(() => {
12+
setWidth(window.innerWidth);
13+
}, 300); // Adjust debounce delay as needed
14+
};
15+
16+
window.addEventListener("resize", handleResize);
17+
handleResize();
18+
19+
return () => {
20+
if (timeoutId) clearTimeout(timeoutId);
21+
window.removeEventListener("resize", handleResize);
22+
};
23+
}, []);
24+
25+
return { width: width };
26+
}
27+
28+
export function useHeight() {
29+
const [height, setHeight] = useState<number | null>(null);
30+
31+
useEffect(() => {
32+
let timeoutId: ReturnType<typeof setTimeout> | null = null;
33+
34+
const handleResize = () => {
35+
if (timeoutId) clearTimeout(timeoutId);
36+
timeoutId = setTimeout(() => {
37+
setHeight(window.innerHeight);
38+
}, 300); // Adjust debounce delay as needed
39+
};
40+
41+
window.addEventListener("resize", handleResize);
42+
handleResize();
43+
44+
return () => {
45+
if (timeoutId) clearTimeout(timeoutId);
46+
window.removeEventListener("resize", handleResize);
47+
};
48+
}, []);
49+
50+
return { height: height };
51+
}
52+
353
export const useWindowSize = (debounce: boolean = false) => {
454
const [height, setHeight] = useState(10000);
555
const [width, setWidth] = useState(10000);
6-
const [isLoaded, setIsLoaded] = useState(false);
756

857
useEffect(() => {
958
let timeoutId: ReturnType<typeof setTimeout> | null = null;
@@ -23,13 +72,12 @@ export const useWindowSize = (debounce: boolean = false) => {
2372

2473
window.addEventListener("resize", handleResize);
2574
handleResize();
26-
setIsLoaded(true);
2775

2876
return () => {
2977
if (timeoutId) clearTimeout(timeoutId);
3078
window.removeEventListener("resize", handleResize);
3179
};
3280
}, [debounce]);
3381

34-
return { width: width, height: height, isLoaded: isLoaded };
82+
return { width: width, height: height };
3583
};

‎frontend/src/routes/actions-dashboard.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ const loadRepositories = async () => {
3434
const workflows = await api.getWorkflows();
3535
const workflowRuns = await api.getWorkflowRuns();
3636
let repositoriesWithRuns: RepositoryWithRuns[] = [];
37-
// console.log(repositories, workflows, workflowRuns);
3837
// Map repositories to include workflow runs
3938
repositoriesWithRuns = repositories.results.map((repo) => {
4039
const repoWorkflows = workflows.results.filter(
@@ -193,7 +192,6 @@ function RepositoryCard({ repo, onToggle }: RepositoryCardProps) {
193192
const hasInProgress = repo.workflows.some((workflow) =>
194193
workflow.runs?.some((run) => run.status === "in_progress")
195194
);
196-
console.log(repo.workflows[0].runs);
197195
const allSuccess = repo.workflows.every((workflow) =>
198196
workflow.runs?.every(
199197
(run) => run.conclusion === "success" || run === undefined

0 commit comments

Comments
 (0)