Skip to content

Commit 9780b46

Browse files
committed
feat: top navigator
1 parent 396e16b commit 9780b46

File tree

6 files changed

+80
-2
lines changed

6 files changed

+80
-2
lines changed

apps/desktop-v2/app/page.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import useShortcuts from "@/hooks/useShortcuts";
3434
import { SupernovaCommand } from "@/types/command";
3535
import useFetchTasks from "@/hooks/useFetchTasks";
3636
import useViewingDateUI from "@/hooks/useViewingDate";
37+
import TopNavigator from "@/components/top-navigator";
3738

3839
function Home() {
3940
const { tasks, setTasks, taskFetchState, triggerRefetchTasks } =
@@ -119,7 +120,8 @@ function Home() {
119120
chosenTaskIndex !== -1 ? memoizedTasksView[chosenTaskIndex] : null,
120121
}}
121122
/>
122-
<div className="flex items-center justify-end w-full">
123+
<div className="flex items-center justify-between w-full">
124+
<TopNavigator />
123125
<Link href={settingsRoute}>
124126
<GearIcon width={20} height={20} />
125127
</Link>

apps/desktop-v2/app/view/inbox/page.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
createBlankTask,
1212
} from "@/components/supernova-task";
1313
import { TaskBuilderDialog } from "@/components/task-builder-dialog";
14+
import TopNavigator from "@/components/top-navigator";
1415
import { withAuth } from "@/hocs/withAuth";
1516
import useFetchTasks from "@/hooks/useFetchTasks";
1617
import useShortcuts from "@/hooks/useShortcuts";
@@ -98,7 +99,8 @@ function Inbox() {
9899
chosenTaskIndex !== -1 ? memoizedTasksView[chosenTaskIndex] : null,
99100
}}
100101
/>
101-
<div className="flex items-center justify-end w-full">
102+
<div className="flex items-center justify-between w-full">
103+
<TopNavigator />
102104
<Link href={settingsRoute}>
103105
<GearIcon width={20} height={20} />
104106
</Link>

apps/desktop-v2/components/icons.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,21 @@ export const CalendarYellowIcon = (props: ImageProps) => (
8585
{...props}
8686
/>
8787
);
88+
89+
export const hexagonPath = "/icons/hexagon.svg";
90+
91+
export const HexagonIcon = (props: ImageProps) => (
92+
<Image
93+
src={hexagonPath}
94+
width={13}
95+
height={13}
96+
alt="Hexagon icon"
97+
{...props}
98+
/>
99+
);
100+
101+
export const inboxPath = "/icons/inbox.svg";
102+
103+
export const InboxIcon = (props: ImageProps) => (
104+
<Image src={inboxPath} width={13} height={13} alt="Inbox icon" {...props} />
105+
);
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { HexagonIcon, InboxIcon } from "./icons";
2+
import { inboxRoute } from "@/app/view/inbox/meta";
3+
import { homeRoute } from "@/app/meta";
4+
import { Button } from "./button";
5+
import Link from "next/link";
6+
import { twMerge } from "tailwind-merge";
7+
8+
export default function TopNavigator() {
9+
const navItems: {
10+
label: string;
11+
icon: React.ReactNode;
12+
route: string;
13+
}[] = [
14+
{
15+
label: "Inbox",
16+
icon: <InboxIcon />,
17+
route: inboxRoute,
18+
},
19+
{
20+
label: "Today",
21+
icon: <HexagonIcon />,
22+
route: homeRoute,
23+
},
24+
];
25+
26+
const activeRoute = navItems.find(
27+
(item) => item.route === window.location.pathname
28+
)?.route;
29+
30+
return (
31+
<div className="flex items-center gap-3">
32+
{navItems.map((item) => (
33+
<Link href={item.route} key={item.route}>
34+
<Button key={item.route} bgVariant="ghost" className="gap-1">
35+
{item.icon}
36+
<p
37+
className={twMerge(
38+
"text-xs",
39+
activeRoute === item.route && "underline"
40+
)}
41+
>
42+
{item.label}
43+
</p>
44+
</Button>
45+
</Link>
46+
))}
47+
</div>
48+
);
49+
}
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)