Header slots

apps/seven/app/root.test.tsx

@@ -19,7 +19,12 @@ async function renderStub() {
       Component: () => (
         <Layout
           params={{}}
-          loaderData={{ locale: 'en', content: {} as any, site: {} as any }}
+          loaderData={{
+            locale: 'en',
+            content: {} as any,
+            site: {} as any,
+            isAuthenticated: false,
+          }}
           matches={[{} as any]}
         >
           <p>Root Layout</p>

apps/seven/app/root.tsx

@@ -14,6 +14,7 @@ import {
   ploneClientContext,
   ploneContentContext,
   ploneSiteContext,
+  ploneUserContext,
 } from './middleware.server';
 import { getClearAuthCookieHeader } from '@plone/react-router';
 
@@ -31,6 +32,7 @@ export async function loader({ params, request, context }: Route.LoaderArgs) {
   const cli = context.get(ploneClientContext);
   const content = context.get(ploneContentContext);
   const site = context.get(ploneSiteContext);
+  const user = context.get(ploneUserContext);
 
   const path = `/${params['*'] || ''}`;
 
@@ -71,6 +73,7 @@ export async function loader({ params, request, context }: Route.LoaderArgs) {
       content,
       site,
       locale,
+      isAuthenticated: user !== null,
       ...rootLoaderDataUtilitiesData
         .filter((item) => item)
         .reduce((acc, item) => ({ ...acc, ...item }), {}),

apps/seven/news/6673.feature

@@ -0,0 +1 @@
+Include `isAuthenticated` boolean in root loader data. @arybakov05

packages/layout/config/slots.ts

@@ -5,11 +5,14 @@ import Footer from '../slots/Footer';
 import Logo from '../slots/Logo/Logo';
 import LanguageSwitcher from '../slots/LanguageSwitcher/LanguageSwitcher';
 import Navigation from '../slots/Navigation/Navigation';
-import HeaderTools from '../slots/Tools';
 import ContentArea from '../slots/ContentArea';
 import MainFooter from '../slots/MainFooter/MainFooter';
 import Breadcrumbs from '../slots/Breadcrumbs';
 import { NotContentTypeCondition } from '../helpers';
+import AnonymousTools from '../slots/HeaderTools/AnonymousTools';
+import HeaderTools from '../slots/HeaderTools/HeaderTools';
+import SearchWidget from '../slots/HeaderTools/SearchWidget';
+import Actions from '../slots/HeaderTools/Actions';
 
 export default function install(config: ConfigType) {
   // Main App Slot
@@ -36,16 +39,34 @@ export default function install(config: ConfigType) {
     component: Navigation,
   });
 
-  // Tools
+  // Header Tools
   config.registerSlotComponent({
-    name: 'Tools',
-    slot: 'headertools',
+    name: 'HeaderTools',
+    slot: 'headerTools',
     component: HeaderTools,
   });
 
+  config.registerSlotComponent({
+    name: 'Actions',
+    slot: 'actions',
+    component: Actions,
+  });
+
+  config.registerSlotComponent({
+    name: 'AnonymousTools',
+    slot: 'anonymousTools',
+    component: AnonymousTools,
+  });
+
+  config.registerSlotComponent({
+    name: 'SearchWidget',
+    slot: 'searchWidget',
+    component: SearchWidget,
+  });
+
   config.registerSlotComponent({
     name: 'Language Switcher',
-    slot: 'language-switcher',
+    slot: 'languageSwitcher',
     component: LanguageSwitcher,
   });
 

packages/layout/locales/de/common.json

@@ -0,0 +1,32 @@
+{
+  "layout": {
+    "slots": {
+      "tools": {
+        "languageSwitcher": {
+          "switchTo": "Zu {{ lang }} wechseln"
+        },
+        "siteActions": {
+          "logout": "Abmelden"
+        },
+        "anonymousTools": {
+          "login": "Anmelden",
+          "register": "Registrieren"
+        },
+        "searchwidget": {
+          "searchSite": "Seite durchsuchen"
+        }
+      }
+    },
+    "contenttypes": {
+      "common": {
+        "size": "Größe:"
+      },
+      "image": {
+        "download": "Klicke, um das Bild in voller Größe herunterzuladen"
+      },
+      "file": {
+        "download": "Datei herunterladen"
+      }
+    }
+  }
+}

packages/layout/locales/en/common.json

@@ -1,7 +1,21 @@
 {
   "layout": {
-    "languageSwitcher": {
-      "switchTo": "Switch to {{ lang }}"
+    "slots": {
+      "tools": {
+        "languageSwitcher": {
+          "switchTo": "Switch to {{ lang }}"
+        },
+        "siteActions": {
+          "logout": "Log Out"
+        },
+        "anonymousTools": {
+          "login": "Log In",
+          "register": "Register"
+        },
+        "searchWidget": {
+          "searchSite": "Search site"
+        }
+      }
     },
     "contenttypes": {
       "common": {

packages/layout/locales/it/common.json

@@ -1,7 +1,21 @@
 {
   "layout": {
-    "languageSwitcher": {
-      "switchTo": "Passa a {{ lang }}"
+    "slots": {
+      "tools": {
+        "languageSwitcher": {
+          "switchTo": "Passa a {{ lang }}"
+        },
+        "siteActions": {
+          "logout": "Disconnetti"
+        },
+        "anonymousTools": {
+          "login": "Accedi",
+          "register": "Registrati"
+        },
+        "searchWidget": {
+          "searchSite": "Cerca nel sito"
+        }
+      }
     },
     "contenttypes": {
       "common": {

packages/layout/news/6673.feature

@@ -0,0 +1 @@
+Added search widget and header sub-slots. @arybakov05

packages/layout/slots/Breadcrumbs.tsx

@@ -17,7 +17,7 @@ const Breadcrumbs = (props: SlotComponentProps) => {
     icon: <HomeIcon size="sm" />,
   };
 
-  const breacrumbs = [rootItem, ...(items || [])];
+  const breadcrumbs = [rootItem, ...(items || [])];
 
   return (
     <SectionWrapper
@@ -26,7 +26,7 @@ const Breadcrumbs = (props: SlotComponentProps) => {
       width="layout"
       className="breadcrumbs"
     >
-      <PCBreadcrumbs items={breacrumbs}>
+      <PCBreadcrumbs items={breadcrumbs}>
         {(item) => (
           <PCBreadcrumb id={item['@id']} href={item['@id']}>
             {item.title}

packages/layout/slots/Header/Header.module.css

@@ -9,8 +9,6 @@
   } */
 
   .header-tools {
-    display: flex;
-    flex: 1 1 0;
-    flex-direction: row-reverse;
+    align-items: center;
   }
 }

packages/layout/slots/Header/Header.tsx

@@ -26,12 +26,7 @@ const Header = (props: HeaderProps) => {
       <SlotRenderer name="navigation" content={content} location={location} />
       <div className={clsx(styles['header-tools'], 'header-tools')}>
         <SlotRenderer
-          name="headertools"
-          content={content}
-          location={location}
-        />
-        <SlotRenderer
-          name="language-switcher"
+          name="headerTools"
           content={content}
           location={location}
         />

packages/layout/slots/HeaderTools/Actions.tsx

@@ -0,0 +1,12 @@
+import { Link } from '@plone/components';
+import { useTranslation } from 'react-i18next';
+
+const Actions = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Link href="/logout">{t('layout.slots.tools.siteActions.logout')}</Link>
+  );
+};
+
+export default Actions;

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 (
+    <div className={clsx(styles['anonymoustools'], 'anonymoustools')}>
+      <Link href={`/login${hasReturnUrl ? `?return_url=${returnUrl}` : ''}`}>
+        {t('layout.slots.tools.anonymousTools.login')}
+      </Link>
+      {config.settings.showSelfRegistration && (
+        <Link href="/register">
+          {t('layout.slots.tools.anonymousTools.register')}
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default AnonymousTools;

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<RootLoader>('root');
+
+  if (!rootData) {
+    return null;
+  }
+
+  const { isAuthenticated } = rootData;
+  const { content, location } = props;
+
+  return (
+    <>
+      {isAuthenticated ? (
+        <SlotRenderer name="actions" content={content} location={location} />
+      ) : (
+        <SlotRenderer
+          name="anonymousTools"
+          content={content}
+          location={location}
+        />
+      )}
+      <SlotRenderer
+        name="languageSwitcher"
+        content={content}
+        location={location}
+      />
+      <SlotRenderer name="searchWidget" content={content} location={location} />
+    </>
+  );
+};
+
+export default HeaderTools;

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 (
+    <Form
+      className={clsx(styles['searchwidget'], 'searchwidget')}
+      action="/search"
+      method="get"
+    >
+      <TextField name="search" type="text">
+        <Label className="sr-only">
+          {t('layout.slots.tools.searchWidget.searchSite')}
+        </Label>
+        <Input
+          name="SearchableText"
+          placeholder={t('layout.slots.tools.searchWidget.searchSite')}
+        />
+        {hasPath && <input type="hidden" name="path" value={pathname} />}
+      </TextField>
+      <Button type="submit">
+        <Search />
+      </Button>
+    </Form>
+  );
+};
+
+export default SearchWidget;

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;
+      }
+    }
+  }
+}