fix(ui): align page layouts and add navigation icons

src/shared/ui/AppShell.module.css

@@ -1,3 +1,8 @@
+.content {
+	max-width: 1120px;
+	margin-inline: auto;
+}
+
 .header {
 	align-items: center;
 	display: flex;

src/shared/ui/AppShell.tsx

@@ -13,10 +13,30 @@ const AppShell: FC<AppShellProps> = (props) => {
 	const { t } = useTranslation();
 	const { pathname } = useLocation();
 	const items = [
-		{ to: "/accounts", label: t("navigation.accounts") },
-		{ to: "/stocks", label: t("navigation.stocks") },
-		{ to: "/bonds", label: t("navigation.bonds") },
-		{ to: "/settings", label: t("navigation.settings") },
+		{
+			to: "/accounts",
+			label: t("navigation.accounts"),
+			icon: (
+				<path d="M8 6V4h8v2M3 10h18M9 10v3h6v-3M5 6h14a2 2 0 0 1 2 2v11H3V8a2 2 0 0 1 2-2Z" />
+			),
+		},
+		{
+			to: "/stocks",
+			label: t("navigation.stocks"),
+			icon: <path d="M3 3v18h18M7 14l5-5 4 3 5-7M16 5h5v5" />,
+		},
+		{
+			to: "/bonds",
+			label: t("navigation.bonds"),
+			icon: <path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3ZM9 7h6M9 11h6M9 15h3" />,
+		},
+		{
+			to: "/settings",
+			label: t("navigation.settings"),
+			icon: (
+				<path d="M4 7h9m4 0h3M4 17h3m4 0h9M13 4v6h4V4h-4ZM7 14v6h4v-6H7Z" />
+			),
+		},
 	];
 
 	return (
@@ -35,13 +55,31 @@ const AppShell: FC<AppShellProps> = (props) => {
 						key={item.to}
 						to={item.to}
 						label={item.label}
+						leftSection={
+							<svg
+								width={20}
+								height={20}
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								aria-hidden="true"
+								focusable="false"
+							>
+								{item.icon}
+							</svg>
+						}
 						active={pathname.startsWith(item.to)}
 					/>
 				))}
 			</MantineAppShell.Navbar>
 			<MantineAppShell.Main className={classes.main}>
-				{contentAboveOutlet}
-				<Outlet />
+				<div className={classes.content}>
+					{contentAboveOutlet}
+					<Outlet />
+				</div>
 			</MantineAppShell.Main>
 			<nav className={classes.bottomNav} aria-label={t("appName")}>
 				{items.map((item) => (