-
diff --git a/packages/layout/slots/HeaderTools/Actions.tsx b/packages/layout/slots/HeaderTools/Actions.tsx
new file mode 100644
index 00000000000..0b75888a46a
--- /dev/null
+++ b/packages/layout/slots/HeaderTools/Actions.tsx
@@ -0,0 +1,10 @@
+import { Link } from '@plone/components';
+import { useTranslation } from 'react-i18next';
+
+const Actions = () => {
+ const { t } = useTranslation();
+
+ return
{t('layout.slots.tools.actions.logout')};
+};
+
+export default Actions;
diff --git a/packages/layout/slots/HeaderTools/AnonymousTools.tsx b/packages/layout/slots/HeaderTools/AnonymousTools.tsx
new file mode 100644
index 00000000000..4add55cfe9b
--- /dev/null
+++ b/packages/layout/slots/HeaderTools/AnonymousTools.tsx
@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+import type { SlotComponentProps } from '../SlotRenderer';
+import { useTranslation } from 'react-i18next';
+import { Link } from '@plone/components';
+import config from '@plone/registry';
+import styles from './Tools.module.css';
+
+const AnonymousTools = (props: SlotComponentProps) => {
+ const { content } = props;
+ const { t } = useTranslation();
+
+ const returnUrl = content['@id'];
+ const hasReturnUrl = returnUrl !== '' && returnUrl !== '/';
+
+ return (
+
+
+ {t('layout.slots.tools.anonymousTools.login')}
+
+ {config.settings.showSelfRegistration && (
+
+ {t('layout.slots.tools.anonymousTools.register')}
+
+ )}
+
+ );
+};
+
+export default AnonymousTools;
diff --git a/packages/layout/slots/HeaderTools/HeaderTools.tsx b/packages/layout/slots/HeaderTools/HeaderTools.tsx
new file mode 100644
index 00000000000..f36a8b4cb34
--- /dev/null
+++ b/packages/layout/slots/HeaderTools/HeaderTools.tsx
@@ -0,0 +1,36 @@
+import SlotRenderer, { type SlotComponentProps } from '../SlotRenderer';
+import { useRouteLoaderData } from 'react-router';
+import type { RootLoader } from 'seven/app/root';
+
+const HeaderTools = (props: SlotComponentProps) => {
+ const rootData = useRouteLoaderData
('root');
+
+ if (!rootData) {
+ return null;
+ }
+
+ const { isAuthenticated } = rootData;
+ const { content, location } = props;
+
+ return (
+ <>
+ {isAuthenticated ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+};
+
+export default HeaderTools;
diff --git a/packages/layout/slots/HeaderTools/SearchWidget.tsx b/packages/layout/slots/HeaderTools/SearchWidget.tsx
new file mode 100644
index 00000000000..2288c66b946
--- /dev/null
+++ b/packages/layout/slots/HeaderTools/SearchWidget.tsx
@@ -0,0 +1,39 @@
+import { Form, Input, Label, TextField } from 'react-aria-components';
+import type { SlotComponentProps } from '../SlotRenderer';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@plone/components';
+import Search from '@plone/components/icons/search.svg?react';
+import styles from './Tools.module.css';
+import clsx from 'clsx';
+
+const SearchWidget = (props: SlotComponentProps) => {
+ const { location } = props;
+
+ const { t } = useTranslation();
+ const pathname = location.pathname;
+ const hasPath = pathname?.length > 0 && pathname !== '/';
+
+ return (
+
+ );
+};
+
+export default SearchWidget;
diff --git a/packages/layout/slots/HeaderTools/Tools.module.css b/packages/layout/slots/HeaderTools/Tools.module.css
new file mode 100644
index 00000000000..72c7a1535e1
--- /dev/null
+++ b/packages/layout/slots/HeaderTools/Tools.module.css
@@ -0,0 +1,53 @@
+@layer custom {
+ .anonymoustools {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .searchwidget {
+ display: flex;
+ flex-direction: row-reverse;
+ border: 2px solid transparent;
+ border-radius: 8px;
+ gap: 2px;
+
+ &:focus-within,
+ &:hover {
+ border: 2px solid var(--border);
+ }
+
+ input {
+ max-width: 200px;
+ height: 100%;
+ padding: 2px 8px;
+ border-radius: 0 8px 8px 0;
+ border-left: 2px solid transparent;
+
+ &:focus-visible {
+ outline: 2px solid var(--quanta-cobalt);
+ }
+ }
+
+ button {
+ box-sizing: content-box;
+ padding: 8px;
+ border-radius: 8px 0 0 8px;
+ background-color: transparent;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:focus {
+ outline: 2px solid var(--quanta-cobalt);
+ outline-offset: 0;
+ }
+
+ svg {
+ opacity: 0.7;
+ }
+ }
+ }
+}
diff --git a/packages/layout/slots/LanguageSwitcher/LanguageSwitcher.tsx b/packages/layout/slots/LanguageSwitcher/LanguageSwitcher.tsx
index 9d98617cfcd..b9f4d2e90db 100644
--- a/packages/layout/slots/LanguageSwitcher/LanguageSwitcher.tsx
+++ b/packages/layout/slots/LanguageSwitcher/LanguageSwitcher.tsx
@@ -39,7 +39,7 @@ const LanguageSwitcher = (props: LanguageSelectorProps) => {
{availableLanguages.map((lang: string) => {
return (
{
- const links = [
- {
- id: '1',
- label: 'login',
- icon: '🔧',
- url: '/login',
- },
- {
- id: '2',
- label: 'logout',
- icon: '🔨',
- url: '/logout',
- },
- ];
- // Inline styles since this is temporary during seven development
- return import.meta.env.DEV ? (
-
- {links.map((tool) => (
-
- {tool.icon}
- {tool.label}
-
- ))}
-
- ) : null;
-};
-
-export default HeaderTools;
diff --git a/packages/layout/styles/header.css b/packages/layout/styles/header.css
index 88b6227ec48..6b2c1fba359 100644
--- a/packages/layout/styles/header.css
+++ b/packages/layout/styles/header.css
@@ -2,55 +2,3 @@
container-name: header;
container-type: inline-size;
}
-
-.section-header {
- .section-inner-container {
- align-items: center;
- grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-
- /* Place the three direct children: logo, navigation, tools */
- > :nth-child(1) {
- /* logo slot */
- grid-column: 1;
- justify-self: start;
- }
- > :nth-child(2) {
- /* navigation slot */
- grid-column: 2;
- justify-self: center; /* ensure centering within the middle column */
- }
- > :nth-child(3) {
- /* tools wrapper */
- display: inline-flex;
- gap: 0.5rem;
- grid-column: 3;
- justify-self: end;
- }
- }
-
- &.header-logo-nav-tools-wrapper {
- --grid-auto-flow: column;
-
- .navigation {
- display: inline-flex;
- align-items: center;
- align-self: center;
- justify-content: center;
- justify-self: center;
- }
- }
-
- &.breadcrumbs {
- ol {
- display: grid;
- gap: 0.5rem;
- grid-auto-flow: column;
- list-style-type: none;
-
- li {
- display: flex;
- align-items: end;
- }
- }
- }
-}
diff --git a/packages/layout/styles/publicui.css b/packages/layout/styles/publicui.css
index 2c099457372..0d10680277d 100644
--- a/packages/layout/styles/publicui.css
+++ b/packages/layout/styles/publicui.css
@@ -16,4 +16,14 @@
figure img {
width: 100%;
}
+
+ .sr-only {
+ position: absolute;
+ overflow: hidden;
+ width: 1px;
+ height: 1px;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ white-space: nowrap;
+ }
}