VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(org): Tweaks to mobile header

Browse source
This commit is contained in:
Joost De Cock 2022-06-04 18:30:30 +02:00
parent 61b38b4544
commit 0ded6ebbe6
3 changed files with 24 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/freesewing.org/components/header.js
View file

@ -82,10 +82,12 @@ const Header = ({ app, setSearch }) => {
) )
} }
</button> </button>
<div className="flex flex-row gap-2 md:hidden"> <div className="flex flex-row items-center md:hidden pr-4">
<button className="btn btn-sm btn h-12 px-12" onClick={() => setSearch(true)}> <button onClick={() => setSearch(true)} className="btn btn-sm">
<SearchIcon /> <SearchIcon />
</button> </button>
<ThemePicker app={app} iconOnly />
<LocalePicker app={app} iconOnly />
</div> </div>
<button className={` <button className={`
btn btn-sm h-12 btn btn-sm h-12

14
packages/freesewing.shared/components/locale-picker.js
View file

@ -4,19 +4,21 @@ import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import Link from 'next/link' import Link from 'next/link'
const LocalePicker = ({ app }) => { const LocalePicker = ({ app, iconOnly=false }) => {
const { t } = useTranslation(['locales']) const { t } = useTranslation(['locales'])
const router = useRouter() const router = useRouter()
return ( return (
<div className="dropdown w-full md:w-auto"> <div className="dropdown dropdown-end w-auto">
<div tabIndex="0" className={` <div tabIndex="0" className={ iconOnly
m-0 btn btn-neutral flex flex-row gap-2 btn-outline ? 'btn btn-sm'
: `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
md:btn-ghost md:btn-ghost
hover:bg-neutral hover:border-neutral-content hover:bg-neutral hover:border-neutral-content
`}> `
}>
<LocaleIcon /> <LocaleIcon />
<span>{t(router.locale)}</span> {!iconOnly && <span>{t(router.locale)}</span>}
</div> </div>
<ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52"> <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
{router.locales.map(locale => ( {router.locales.map(locale => (

14
packages/freesewing.shared/components/theme-picker.js
View file

@ -2,18 +2,20 @@ import themes from 'shared/themes/index.js'
import ThemeIcon from 'shared/components/icons/theme.js' import ThemeIcon from 'shared/components/icons/theme.js'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
const ThemePicker = ({ app, className }) => { const ThemePicker = ({ app, className, iconOnly=false }) => {
const { t } = useTranslation(['themes']) const { t } = useTranslation(['themes'])
return ( return (
<div className={`dropdown ${className} w-full md:w-auto`}> <div className={`dropdown dropdown-end ${className} w-auto`}>
<div tabIndex="0" className={` <div tabIndex="0" className={iconOnly
m-0 btn btn-neutral flex flex-row gap-2 btn-outline ? `btn btn-sm`
: `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
md:btn-ghost md:btn-ghost
hover:bg-neutral hover:border-neutral-content hover:bg-neutral hover:border-neutral-content
`}> `}
>
<ThemeIcon /> <ThemeIcon />
<span>{t(`${app.theme}Theme`)}</span> {!iconOnly && <span>{t(`${app.theme}Theme`)}</span>}
</div> </div>
<ul <ul
tabIndex="0" tabIndex="0"