From 75838ec3b546da142c369f5e62135f53287367b8 Mon Sep 17 00:00:00 2001 From: Dasa122 Date: Sat, 30 May 2026 10:19:21 +0000 Subject: [PATCH 1/7] feat(navbar): add mobile navigation menu and translations --- apps/iris/public/locales/en/translation.json | 4 ++ apps/iris/public/locales/hu/translation.json | 4 ++ apps/iris/src/components/navbar.tsx | 73 ++++++++++++++++++++ 3 files changed, 81 insertions(+) diff --git a/apps/iris/public/locales/en/translation.json b/apps/iris/public/locales/en/translation.json index e50d6e3..d7a11bd 100644 --- a/apps/iris/public/locales/en/translation.json +++ b/apps/iris/public/locales/en/translation.json @@ -186,6 +186,10 @@ }, "clearFilter": "Clear Filter" }, + "navigation": { + "title": "Navigation", + "mobileMenu": "Open navigation menu" + }, "substitution": { "title": "Substitutions", "description": "Check out lesson substitutions and cancellations", diff --git a/apps/iris/public/locales/hu/translation.json b/apps/iris/public/locales/hu/translation.json index d57b3fb..3c7f0c4 100644 --- a/apps/iris/public/locales/hu/translation.json +++ b/apps/iris/public/locales/hu/translation.json @@ -186,6 +186,10 @@ "delete": "Törlés", "deleting": "Törlés..." }, + "navigation": { + "title": "Navigáció", + "mobileMenu": "Navigációs menü megnyitása" + }, "substitution": { "title": "Helyettesítések", "description": "Órahelyettesítések és elmaradó órák elérése", diff --git a/apps/iris/src/components/navbar.tsx b/apps/iris/src/components/navbar.tsx index 9dec561..5600a28 100644 --- a/apps/iris/src/components/navbar.tsx +++ b/apps/iris/src/components/navbar.tsx @@ -7,7 +7,9 @@ import { GraduationCap, LogIn, LogOut, + Menu, UserCog, + X, } from 'lucide-react'; import type { ReactNode } from 'react'; import { useState } from 'react'; @@ -48,6 +50,12 @@ export function Navbar({ const { t } = useTranslation(); const { data, isPending } = authClient.useSession(); const [settingsOpen, setSettingsOpen] = useState(false); + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + + const canSeeAdminUi = useHasPermission( + ADMIN_UI_PERMISSIONS, + data?.user?.permissions + ); return ( <> @@ -55,6 +63,21 @@ export function Navbar({
{children} + {data && showLinks && ( + + )} {showLogo && ( <>
@@ -189,6 +212,56 @@ export function Navbar({
+ {data && showLinks && ( +
+
+
+ + + {canSeeAdminUi && ( + + )} +
+
+
+ )} ); From cd593180dcfd4359cfe9621edac07dc3e0250941 Mon Sep 17 00:00:00 2001 From: Dasa122 Date: Sat, 30 May 2026 10:32:59 +0000 Subject: [PATCH 2/7] feat(navbar): add mobile menu open/close translations --- apps/iris/public/locales/en/translation.json | 3 ++- apps/iris/public/locales/hu/translation.json | 3 ++- apps/iris/src/components/navbar.tsx | 6 +++++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/iris/public/locales/en/translation.json b/apps/iris/public/locales/en/translation.json index d7a11bd..517c1ec 100644 --- a/apps/iris/public/locales/en/translation.json +++ b/apps/iris/public/locales/en/translation.json @@ -188,7 +188,8 @@ }, "navigation": { "title": "Navigation", - "mobileMenu": "Open navigation menu" + "mobileMenuOpen": "Open navigation menu", + "mobileMenuClose": "Close navigation menu" }, "substitution": { "title": "Substitutions", diff --git a/apps/iris/public/locales/hu/translation.json b/apps/iris/public/locales/hu/translation.json index 3c7f0c4..66acf94 100644 --- a/apps/iris/public/locales/hu/translation.json +++ b/apps/iris/public/locales/hu/translation.json @@ -188,7 +188,8 @@ }, "navigation": { "title": "Navigáció", - "mobileMenu": "Navigációs menü megnyitása" + "mobileMenuOpen": "Navigációs menü megnyitása", + "mobileMenuClose": "Navigációs menü bezárása" }, "substitution": { "title": "Helyettesítések", diff --git a/apps/iris/src/components/navbar.tsx b/apps/iris/src/components/navbar.tsx index 5600a28..109eaf6 100644 --- a/apps/iris/src/components/navbar.tsx +++ b/apps/iris/src/components/navbar.tsx @@ -65,7 +65,11 @@ export function Navbar({ {children} {data && showLinks && ( - - {canSeeAdminUi && ( + {mobileMenuOpen && ( +
- )} -
+ + {canSeeAdminUi && ( + + )} +
+ )} )} From e44d19e4987f0443dbacb17595c473c992e4e1b2 Mon Sep 17 00:00:00 2001 From: Dasa122 Date: Sat, 30 May 2026 10:46:31 +0000 Subject: [PATCH 4/7] feat(navbar): refactor mobile navigation to use NAV_ITEMS --- apps/iris/src/components/navbar.tsx | 92 ++++++++++++----------------- 1 file changed, 37 insertions(+), 55 deletions(-) diff --git a/apps/iris/src/components/navbar.tsx b/apps/iris/src/components/navbar.tsx index cf3da70..aad2484 100644 --- a/apps/iris/src/components/navbar.tsx +++ b/apps/iris/src/components/navbar.tsx @@ -41,6 +41,19 @@ type NavbarProps = { showLogo?: boolean; }; +type NavItem = { + to: string; + icon: React.ElementType; + labelKey: string; + adminOnly?: boolean; +}; + +const NAV_ITEMS: NavItem[] = [ + { icon: Calendar, labelKey: 'schedule', to: '/' }, + { icon: Book, labelKey: 'substitutions', to: '/subs' }, + { adminOnly: true, icon: UserCog, labelKey: 'adminDashboard', to: '/admin' }, +]; + export function Navbar({ children, showLinks = true, @@ -65,6 +78,8 @@ export function Navbar({ {children} {data && showLinks && ( - - {canSeeAdminUi && ( + {NAV_ITEMS.filter( + (item) => !item.adminOnly || canSeeAdminUi + ).map((item) => ( - )} + ))} )} @@ -281,34 +278,19 @@ function NavLinks({ userPermissions }: { userPermissions?: string[] }) { return (
- - - {canSeeAdminUi && ( - + {NAV_ITEMS.filter((item) => !item.adminOnly || canSeeAdminUi).map( + (item) => ( + + ) )}
); From b8a4ef9a386cda064e12080fb5b05b13bea557a4 Mon Sep 17 00:00:00 2001 From: Dasa122 Date: Sat, 30 May 2026 11:13:23 +0000 Subject: [PATCH 5/7] fix(navbar): update NavItem type for 'to' property --- apps/iris/src/components/navbar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/iris/src/components/navbar.tsx b/apps/iris/src/components/navbar.tsx index aad2484..1cf04d8 100644 --- a/apps/iris/src/components/navbar.tsx +++ b/apps/iris/src/components/navbar.tsx @@ -1,4 +1,4 @@ -import { useNavigate } from '@tanstack/react-router'; +import { type LinkProps, useNavigate } from '@tanstack/react-router'; import { Book, Calendar, @@ -42,7 +42,7 @@ type NavbarProps = { }; type NavItem = { - to: string; + to: LinkProps['to']; icon: React.ElementType; labelKey: string; adminOnly?: boolean; From f1defeac5aa8bac4a96da4ea603ecbea96d25a5f Mon Sep 17 00:00:00 2001 From: Dasa122 Date: Sat, 30 May 2026 11:15:58 +0000 Subject: [PATCH 6/7] refactor(navbar): update NavItem type for 'to' property --- apps/iris/src/components/navbar.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/iris/src/components/navbar.tsx b/apps/iris/src/components/navbar.tsx index 1cf04d8..79e271c 100644 --- a/apps/iris/src/components/navbar.tsx +++ b/apps/iris/src/components/navbar.tsx @@ -1,4 +1,4 @@ -import { type LinkProps, useNavigate } from '@tanstack/react-router'; +import { useNavigate } from '@tanstack/react-router'; import { Book, Calendar, @@ -11,7 +11,7 @@ import { UserCog, X, } from 'lucide-react'; -import type { ReactNode } from 'react'; +import type { ElementType, ReactNode } from 'react'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { NotificationBell } from '@/components/notification-bell'; @@ -33,6 +33,7 @@ import { ADMIN_UI_PERMISSIONS, useHasPermission, } from '@/hooks/use-has-permission'; +import type { FileRoutesByTo } from '@/route-tree.gen'; import { authClient } from '@/utils/authentication'; type NavbarProps = { @@ -42,8 +43,8 @@ type NavbarProps = { }; type NavItem = { - to: LinkProps['to']; - icon: React.ElementType; + to: keyof FileRoutesByTo; + icon: ElementType; labelKey: string; adminOnly?: boolean; }; From 4aa8062576cadf48b32a40ebacb42ffdfaf9a1b7 Mon Sep 17 00:00:00 2001 From: Dasa122 Date: Sat, 30 May 2026 11:37:24 +0000 Subject: [PATCH 7/7] style(navbar): improve mobile nav class handling --- apps/iris/src/components/navbar.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/iris/src/components/navbar.tsx b/apps/iris/src/components/navbar.tsx index 79e271c..abc6fbf 100644 --- a/apps/iris/src/components/navbar.tsx +++ b/apps/iris/src/components/navbar.tsx @@ -34,6 +34,7 @@ import { useHasPermission, } from '@/hooks/use-has-permission'; import type { FileRoutesByTo } from '@/route-tree.gen'; +import { cn } from '@/utils'; import { authClient } from '@/utils/authentication'; type NavbarProps = { @@ -234,12 +235,12 @@ export function Navbar({ {data && showLinks && (