Fixed sticky header scrolling. Updated settings button.

components/layout/Header.js

@@ -1,38 +1,31 @@
-import { useRouter } from 'next/router';
-import { Column, Row } from 'react-basics';
-import classNames from 'classnames';
-import HamburgerButton from 'components/common/HamburgerButton';
-import UpdateNotice from 'components/common/UpdateNotice';
+import { Column, Icon, Row, Text } from 'react-basics';
+import Link from 'next/link';
 import LanguageButton from 'components/input/LanguageButton';
 import ThemeButton from 'components/input/ThemeButton';
-import UserButton from 'components/input/UserButton';
 import SettingsButton from 'components/input/SettingsButton';
-import useConfig from 'hooks/useConfig';
-import useUser from 'hooks/useUser';
+import Icons from 'components/icons';
 import styles from './Header.module.css';
 
-export default function Header({ className }) {
-  const { user } = useUser();
-  const { pathname } = useRouter();
-  const { updatesDisabled, adminDisabled } = useConfig();
-  const isSharePage = pathname.includes('/share/');
-  const allowUpdate = user?.isAdmin && !updatesDisabled && !isSharePage;
-
+export default function Header() {
   return (
-    <>
-      {allowUpdate && <UpdateNotice />}
-      <header className={classNames(styles.header, className)}>
-        <Row>
-          <Column className={styles.title}></Column>
-          <HamburgerButton />
-          <Column className={styles.buttons}>
-            <ThemeButton />
-            <LanguageButton menuAlign="right" />
-            <SettingsButton />
-            {user && !adminDisabled && <UserButton />}
-          </Column>
-        </Row>
-      </header>
-    </>
+    <header className={styles.header}>
+      <Row>
+        <Column>
+          <Link href="https://umami.is" target="_blank">
+            <a className={styles.title}>
+              <Icon size="lg">
+                <Icons.Logo />
+              </Icon>
+              <Text>umami</Text>
+            </a>
+          </Link>
+        </Column>
+        <Column className={styles.buttons}>
+          <ThemeButton tooltipPosition="bottom" />
+          <LanguageButton tooltipPosition="bottom" menuPosition="bottom" />
+          <SettingsButton />
+        </Column>
+      </Row>
+    </header>
   );
 }

components/layout/Header.module.css

@@ -2,42 +2,24 @@
   display: flex;
   align-items: center;
   width: 100%;
-  height: 50px;
-  border-bottom: 1px solid var(--base300);
+  padding: 30px 30px 0 30px;
 }
 
 .title {
-  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
   font-size: var(--font-size-lg);
   font-weight: 700;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}
-
-.logo {
-  margin-right: 12px;
-}
-
-.links {
-  flex: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--font-size-md);
-  font-weight: 600;
-}
-
-.links a + a {
-  margin-left: 40px;
+  color: var(--font-color100);
 }
 
 .buttons {
-  flex: 1;
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
 }
 
 @media only screen and (max-width: 992px) {

components/layout/ShareLayout.js

@@ -0,0 +1,13 @@
+import { Container } from 'react-basics';
+import Header from './Header';
+import Footer from './Footer';
+
+export default function ShareLayout({ children }) {
+  return (
+    <Container>
+      <Header />
+      {children}
+      <Footer />
+    </Container>
+  );
+}