💄 apple standalone page improvements

2025-11-13 17:05:47 +01:00 · 2022-10-10 20:46:22 +02:00
parent f951bcd750
commit 9aaf5e0dc0
18 changed files with 70 additions and 17 deletions
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -0,0 +1,51 @@
+import { Box, createStyles, Group, Header as Head, useMantineColorScheme } from '@mantine/core';
+import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
+
+import DockerMenuButton from '../../../modules/docker/DockerModule';
+import SearchBar from '../../../modules/search/SearchModule';
+import { SettingsMenuButton } from '../../Settings/SettingsMenu';
+import { Logo } from '../Logo';
+import { useConfig } from '../../../tools/state';
+
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+}));
+
+export function Header(props: any) {
+  const { classes } = useStyles();
+  const { config } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
+
+  return (
+    <Head
+      height="auto"
+      style={{
+        background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+      ${(config.settings.appOpacity || 100) / 100}`,
+        borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+      ${(config.settings.appOpacity || 100) / 100}`,
+      }}
+    >
+      <Group p="xs" position="apart">
+        <Box className={classes.hide}>
+          <Logo style={{ fontSize: 22 }} />
+        </Box>
+        <Group noWrap>
+          <SearchBar />
+          <DockerMenuButton />
+          <SettingsMenuButton />
+          <AddItemShelfButton />
+        </Group>
+      </Group>
+    </Head>
+  );
+}
--- a/src/components/layout/header/HeaderConfig.tsx
+++ b/src/components/layout/header/HeaderConfig.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable react/no-invalid-html-attribute */
+import React from 'react';
+import Head from 'next/head';
+import { useConfig } from '../../../tools/state';
+import { SafariStatusBarStyle } from './safariStatusBarStyle';
+
+export function HeaderConfig(props: any) {
+  const { config } = useConfig();
+
+  return (
+    <Head>
+      <title>{config.settings.title || 'Homarr 🦞'}</title>
+      <link rel="shortcut icon" href={config.settings.favicon || '/imgs/favicon/favicon.svg'} />
+
+      <link rel="manifest" href="/site.webmanifest" />
+
+      {/* configure apple splash screen & touch icon */}
+      <link
+        rel="apple-touch-icon"
+        href={config.settings.favicon || '/imgs/favicon/favicon-squared.png'}
+      />
+      <meta name="apple-mobile-web-app-title" content={config.settings.title || 'Homarr'} />
+
+      <SafariStatusBarStyle />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+    </Head>
+  );
+}
--- a/src/components/layout/header/safariStatusBarStyle.tsx
+++ b/src/components/layout/header/safariStatusBarStyle.tsx
@@ -0,0 +1,13 @@
+import { useMantineTheme } from '@mantine/core';
+
+export const SafariStatusBarStyle = () => {
+  const colorScheme = useMantineTheme();
+
+  const isDark = colorScheme.colorScheme === 'dark';
+
+  if (isDark) {
+    return <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent" />;
+  }
+
+  return <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />;
+};