feat: remove top header and rework mobile bottom navigation (#109)

src/app/ui/AppShell/AppShell.tsx

@@ -17,6 +17,12 @@ type AppShellProps = {
 	contentAboveOutlet?: ReactNode;
 };
 
+function getBottomNavItemClass({ isActive }: { isActive: boolean }) {
+	return isActive
+		? `${classes.bottomNavItem} ${classes.active}`
+		: classes.bottomNavItem;
+}
+
 const AppShell: FC<AppShellProps> = (props) => {
 	const { contentAboveOutlet } = props;
 	const { t } = useTranslation();
@@ -24,31 +30,31 @@ const AppShell: FC<AppShellProps> = (props) => {
 
 	const items = [
 		{
-			icon: <PortfolioIcon size={20} />,
+			Icon: PortfolioIcon,
 			iconClassName: classes.portfolioIcon,
 			label: t("navigation.accounts"),
 			to: "/accounts",
 		},
 		{
-			icon: <CardsIcon size={20} />,
+			Icon: CardsIcon,
 			iconClassName: classes.cardsIcon,
 			label: t("navigation.cards"),
 			to: "/cards",
 		},
 		{
-			icon: <StocksIcon size={20} />,
+			Icon: StocksIcon,
 			iconClassName: classes.stocksIcon,
 			label: t("navigation.stocks"),
 			to: "/stocks",
 		},
 		{
-			icon: <BondsIcon size={20} />,
+			Icon: BondsIcon,
 			iconClassName: classes.bondsIcon,
 			label: t("navigation.bonds"),
 			to: "/bonds",
 		},
 		{
-			icon: <SettingsIcon size={20} />,
+			Icon: SettingsIcon,
 			iconClassName: classes.settingsIcon,
 			label: t("navigation.settings"),
 			to: "/settings",
@@ -57,32 +63,32 @@ const AppShell: FC<AppShellProps> = (props) => {
 
 	return (
 		<MantineAppShell
-			header={{ height: 60 }}
+			className={classes.root}
 			navbar={{ breakpoint: "sm", collapsed: { mobile: true }, width: 220 }}
 			padding="md"
 		>
-			<MantineAppShell.Header className={classes.header}>
-				<Text fw={700}>{t("appName")}</Text>
-			</MantineAppShell.Header>
+			<MantineAppShell.Navbar aria-label={t("navigation.primary")}>
+				<div className={classes.brand}>
+					<Text fw={700}>{t("appName")}</Text>
+				</div>
 
-			<MantineAppShell.Navbar p="sm">
-				{items.map(item => (
-					<NavLink
-						active={pathname.startsWith(item.to)}
-						className={classes.navLink}
-						component={RouterNavLink}
-						key={item.to}
-						label={item.label}
-						leftSection={(
-							<span
-								className={`${classes.navIcon} ${item.iconClassName ?? ""}`}
-							>
-								{item.icon}
-							</span>
-						)}
-						to={item.to}
-					/>
-				))}
+				<div className={classes.navList}>
+					{items.map(item => (
+						<NavLink
+							active={pathname.startsWith(item.to)}
+							className={classes.navLink}
+							component={RouterNavLink}
+							key={item.to}
+							label={item.label}
+							leftSection={(
+								<span className={`${classes.navIcon} ${item.iconClassName}`}>
+									<item.Icon size={20} />
+								</span>
+							)}
+							to={item.to}
+						/>
+					))}
+				</div>
 			</MantineAppShell.Navbar>
 
 			<MantineAppShell.Main className={classes.main}>
@@ -93,22 +99,23 @@ const AppShell: FC<AppShellProps> = (props) => {
 				</div>
 			</MantineAppShell.Main>
 
-			<nav aria-label={t("appName")} className={classes.bottomNav}>
-				{items.map((item) => {
-					const appearanceClass = pathname.startsWith(item.to)
-						? classes.active
-						: undefined;
+			<nav
+				aria-label={t("navigation.primary")}
+				className={classes.bottomNav}
+			>
+				{items.map(item => (
+					<RouterNavLink
+						className={getBottomNavItemClass}
+						key={item.to}
+						to={item.to}
+					>
+						<span className={classes.iconPill}>
+							<item.Icon size={24} />
+						</span>
 
-					return (
-						<RouterNavLink
-							className={appearanceClass}
-							key={item.to}
-							to={item.to}
-						>
-							{item.label}
-						</RouterNavLink>
-					);
-				})}
+						<span className={classes.bottomNavLabel}>{item.label}</span>
+					</RouterNavLink>
+				))}
 			</nav>
 		</MantineAppShell>
 	);