style: logo header

apps/client/app/components/app-breadcrumb.tsx

@@ -8,7 +8,6 @@ import {
 	BreadcrumbSeparator,
 } from "~/components/ui/breadcrumb";
 import { useBreadcrumbs } from "~/lib/breadcrumbs";
-import { cn } from "../lib/utils";
 
 export function AppBreadcrumb() {
 	const breadcrumbs = useBreadcrumbs();
@@ -17,17 +16,12 @@ export function AppBreadcrumb() {
 		<Breadcrumb>
 			<BreadcrumbLink asChild></BreadcrumbLink>
 			<BreadcrumbList>
-				{breadcrumbs.length === 1 && (
-					<BreadcrumbItem>
-						<Link to="/volumes">Ironmount</Link>
-					</BreadcrumbItem>
-				)}
 				{breadcrumbs.map((breadcrumb, index) => {
 					const isLast = index === breadcrumbs.length - 1;
 
 					return (
 						<div key={`${breadcrumb.label}-${index}`} className="contents">
-							<BreadcrumbItem className={cn({ invisible: breadcrumbs.length <= 1 })}>
+							<BreadcrumbItem>
 								{isLast || breadcrumb.isCurrentPage ? (
 									<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
 								) : breadcrumb.href ? (

apps/client/app/components/app-sidebar.tsx

@@ -1,10 +1,11 @@
-import { Database, HardDrive } from "lucide-react";
+import { Database, HardDrive, Mountain } from "lucide-react";
-import { NavLink } from "react-router";
+import { Link, NavLink } from "react-router";
 import {
 	Sidebar,
 	SidebarContent,
 	SidebarGroup,
 	SidebarGroupContent,
+	SidebarHeader,
 	SidebarMenu,
 	SidebarMenuButton,
 	SidebarMenuItem,
@@ -31,7 +32,19 @@ export function AppSidebar() {
 
 	return (
 		<Sidebar variant="inset" collapsible="icon" className="p-0">
-			<div className="bg-card-header border-b border-border/50 hidden md:inline-block" style={{ height: 65 }}></div>
+			<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-[65px] flex-row items-center p-4">
+				<Link to="/volumes" className="flex items-center gap-3 font-semibold">
+					<Mountain className="size-5 text-strong-accent ml-[6px]" />
+					<span
+						className={cn(
+							"text-base transition-opacity duration-200",
+							state === "collapsed" && "opacity-0 w-0 overflow-hidden",
+						)}
+					>
+						Ironmount
+					</span>
+				</Link>
+			</SidebarHeader>
 			<SidebarContent className="p-2 border-r">
 				<SidebarGroup>
 					<SidebarGroupContent>

apps/client/app/components/layout.tsx

@@ -71,7 +71,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 						)}
 					</div>
 				</header>
-				<main className="flex flex-col p-2 pt-4 sm:p-8 sm:pt-4 mx-auto">
+				<main className="flex flex-col p-2 pt-2 sm:p-8 sm:pt-6 mx-auto">
 					<Outlet />
 				</main>
 			</GridBackground>

apps/client/app/routes.ts

@@ -4,6 +4,7 @@ export default [
 	route("onboarding", "./routes/onboarding.tsx"),
 	route("login", "./routes/login.tsx"),
 	layout("./components/layout.tsx", [
+		route("/", "./routes/root.tsx"),
 		route("volumes", "./routes/home.tsx"),
 		route("volumes/:name", "./routes/details.tsx"),
 	]),

apps/client/app/routes/root.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "react-router";
+
+export const clientLoader = async () => {
+	return redirect("/volumes");
+};