Admin Panel

resources/js/components/app-logo.tsx

@@ -1,18 +1,22 @@
-import { usePage } from '@inertiajs/react';
-
-import AppLogoIcon from '@/components/app-logo-icon';
+import { company } from '@/data/site';
 
+/** PAJ logo mark with the admin panel name, used in the sidebar header. */
 export default function AppLogo() {
-    const { name } = usePage().props;
-
     return (
         <>
-            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md">
-                <AppLogoIcon className="size-5 fill-current text-white dark:text-black" />
+            <div className="border-sidebar-border flex aspect-square size-8 items-center justify-center rounded-md border bg-white p-1">
+                <img
+                    src={company.logo}
+                    alt={company.name}
+                    className="h-full w-full object-contain"
+                />
             </div>
             <div className="ml-1 grid flex-1 text-left text-sm">
-                <span className="mb-0.5 truncate leading-tight font-semibold">
-                    {name}
+                <span className="font-display truncate leading-tight font-bold tracking-wide uppercase">
+                    {company.brand}
+                </span>
+                <span className="text-sidebar-foreground/60 truncate font-mono text-[11px]">
+                    Admin Panel
                 </span>
             </div>
         </>