feat: add configurable headers and instance branding (#6690)

apps/nextjs/src/components/layout/constants.ts

@@ -1 +1,2 @@
 export const appShellHeaderHeight = 60;
+export const appShellLogoHeight = appShellHeaderHeight - 8;

apps/nextjs/src/components/layout/header.tsx

@@ -1,49 +1,45 @@
 import type { ReactNode } from "react";
-import { AppShellHeader, Group, UnstyledButton } from "@mantine/core";
+import { auth } from "@homarr/auth/next";
+import { env } from "@homarr/docker/env";
 
-import { Link } from "@homarr/ui";
-
-import { ClientBurger } from "./header/burger";
-import { DesktopSearchInput, MobileSearchButton } from "./header/search";
-import { TourTarget } from "./header/tour-target";
-import { UserButton } from "./header/user";
-import { HomarrLogoWithTitle } from "./logo/homarr-logo";
-import { LazySpotlight } from "./header/lazy-spotlight";
+import { CurrentUserAvatar } from "~/components/user-avatar";
+import { appShellLogoHeight } from "./constants";
+import { ConfigurableHeader } from "./header/configurable-header";
+import { HomarrLogo, HomarrLogoWithTitle } from "./logo/homarr-logo";
 
 interface Props {
   logo?: ReactNode;
+  logoWithTitle?: ReactNode;
   actions?: ReactNode;
+  boardEditAction?: ReactNode;
+  boardSettingsAction?: ReactNode;
   hasNavigation?: boolean;
 }
 
-export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
+export const MainHeader = async ({
+  logo,
+  logoWithTitle,
+  actions,
+  boardEditAction,
+  boardSettingsAction,
+  hasNavigation = true,
+}: Props) => {
+  const session = await auth();
+  const isAdmin = Boolean(session?.user.permissions.includes("admin"));
+  const isDockerEnabled = isAdmin && env.ENABLE_DOCKER;
+
   return (
-    <AppShellHeader
-      maw="100vw"
-      zIndex="var(--homarr-z-index-board-header)"
-      style={{ overflowX: "hidden" }}
-      data-advanced-focus-background
-      data-app-shell-header
-    >
-      <Group h="100%" gap="xl" px="md" justify="apart" wrap="nowrap">
-        <Group h="100%" align="center" style={{ flex: 1 }} wrap="nowrap">
-          {hasNavigation && <ClientBurger />}
-          <UnstyledButton component={Link} href="/">
-            {logo ?? <HomarrLogoWithTitle size="md" />}
-          </UnstyledButton>
-        </Group>
-        <TourTarget id="board-search">
-          <DesktopSearchInput />
-        </TourTarget>
-        <Group h="100%" align="center" justify="end" style={{ flex: 1 }} wrap="nowrap">
-          {actions}
-          <MobileSearchButton />
-          <TourTarget id="board-user-menu">
-            <UserButton />
-          </TourTarget>
-        </Group>
-      </Group>
-      <LazySpotlight />
-    </AppShellHeader>
+    <ConfigurableHeader
+      logo={logo ?? <HomarrLogo size={appShellLogoHeight} />}
+      logoWithTitle={logoWithTitle ?? <HomarrLogoWithTitle size="md" />}
+      actions={actions}
+      boardEditAction={boardEditAction}
+      boardSettingsAction={boardSettingsAction}
+      hasNavigation={hasNavigation}
+      avatar={<CurrentUserAvatar size="md" />}
+      userId={session?.user.id ?? null}
+      isAdmin={isAdmin}
+      isDockerEnabled={isDockerEnabled}
+    />
   );
 };

apps/nextjs/src/components/layout/header/configurable-header.module.css

@@ -0,0 +1,142 @@
+.header {
+  overflow: hidden;
+}
+
+.content {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  width: 100%;
+  height: 100%;
+  padding-inline: var(--mantine-spacing-md);
+}
+
+.zone {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.zone::-webkit-scrollbar {
+  display: none;
+}
+
+.zone[data-zone="left"] {
+  justify-content: flex-start;
+}
+
+.zone[data-zone="center"] {
+  justify-content: center;
+}
+
+.zone[data-zone="right"] {
+  justify-content: flex-end;
+}
+
+.search {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.search[data-display="icon"] {
+  width: 2.25rem;
+  flex: 0 0 2.25rem;
+}
+
+.search > * {
+  max-width: 100%;
+}
+
+.zone [data-tour-target="board-search"] {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.contextActions {
+  flex: 0 0 auto;
+}
+
+.floatingControls {
+  position: fixed;
+  z-index: var(--homarr-z-index-board-header);
+  top: max(rem(10px), env(safe-area-inset-top));
+  right: max(rem(10px), env(safe-area-inset-right));
+  padding: rem(8px);
+  border: rem(1px) solid color-mix(in srgb, var(--mantine-color-default-border) 70%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--mantine-color-body) 58%, transparent);
+  box-shadow: 0 rem(12px) rem(36px) rgb(0 0 0 / 20%);
+  backdrop-filter: blur(rem(20px)) saturate(140%);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(rem(-8px)) scale(0.98);
+  transition:
+    opacity 160ms ease,
+    transform 180ms ease;
+}
+
+.floatingControls[data-visible="true"],
+.floatingControls:focus-within {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+.floatingControls button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.floatingControlsCorner {
+  position: fixed;
+  z-index: calc(var(--homarr-z-index-board-header) - 1);
+  top: 0;
+  right: 0;
+  width: rem(112px);
+  height: rem(112px);
+  pointer-events: none;
+}
+
+.floatingControlsCorner[data-active="true"] {
+  pointer-events: auto;
+}
+
+@media (max-width: $mantine-breakpoint-sm) {
+  .content {
+    gap: var(--mantine-spacing-xs);
+    padding-inline: var(--mantine-spacing-xs);
+  }
+
+  .zone {
+    gap: var(--mantine-spacing-xs);
+  }
+
+  .search {
+    width: auto;
+    flex: 0 0 auto;
+  }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .floatingControls {
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+  }
+
+  .floatingControlsCorner {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .floatingControls {
+    transition: none;
+  }
+}

apps/nextjs/src/components/layout/header/configurable-header.tsx

@@ -0,0 +1,418 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  AppShellHeader,
+  Avatar,
+  Group,
+  Indicator,
+  Loader,
+  Tooltip,
+  useMantineColorScheme,
+} from "@mantine/core";
+import {
+  IconBrandDocker,
+  IconHome,
+  IconLayoutDashboard,
+  IconReplace,
+  IconRobot,
+  IconSettings,
+  IconSunMoon,
+} from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { invariantTechnicalLabels } from "@homarr/definitions";
+import { useModalAction } from "@homarr/modals";
+import { useSettings } from "@homarr/settings";
+import { useI18n } from "@homarr/translation/client";
+import type { HeaderItem } from "@homarr/validation/user";
+import { getHeaderItemKey, getHeaderItems } from "@homarr/validation/user";
+
+import { useOptionalHomarrAssistant } from "~/components/assistant/assistant-context";
+import { BoardSwitcher } from "~/components/board/board-switcher";
+import type { BoardSwitcherControls } from "~/components/board/board-switcher";
+import { ClientBurger } from "./burger";
+import { HeaderButton } from "./button";
+import { DockerQuickAccessModal } from "./docker-quick-access-modal";
+import { HeaderLogo } from "./header-logo";
+import { LazySpotlight } from "./lazy-spotlight";
+import { DesktopSearchInput, MobileSearchButton } from "./search";
+import { TourTarget } from "./tour-target";
+import { UserButtonClient } from "./user-client";
+import classes from "./configurable-header.module.css";
+
+interface ConfigurableHeaderProps {
+  logo: ReactNode;
+  logoWithTitle: ReactNode;
+  actions?: ReactNode;
+  boardEditAction?: ReactNode;
+  boardSettingsAction?: ReactNode;
+  hasNavigation: boolean;
+  avatar: ReactNode;
+  userId: string | null;
+  isAdmin: boolean;
+  isDockerEnabled: boolean;
+}
+
+type HeaderBoard = RouterOutputs["board"]["getAllBoards"][number];
+
+const floatingControlsIntroDurationMs = 5_000;
+const floatingControlsDismissDelayMs = 900;
+
+export const ConfigurableHeader = ({
+  logo,
+  logoWithTitle,
+  actions,
+  boardEditAction,
+  boardSettingsAction,
+  hasNavigation,
+  avatar,
+  userId,
+  isAdmin,
+  isDockerEnabled,
+}: ConfigurableHeaderProps) => {
+  const { headerPreferences } = useSettings();
+  const assistant = useOptionalHomarrAssistant();
+  const { toggleColorScheme } = useMantineColorScheme();
+  const { openModal: openDockerModal } = useModalAction(DockerQuickAccessModal);
+  const t = useI18n("management.page.user.setting.general.header");
+  const allHeaderItems = getHeaderItems(headerPreferences.zones);
+  const hasBoardShortcuts = allHeaderItems.some((item) => item.type === "board");
+  const { data: boards = [] } = clientApi.board.getAllBoards.useQuery(undefined, {
+    enabled: hasBoardShortcuts,
+    staleTime: 60_000,
+  });
+  const boardsById = useMemo(() => new Map(boards.map((board) => [board.id, board])), [boards]);
+
+  return (
+    <BoardSwitcher>
+      {(boardSwitcher) => {
+        const renderItems = (items: HeaderItem[]) =>
+          items.map((item) => (
+            <HeaderItem
+              key={getHeaderItemKey(item)}
+              item={item}
+              logo={logo}
+              logoWithTitle={logoWithTitle}
+              boardEditAction={boardEditAction}
+              boardSettingsAction={boardSettingsAction}
+              avatar={avatar}
+              userId={userId}
+              isAdmin={isAdmin}
+              isDockerEnabled={isDockerEnabled}
+              board={item.type === "board" ? boardsById.get(item.boardId) : undefined}
+              searchDisplay={headerPreferences.searchDisplay}
+              logoDisplay={headerPreferences.logoDisplay}
+              boardSwitcher={boardSwitcher}
+              assistant={assistant}
+              openDockerModal={openDockerModal}
+              toggleColorScheme={toggleColorScheme}
+              label={(key) => t(`items.${key}` as never)}
+              boardUnavailableLabel={t("items.boardUnavailable")}
+            />
+          ));
+
+        return (
+          <>
+            {headerPreferences.visible ? (
+              <AppShellHeader
+                maw="100vw"
+                zIndex="var(--homarr-z-index-board-header)"
+                className={classes.header}
+                data-advanced-focus-background
+                data-app-shell-header
+              >
+                <div className={classes.content}>
+                  <div className={classes.zone} data-zone="left">
+                    {hasNavigation ? <ClientBurger /> : null}
+                    {renderItems(headerPreferences.zones.left)}
+                  </div>
+                  <div className={classes.zone} data-zone="center">
+                    {renderItems(headerPreferences.zones.center)}
+                  </div>
+                  <div className={classes.zone} data-zone="right">
+                    {renderItems(headerPreferences.zones.right)}
+                    {actions ? <Group className={classes.contextActions}>{actions}</Group> : null}
+                  </div>
+                </div>
+              </AppShellHeader>
+            ) : (
+              <FloatingHeaderControls>
+                {hasNavigation ? <ClientBurger /> : null}
+                <UserButtonClient
+                  avatar={avatar}
+                  isAdmin={isAdmin}
+                  isDockerEnabled={isDockerEnabled}
+                  boardSwitcher={boardSwitcher}
+                />
+              </FloatingHeaderControls>
+            )}
+            <LazySpotlight />
+          </>
+        );
+      }}
+    </BoardSwitcher>
+  );
+};
+
+const FloatingHeaderControls = ({ children }: { children: ReactNode }) => {
+  const [isIntroComplete, setIsIntroComplete] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const isInteractingRef = useRef(false);
+  const dismissTimeoutRef = useRef<number | null>(null);
+
+  const clearDismissTimeout = () => {
+    if (dismissTimeoutRef.current === null) return;
+    window.clearTimeout(dismissTimeoutRef.current);
+    dismissTimeoutRef.current = null;
+  };
+
+  const dismissSoon = () => {
+    if (!isIntroComplete) return;
+    clearDismissTimeout();
+    dismissTimeoutRef.current = window.setTimeout(() => {
+      if (!isInteractingRef.current) setIsVisible(false);
+    }, floatingControlsDismissDelayMs);
+  };
+
+  const revealFromCorner = () => {
+    if (!isIntroComplete) return;
+    clearDismissTimeout();
+    setIsVisible(true);
+  };
+
+  const startInteraction = () => {
+    isInteractingRef.current = true;
+    clearDismissTimeout();
+    setIsVisible(true);
+  };
+
+  const endInteraction = () => {
+    isInteractingRef.current = false;
+    dismissSoon();
+  };
+
+  useEffect(() => {
+    const introTimeout = window.setTimeout(() => {
+      setIsIntroComplete(true);
+      if (!isInteractingRef.current) setIsVisible(false);
+    }, floatingControlsIntroDurationMs);
+
+    return () => {
+      window.clearTimeout(introTimeout);
+      if (dismissTimeoutRef.current !== null) window.clearTimeout(dismissTimeoutRef.current);
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        className={classes.floatingControlsCorner}
+        data-active={isIntroComplete || undefined}
+        aria-hidden
+        onPointerEnter={revealFromCorner}
+        onPointerMove={revealFromCorner}
+        onPointerDown={revealFromCorner}
+        onPointerLeave={dismissSoon}
+      />
+      <Group
+        className={classes.floatingControls}
+        data-visible={isVisible || undefined}
+        gap={4}
+        wrap="nowrap"
+        onPointerEnter={startInteraction}
+        onPointerLeave={endInteraction}
+        onFocusCapture={startInteraction}
+        onBlurCapture={(event) => {
+          if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;
+          endInteraction();
+        }}
+      >
+        {children}
+      </Group>
+    </>
+  );
+};
+
+interface HeaderItemProps {
+  item: HeaderItem;
+  logo: ReactNode;
+  logoWithTitle: ReactNode;
+  boardEditAction: ReactNode;
+  boardSettingsAction: ReactNode;
+  avatar: ReactNode;
+  userId: string | null;
+  isAdmin: boolean;
+  isDockerEnabled: boolean;
+  board: HeaderBoard | undefined;
+  searchDisplay: "input" | "icon";
+  logoDisplay: "logo" | "logoAndText";
+  boardSwitcher: BoardSwitcherControls;
+  assistant: ReturnType<typeof useOptionalHomarrAssistant>;
+  openDockerModal: () => void;
+  toggleColorScheme: () => void;
+  label: (key: string) => string;
+  boardUnavailableLabel: string;
+}
+
+const HeaderItem = ({
+  item,
+  logo,
+  logoWithTitle,
+  boardEditAction,
+  boardSettingsAction,
+  avatar,
+  userId,
+  isAdmin,
+  isDockerEnabled,
+  board,
+  searchDisplay,
+  logoDisplay,
+  boardSwitcher,
+  assistant,
+  openDockerModal,
+  toggleColorScheme,
+  label,
+  boardUnavailableLabel,
+}: HeaderItemProps) => {
+  if (item.type === "board") {
+    if (!board) {
+      return (
+        <Tooltip label={boardUnavailableLabel}>
+          <HeaderButton aria-label={boardUnavailableLabel} disabled>
+            <IconLayoutDashboard size={20} stroke={1.5} />
+          </HeaderButton>
+        </Tooltip>
+      );
+    }
+    return (
+      <Tooltip label={board.name}>
+        <HeaderButton href={`/boards/${encodeURIComponent(board.name)}`} aria-label={board.name}>
+          <Avatar src={board.logoImageUrl} size={22} radius="sm">
+            <IconLayoutDashboard size={17} stroke={1.5} />
+          </Avatar>
+        </HeaderButton>
+      </Tooltip>
+    );
+  }
+
+  if (item.id === "logo") {
+    return (
+      <HeaderLogo
+        display={logoDisplay}
+        logo={logo}
+        logoWithTitle={logoWithTitle}
+        label={label("logo")}
+      />
+    );
+  }
+
+  if (item.id === "boardEdit") return boardEditAction;
+  if (item.id === "boardSettings") return boardSettingsAction;
+
+  if (item.id === "search") {
+    return (
+      <TourTarget id="board-search">
+        <div className={classes.search} data-display={searchDisplay}>
+          {searchDisplay === "input" ? (
+            <>
+              <DesktopSearchInput />
+              <MobileSearchButton />
+            </>
+          ) : (
+            <MobileSearchButton alwaysVisible />
+          )}
+        </div>
+      </TourTarget>
+    );
+  }
+
+  if (item.id === "home") {
+    return (
+      <Tooltip label={label("home")}>
+        <HeaderButton href="/boards" aria-label={label("home")}>
+          <IconHome size={20} stroke={1.5} />
+        </HeaderButton>
+      </Tooltip>
+    );
+  }
+
+  if (item.id === "boardSwitcher") {
+    return (
+      <Tooltip label={label("boardSwitcher")}>
+        <HeaderButton
+          aria-label={label("boardSwitcher")}
+          onClick={boardSwitcher.open}
+          onFocus={boardSwitcher.preload}
+          onPointerEnter={boardSwitcher.preload}
+        >
+          <IconReplace size={20} stroke={1.5} />
+        </HeaderButton>
+      </Tooltip>
+    );
+  }
+
+  if (item.id === "assistant") {
+    if (!assistant?.enabled) return null;
+    return (
+      <Tooltip label={label("assistant")}>
+        <Indicator
+          inline
+          disabled={!assistant.isRunning && assistant.unreadCount === 0}
+          color="red"
+          size={16}
+          label={assistant.isRunning ? <Loader type="bars" color="white" size={8} /> : assistant.unreadCount}
+        >
+          <HeaderButton aria-label={label("assistant")} onClick={assistant.open}>
+            <IconRobot size={20} stroke={1.5} />
+          </HeaderButton>
+        </Indicator>
+      </Tooltip>
+    );
+  }
+
+  if (item.id === "docker") {
+    if (!isDockerEnabled) return null;
+    return (
+      <Tooltip label={invariantTechnicalLabels.docker}>
+        <HeaderButton aria-label={invariantTechnicalLabels.docker} onClick={openDockerModal}>
+          <IconBrandDocker size={20} stroke={1.5} />
+        </HeaderButton>
+      </Tooltip>
+    );
+  }
+
+  if (item.id === "settings") {
+    const href = userId ? `/manage/users/${userId}/general` : "/auth/login";
+    return (
+      <Tooltip label={label("settings")}>
+        <HeaderButton href={href} aria-label={label("settings")}>
+          <IconSettings size={20} stroke={1.5} />
+        </HeaderButton>
+      </Tooltip>
+    );
+  }
+
+  if (item.id === "themeToggle") {
+    return (
+      <Tooltip label={label("themeToggle")}>
+        <HeaderButton aria-label={label("themeToggle")} onClick={toggleColorScheme}>
+          <IconSunMoon size={20} stroke={1.5} />
+        </HeaderButton>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <TourTarget id="board-user-menu">
+      <UserButtonClient
+        avatar={avatar}
+        isAdmin={isAdmin}
+        isDockerEnabled={isDockerEnabled}
+        boardSwitcher={boardSwitcher}
+      />
+    </TourTarget>
+  );
+};

apps/nextjs/src/components/layout/header/header-logo.module.css

@@ -0,0 +1,22 @@
+.root {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  border-radius: var(--mantine-radius-md);
+}
+
+.root[data-display="logo"] {
+  justify-content: center;
+  width: calc(var(--app-shell-header-height) - 0.5rem);
+  height: calc(var(--app-shell-header-height) - 0.5rem);
+  overflow: hidden;
+}
+
+.root[data-display="logo"] img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: calc(var(--app-shell-header-height) - 0.5rem);
+  object-fit: contain;
+}

apps/nextjs/src/components/layout/header/header-logo.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { UnstyledButton } from "@mantine/core";
+
+import { Link } from "@homarr/ui";
+
+import classes from "./header-logo.module.css";
+
+interface HeaderLogoProps {
+  display: "logo" | "logoAndText";
+  logo: ReactNode;
+  logoWithTitle: ReactNode;
+  label: string;
+}
+
+export const HeaderLogo = ({ display, logo, logoWithTitle, label }: HeaderLogoProps) => {
+  let content = logo;
+  if (display === "logoAndText") content = logoWithTitle;
+
+  return (
+    <UnstyledButton
+      component={Link}
+      href="/"
+      className={classes.root}
+      data-display={display}
+      aria-label={label}
+    >
+      {content}
+    </UnstyledButton>
+  );
+};

apps/nextjs/src/components/layout/header/search.tsx

@@ -28,12 +28,14 @@ export const DesktopSearchInput = () => {
   );
 };
 
-export const MobileSearchButton = () => {
+export const MobileSearchButton = ({ alwaysVisible = false }: { alwaysVisible?: boolean }) => {
+  const t = useI18n();
   return (
     <HeaderButton
       data-homarr-dev-benchmark-interaction="search"
       onClick={() => openSpotlight()}
-      className={classes.mobileSearch}
+      className={alwaysVisible ? undefined : classes.mobileSearch}
+      aria-label={t("search.placeholder")}
     >
       <IconSearch size={20} stroke={1.5} />
     </HeaderButton>

apps/nextjs/src/components/layout/header/user-client.tsx

@@ -8,18 +8,22 @@ import { useHotkeys } from "@mantine/hooks";
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { hotkeys } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
 
 import { UserAvatarMenu } from "~/components/user-avatar-menu";
+import type { BoardSwitcherControls } from "~/components/board/board-switcher";
 import { UpdateIndicator } from "./update";
 
 interface UserButtonClientProps {
   avatar: ReactNode;
   isAdmin: boolean;
   isDockerEnabled: boolean;
+  boardSwitcher: BoardSwitcherControls;
 }
 
-export const UserButtonClient = ({ avatar, isAdmin, isDockerEnabled }: UserButtonClientProps) => {
+export const UserButtonClient = ({ avatar, isAdmin, isDockerEnabled, boardSwitcher }: UserButtonClientProps) => {
   const [canCheckForUpdates, setCanCheckForUpdates] = useState(false);
+  const t = useI18n("common.userAvatar.menu");
   const session = useSession();
   const { toggleColorScheme } = useMantineColorScheme();
   useHotkeys([[hotkeys.toggleColorScheme, toggleColorScheme]]);
@@ -45,8 +49,8 @@ export const UserButtonClient = ({ avatar, isAdmin, isDockerEnabled }: UserButto
   const visibleUpdates = isCurrentSessionAdmin ? availableUpdates : undefined;
 
   return (
-    <UserAvatarMenu availableUpdates={visibleUpdates} isDockerEnabled={isDockerEnabled}>
-      <UnstyledButton>
+    <UserAvatarMenu availableUpdates={visibleUpdates} isDockerEnabled={isDockerEnabled} boardSwitcher={boardSwitcher}>
+      <UnstyledButton aria-label={t("open")}>
         <UpdateIndicator availableUpdates={visibleUpdates} disabled={!isCurrentSessionAdmin}>
           {avatar}
         </UpdateIndicator>

apps/nextjs/src/components/layout/header/user.tsx

@@ -2,13 +2,19 @@ import { auth } from "@homarr/auth/next";
 import { env } from "@homarr/docker/env";
 
 import { CurrentUserAvatar } from "~/components/user-avatar";
+import type { BoardSwitcherControls } from "~/components/board/board-switcher";
 import { UserButtonClient } from "./user-client";
 
-export const UserButton = async () => {
+export const UserButton = async ({ boardSwitcher }: { boardSwitcher: BoardSwitcherControls }) => {
   const session = await auth();
   const isAdmin = Boolean(session?.user.permissions.includes("admin"));
   const isDockerEnabled = isAdmin && env.ENABLE_DOCKER;
   return (
-    <UserButtonClient avatar={<CurrentUserAvatar size="md" />} isAdmin={isAdmin} isDockerEnabled={isDockerEnabled} />
+    <UserButtonClient
+      avatar={<CurrentUserAvatar size="md" />}
+      isAdmin={isAdmin}
+      isDockerEnabled={isDockerEnabled}
+      boardSwitcher={boardSwitcher}
+    />
   );
 };

apps/nextjs/src/components/layout/logo/board-logo.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { useRequiredBoard } from "@homarr/boards/context";
+import { useSettings } from "@homarr/settings";
 
-import { homarrLogoPath, homarrPageTitle } from "./homarr-logo";
+import { homarrLogoPath } from "./constants";
 import type { LogoWithTitleProps } from "./logo";
 import { Logo, LogoWithTitle } from "./logo";
 
@@ -12,8 +13,9 @@ interface LogoProps {
 
 const useImageOptions = () => {
   const board = useRequiredBoard();
+  const { branding } = useSettings();
   return {
-    src: board.logoImageUrl ?? homarrLogoPath,
+    src: board.logoImageUrl?.trim() || branding.logoImageUrl?.trim() || homarrLogoPath,
     alt: "Board logo",
     shouldUseNextImage: false,
   };
@@ -31,12 +33,13 @@ interface CommonLogoWithTitleProps {
 
 export const BoardLogoWithTitle = ({ size, hideTitleOnMobile }: CommonLogoWithTitleProps) => {
   const board = useRequiredBoard();
+  const { branding } = useSettings();
   const imageOptions = useImageOptions();
   return (
     <LogoWithTitle
       size={size}
       hideTitleOnMobile={hideTitleOnMobile}
-      title={board.pageTitle ?? homarrPageTitle}
+      title={board.pageTitle ?? branding.appName}
       image={imageOptions}
     />
   );

apps/nextjs/src/components/layout/logo/constants.ts

@@ -0,0 +1 @@
+export const homarrLogoPath = "/logo/logo.png";

apps/nextjs/src/components/layout/logo/homarr-logo.tsx

@@ -1,25 +1,39 @@
+"use client";
+
+import { useSettings } from "@homarr/settings";
+
 import type { LogoWithTitleProps } from "./logo";
 import { Logo, LogoWithTitle } from "./logo";
+import { homarrLogoPath } from "./constants";
 
 interface LogoProps {
   size: number;
 }
 
-export const homarrLogoPath = "/logo/logo.png";
-export const homarrPageTitle = "Homarr";
-
-const imageOptions = {
-  src: homarrLogoPath,
-  alt: "Homarr logo",
-  shouldUseNextImage: true,
+const useBrandLogo = () => {
+  const { branding } = useSettings();
+  const configuredLogoUrl = branding.logoImageUrl?.trim();
+  return {
+    title: branding.appName,
+    image: {
+      src: configuredLogoUrl || homarrLogoPath,
+      alt: `${branding.appName} logo`,
+      shouldUseNextImage: !configuredLogoUrl,
+    },
+  };
 };
 
-export const HomarrLogo = ({ size }: LogoProps) => <Logo size={size} {...imageOptions} />;
+export const HomarrLogo = ({ size }: LogoProps) => {
+  const brand = useBrandLogo();
+  return <Logo size={size} {...brand.image} />;
+};
 
 interface CommonLogoWithTitleProps {
   size: LogoWithTitleProps["size"];
+  hideTitleOnMobile?: boolean;
 }
 
-export const HomarrLogoWithTitle = ({ size }: CommonLogoWithTitleProps) => {
-  return <LogoWithTitle size={size} title={homarrPageTitle} image={imageOptions} />;
+export const HomarrLogoWithTitle = ({ size, hideTitleOnMobile }: CommonLogoWithTitleProps) => {
+  const brand = useBrandLogo();
+  return <LogoWithTitle size={size} title={brand.title} image={brand.image} hideTitleOnMobile={hideTitleOnMobile} />;
 };

apps/nextjs/src/components/layout/logo/logo.tsx

@@ -9,14 +9,18 @@ interface LogoProps {
   shouldUseNextImage?: boolean;
 }
 
-export const Logo = ({ size = 60, shouldUseNextImage = false, src, alt }: LogoProps) =>
-  shouldUseNextImage ? (
-    <Image className="logo" src={src} alt={alt} width={size} height={size} />
+export const Logo = ({ size = 60, shouldUseNextImage = false, src, alt }: LogoProps) => {
+  const normalizedSrc = src.trim();
+  if (normalizedSrc.length === 0) return null;
+
+  return shouldUseNextImage ? (
+    <Image className="logo" src={normalizedSrc} alt={alt} width={size} height={size} />
   ) : (
     // we only want to use next/image for logos that we are sure will be preloaded and are allowed
     // eslint-disable-next-line @next/next/no-img-element
-    <img className="logo" src={src} alt={alt} width={size} height={size} />
+    <img className="logo" src={normalizedSrc} alt={alt} width={size} height={size} />
   );
+};
 
 const logoWithTitleSizes = {
   lg: { logoSize: 48, titleOrder: 1 },

apps/nextjs/src/components/layout/navigation-link.tsx

@@ -15,7 +15,17 @@ export const CommonNavLink = (props: ClientNavigationLink) =>
 const withOptionalTourTarget = (id: string | undefined, children: ReactElement) =>
   id ? <TourTarget id={id}>{children}</TourTarget> : children;
 
-const pathMatches = (pathname: string, href: string) => pathname === href || pathname.startsWith(`${href}/`);
+const pathMatches = (pathname: string, href: string, exact = false) => {
+  if (pathname === href) return true;
+  if (exact) return false;
+  return pathname.startsWith(`${href}/`);
+};
+
+const getMostSpecificMatchingHref = (pathname: string, items: NavigationLinkHref[]) =>
+  items
+    .filter((item) => pathMatches(pathname, item.href, item.exact))
+    .toSorted((first, second) => second.href.length - first.href.length)
+    .at(0)?.href;
 
 const useClientPathname = () => {
   const pathname = usePathname();
@@ -31,6 +41,7 @@ const useClientPathname = () => {
 const NavLinkHref = (props: NavigationLinkHref) => {
   const { pathname, isClient } = useClientPathname();
   const tourId = props["data-onboarding-tour-id"];
+  const isActive = props.active ?? (isClient && pathMatches(pathname, props.href, props.exact));
   const link = props.external ? (
     <NavLink component="a" label={props.label} leftSection={props.icon} href={props.href} target="_blank" />
   ) : (
@@ -39,7 +50,7 @@ const NavLinkHref = (props: NavigationLinkHref) => {
       label={props.label}
       leftSection={props.icon}
       href={props.href}
-      active={isClient && pathMatches(pathname, props.href)}
+      active={isActive}
     />
   );
   return withOptionalTourTarget(tourId, link);
@@ -47,11 +58,18 @@ const NavLinkHref = (props: NavigationLinkHref) => {
 
 const NavLinkWithItems = (props: NavigationLinkWithItems) => {
   const { pathname, isClient } = useClientPathname();
-  const isActive = isClient && props.items.some((item) => pathMatches(pathname, item.href));
+  const activeItemHref = getMostSpecificMatchingHref(pathname, props.items);
+  const isActive = isClient && activeItemHref !== undefined;
+  const [opened, setOpened] = useState(false);
+
+  useEffect(() => {
+    if (isActive) setOpened(true);
+  }, [isActive]);
+
   const nav = (
-    <NavLink label={props.label} leftSection={props.icon} defaultOpened={isActive}>
+    <NavLink label={props.label} leftSection={props.icon} active={isActive} opened={opened} onChange={setOpened}>
       {props.items.map((item) => (
-        <NavLinkHref key={item.label} {...item} />
+        <NavLinkHref key={item.label} {...item} active={isClient && activeItemHref === item.href} />
       ))}
     </NavLink>
   );
@@ -67,6 +85,8 @@ interface CommonNavigationLinkProps {
 interface NavigationLinkHref extends CommonNavigationLinkProps {
   href: string;
   external?: boolean;
+  exact?: boolean;
+  active?: boolean;
 }
 interface NavigationLinkWithItems extends CommonNavigationLinkProps {
   items: NavigationLinkHref[];

apps/nextjs/src/components/layout/navigation.tsx

@@ -72,6 +72,7 @@ interface CommonNavigationLinkProps {
 interface NavigationLinkHref extends CommonNavigationLinkProps {
   href: string;
   external?: boolean;
+  exact?: boolean;
 }
 interface NavigationLinkWithItems extends CommonNavigationLinkProps {
   items: NavigationLinkHref[];

apps/nextjs/src/components/layout/shell.tsx

@@ -3,6 +3,7 @@
 import type { PropsWithChildren } from "react";
 import { AppShell } from "@mantine/core";
 import { useAtomValue } from "jotai";
+import { useSettings } from "@homarr/settings";
 
 import { useOptionalBackgroundProps } from "./background";
 import { appShellHeaderHeight } from "./constants";
@@ -20,11 +21,13 @@ export const ClientShell = ({
 }: PropsWithChildren<ClientShellProps>) => {
   const collapsed = useAtomValue(navigationCollapsedAtom);
   const backgroundProps = useOptionalBackgroundProps();
+  const { headerPreferences } = useSettings();
+  const isHeaderVisible = hasHeader && headerPreferences.visible;
 
   return (
     <AppShell
       {...backgroundProps}
-      header={hasHeader ? { height: appShellHeaderHeight } : undefined}
+      header={isHeaderVisible ? { height: appShellHeaderHeight } : undefined}
       navbar={
         hasNavigation
           ? {