From 0ded6ebbe66f065dece5a4312f76b9bc557c0692 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Sat, 4 Jun 2022 18:30:30 +0200
Subject: [PATCH] wip(org): Tweaks to mobile header

---
 packages/freesewing.org/components/header.js   |  6 ++++--
 .../components/locale-picker.js                | 18 ++++++++++--------
 .../components/theme-picker.js                 | 18 ++++++++++--------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/freesewing.org/components/header.js b/packages/freesewing.org/components/header.js
index cc1b4ce3243..1a8dcf8a90c 100644
--- a/packages/freesewing.org/components/header.js
+++ b/packages/freesewing.org/components/header.js
@@ -82,10 +82,12 @@ const Header = ({ app, setSearch }) => {
                   )
                 }
             </button>
-            <div className="flex flex-row gap-2 md:hidden">
-              <button className="btn btn-sm btn h-12 px-12" onClick={() => setSearch(true)}>
+            <div className="flex flex-row items-center md:hidden pr-4">
+              <button onClick={() => setSearch(true)} className="btn btn-sm">
                 <SearchIcon />
               </button>
+              <ThemePicker app={app} iconOnly />
+              <LocalePicker app={app} iconOnly />
             </div>
             <button className={`
               btn btn-sm h-12
diff --git a/packages/freesewing.shared/components/locale-picker.js b/packages/freesewing.shared/components/locale-picker.js
index a0505579c95..dcc3ee8a7f6 100644
--- a/packages/freesewing.shared/components/locale-picker.js
+++ b/packages/freesewing.shared/components/locale-picker.js
@@ -4,19 +4,21 @@ import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
 
-const LocalePicker = ({ app }) => {
+const LocalePicker = ({ app, iconOnly=false }) => {
   const { t } = useTranslation(['locales'])
   const router = useRouter()
 
   return (
-    <div className="dropdown w-full md:w-auto">
-      <div tabIndex="0" className={`
-        m-0 btn btn-neutral flex flex-row gap-2 btn-outline
-        md:btn-ghost
-        hover:bg-neutral hover:border-neutral-content
-      `}>
+    <div className="dropdown dropdown-end w-auto">
+      <div tabIndex="0" className={ iconOnly
+        ? 'btn btn-sm'
+        : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
+          md:btn-ghost
+          hover:bg-neutral hover:border-neutral-content
+        `
+      }>
         <LocaleIcon />
-        <span>{t(router.locale)}</span>
+      {!iconOnly && <span>{t(router.locale)}</span>}
       </div>
       <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
         {router.locales.map(locale => (
diff --git a/packages/freesewing.shared/components/theme-picker.js b/packages/freesewing.shared/components/theme-picker.js
index cf2a6eaa46f..8abee2a2e01 100644
--- a/packages/freesewing.shared/components/theme-picker.js
+++ b/packages/freesewing.shared/components/theme-picker.js
@@ -2,18 +2,20 @@ import themes from 'shared/themes/index.js'
 import ThemeIcon from 'shared/components/icons/theme.js'
 import { useTranslation } from 'next-i18next'
 
-const ThemePicker = ({ app, className }) => {
+const ThemePicker = ({ app, className, iconOnly=false }) => {
   const { t } = useTranslation(['themes'])
 
   return (
-      <div className={`dropdown ${className} w-full md:w-auto`}>
-        <div tabIndex="0" className={`
-          m-0 btn btn-neutral flex flex-row gap-2 btn-outline
-          md:btn-ghost
-          hover:bg-neutral hover:border-neutral-content
-        `}>
+      <div className={`dropdown dropdown-end ${className} w-auto`}>
+        <div tabIndex="0" className={iconOnly
+         ? `btn btn-sm`
+         : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
+            md:btn-ghost
+            hover:bg-neutral hover:border-neutral-content
+          `}
+        >
           <ThemeIcon />
-          <span>{t(`${app.theme}Theme`)}</span>
+          {!iconOnly && <span>{t(`${app.theme}Theme`)}</span>}
         </div>
         <ul
           tabIndex="0"