Changes

src/components/AppLayout.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { useCart } from '@/contexts/CartContext';
+import { useBranding } from '@/hooks/useBranding';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { cn } from '@/lib/utils';
@@ -69,6 +70,7 @@ interface AppLayoutProps {
 export function AppLayout({ children }: AppLayoutProps) {
   const { user, isAdmin, signOut } = useAuth();
   const { items } = useCart();
+  const branding = useBranding();
   const location = useLocation();
   const navigate = useNavigate();
   const [moreOpen, setMoreOpen] = useState(false);
@@ -93,13 +95,22 @@ export function AppLayout({ children }: AppLayoutProps) {
   // Get additional items for "More" menu
   const moreItems = navItems.filter(item => !mobileNav.some(m => m.href === item.href));
 
+  const brandName = branding.brand_name || 'LearnHub';
+  const logoUrl = branding.brand_logo_url;
+
   if (!user) {
     // Public layout for non-authenticated pages
     return (
       <div className="min-h-screen bg-background">
         <header className="border-b-2 border-border bg-background sticky top-0 z-50">
           <div className="container mx-auto px-4 py-4 flex items-center justify-between">
-            <Link to="/" className="text-2xl font-bold">LearnHub</Link>
+            <Link to="/" className="text-2xl font-bold flex items-center gap-2">
+              {logoUrl ? (
+                <img src={logoUrl} alt={brandName} className="h-8 object-contain" />
+              ) : (
+                brandName
+              )}
+            </Link>
             <nav className="flex items-center gap-4">
               <Link to="/products" className="hover:underline font-medium">Produk</Link>
               <Link to="/events" className="hover:underline font-medium">Kalender</Link>
@@ -132,7 +143,13 @@ export function AppLayout({ children }: AppLayoutProps) {
       {/* Desktop Sidebar */}
       <aside className="hidden md:flex flex-col w-64 border-r-2 border-border bg-sidebar fixed h-screen">
         <div className="p-4 border-b-2 border-border">
-          <Link to="/" className="text-xl font-bold">LearnHub</Link>
+          <Link to="/" className="text-xl font-bold flex items-center gap-2">
+            {logoUrl ? (
+              <img src={logoUrl} alt={brandName} className="h-8 object-contain" />
+            ) : (
+              brandName
+            )}
+          </Link>
         </div>
         
         <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
@@ -179,7 +196,13 @@ export function AppLayout({ children }: AppLayoutProps) {
       <div className="flex-1 md:ml-64">
         {/* Mobile Header */}
         <header className="md:hidden sticky top-0 z-50 border-b-2 border-border bg-background px-4 py-3 flex items-center justify-between">
-          <Link to="/" className="text-xl font-bold">LearnHub</Link>
+          <Link to="/" className="text-xl font-bold flex items-center gap-2">
+            {logoUrl ? (
+              <img src={logoUrl} alt={brandName} className="h-6 object-contain" />
+            ) : (
+              brandName
+            )}
+          </Link>
           <div className="flex items-center gap-2">
             <Link to="/checkout" className="relative p-2">
               <ShoppingCart className="w-5 h-5" />