Merge pull request #92 from solid-contrib/rework-header-logo

Use icon-only logo, enlarge it, and show it in the mobile sidebar

Author: PreciousOritsedere

app/components/Header.tsx

@@ -13,31 +13,34 @@ interface HeaderProps {
 export default function Header({ onMenuClick }: HeaderProps) {
   return (
     <header className="sticky top-0 z-10 border-b border-border bg-background">
-      <div className="flex h-14 items-center gap-2 px-2 sm:gap-4 sm:px-4">
-        {onMenuClick && (
-          <button
-            type="button"
-            onClick={onMenuClick}
-            className="cursor-pointer flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring lg:hidden"
-            aria-label="Toggle menu"
-          >
-            <Menu className="h-5 w-5" />
-          </button>
-        )}
-
-        <div className="flex h-full max-h-[200px] max-w-[250px] flex-shrink-0 items-center justify-center">
+      <div className="flex h-14 items-center">
+        {/* Desktop: center logo over the w-64 sidebar column */}
+        <div className="hidden w-64 shrink-0 items-center justify-center lg:flex">
           <Image
             src="/file-manager-logo.svg"
-            alt="Solid Logo"
-            width={24}
-            height={24}
-            className="h-full w-full object-cover"
+            alt="Solid File Manager"
+            width={48}
+            height={48}
+            className="h-12 w-12"
             priority
-            aria-hidden="true"
           />
         </div>
 
-        <div className="ml-auto flex items-center gap-1 sm:gap-2">
+        {/* Mobile: menu only — logo lives in the sidebar Sheet */}
+        {onMenuClick && (
+          <div className="flex items-center px-2 lg:hidden">
+            <button
+              type="button"
+              onClick={onMenuClick}
+              className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring"
+              aria-label="Toggle menu"
+            >
+              <Menu className="h-5 w-5" />
+            </button>
+          </div>
+        )}
+
+        <div className="ml-auto flex items-center gap-1 px-2 sm:gap-2 sm:px-4">
           <ThemeToggle />
           <ProfileIcon />
         </div>

app/components/Sidebar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import NewMenuButton from "./NewMenuButton";
 import GitHubLinks from "./shared/GitHubLinks";
 import FolderTree from "./FolderTree";
@@ -93,9 +94,18 @@ export default function Sidebar({
       >
         <SheetContent
           side="left"
-          className="w-64 gap-0 bg-sidebar p-2 pt-14 text-sidebar-foreground sm:max-w-64"
+          className="w-64 gap-0 bg-sidebar p-2 text-sidebar-foreground sm:max-w-64"
         >
           <SheetTitle className="sr-only">Navigation</SheetTitle>
+          <div className="flex items-center justify-center py-3">
+            <Image
+              src="/file-manager-logo.svg"
+              alt="Solid File Manager"
+              width={48}
+              height={48}
+              className="h-12 w-12"
+            />
+          </div>
           <SidebarNav {...navProps} />
         </SheetContent>
       </Sheet>