Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📱 Fix header menu & directory filter responsive #41

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+144 −106
Open

📱 Fix header menu & directory filter responsive #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89c71c0
📱 Fix header menu & directory filter responsive
marchalleo Feb 22, 2024
0915c20
📱 Simplify review
marchalleo Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 49 additions & 35 deletions src/components/Layout/HomeHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { MenuIcon, XIcon } from '@heroicons/react/outline'
import { SearchIcon } from '@heroicons/react/solid'
import { navigationEntries } from './Navbar'
import { Link } from '../Links'
import { PrimaryButton } from '../Buttons'
import { useSearchFichesForm } from '../../utils/hooks'
import { LogoFull, LogoIcon } from '../Logos'
import { Fragment } from 'react';

Check failure on line 1 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon
import { Popover, Transition } from '@headlessui/react';

Check failure on line 2 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon
import { MenuIcon, XIcon } from '@heroicons/react/outline';

Check failure on line 3 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon
import { SearchIcon } from '@heroicons/react/solid';

Check failure on line 4 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon
import { navigationEntries } from './Navbar';

Check failure on line 5 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon
import { Link } from '../Links';

Check failure on line 6 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon
import { PrimaryButton } from '../Buttons';

Check failure on line 7 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon
import { useSearchFichesForm } from '../../utils/hooks';

Check failure on line 8 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon
import { LogoFull, LogoIcon } from '../Logos';

Check failure on line 9 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon

const SearchForm = () => {
const { handleSubmit, onChange, value } = useSearchFichesForm()
const { handleSubmit, onChange, value } = useSearchFichesForm();

Check failure on line 12 in src/components/Layout/HomeHeader.tsx

View workflow job for this annotation

GitHub Actions / checks 

Extra semicolon

return (
<form onSubmit={handleSubmit} className="mt-3 sm:flex lg:w-3/4">
Expand All @@ -33,15 +33,15 @@
<PrimaryButton type="submit">Rechercher</PrimaryButton>
</div>
</form>
)
}
);
};

export const HomeHeader = () => (
<div className="relative bg-white overflow-hidden">
<div className="max-w-7xl mx-auto">
<Popover>
<div className="bg-white flex justify-between lg:px-8 pt-6 px-4 relative sm:px-6 z-30">
<div>
<div className="w-full h-auto">
<nav
className="relative flex items-center justify-between sm:h-10 lg:justify-start"
aria-label="Global"
Expand All @@ -52,9 +52,7 @@
<LogoFull className="text-blue-default w-14" />
</Link>
<div className="-mr-2 flex items-center md:hidden">
<Popover.Button
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-blue-default hover:text-gray-default hover:bg-gray-light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-default"
>
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-blue-default hover:text-gray-default hover:bg-gray-light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-default">
<span className="sr-only">Menu principal</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
Expand All @@ -74,10 +72,18 @@
</div>
</nav>
</div>
<div className="flex justify-end flex-wrap gap-4 hidden lg:block">
<div className="justify-end flex-wrap gap-4 hidden lg:block">
<p className="flex gap-8 items-center flex-nowrap">
<img className="h-10" src="/partenaires/logo-ars.png" alt="Logo ARS" />
<img className="h-12" src="/partenaires/logo-gouv.png" alt="Logo gouvernement" />
<img
className="h-10"
src="/partenaires/logo-ars.png"
alt="Logo ARS"
/>
<img
className="h-12"
src="/partenaires/logo-gouv.png"
alt="Logo gouvernement"
/>
</p>
</div>
</div>
Expand All @@ -95,17 +101,13 @@
focus
className="absolute top-0 inset-x-0 p-2 transition origin-top-right md:hidden z-10"
>
<div
className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden"
>
<div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="px-5 pt-4 flex items-center justify-between">
<div>
<LogoFull className="text-blue-default w-14" />
</div>
<div className="-mr-2">
<Popover.Button
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-blue-default hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-default"
>
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-blue-default hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-default">
<span className="sr-only">Close main menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
Expand All @@ -131,14 +133,18 @@
<main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div className="sm:text-center lg:text-left">
<h1 className="text-4xl tracking-tight font-extrabold text-blue-default sm:text-5xl md:text-6xl">
<span className="block">Ressources <br />Santé et Précarité</span>{' '}
<span className="block text-4xl text-green-default mt-4 ">Auvergne Rhône Alpes</span>
<span className="block">
Ressources <br />
Santé et Précarité
</span>{' '}
<span className="block text-4xl text-green-default mt-4 ">
Auvergne Rhône Alpes
</span>
</h1>
<p
className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"
>
Ce site se veut être un outil pratique à destination des professionnels de santé.
Par un système de mots clés, vous serez orientés vers des fiches thématiques.
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Ce site se veut être un outil pratique à destination des
professionnels de santé. Par un système de mots clés, vous serez
orientés vers des fiches thématiques.
</p>
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<SearchForm />
Expand All @@ -147,8 +153,16 @@
<div className="relative lg:right-0 px-1 pt-10 lg:hidden md:block">
<div className="flex justify-center flex-wrap gap-4">
<p className="flex gap-8 items-center flex-wrap">
<img className="h-10" src="/partenaires/logo-ars.png" alt="Logo ARS" />
<img className="h-12" src="/partenaires/logo-gouv.png" alt="Logo gouvernement" />
<img
className="h-10"
src="/partenaires/logo-ars.png"
alt="Logo ARS"
/>
<img
className="h-12"
src="/partenaires/logo-gouv.png"
alt="Logo gouvernement"
/>
</p>
</div>
</div>
Expand All @@ -159,4 +173,4 @@
<LogoIcon className="h-full text-green-default" />
</div>
</div>
)
);
86 changes: 49 additions & 37 deletions src/components/Search/SearchFacet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,57 @@
import { useRefinementList } from 'react-instantsearch-hooks'
import { Fragment } from 'react'
import { Listbox, Transition } from '@headlessui/react'
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
import classNames from 'classnames'
import type { RefinementListItem } from 'instantsearch.js/es/connectors/refinement-list/connectRefinementList'
import { ClassNameProp } from '../../types/react'
import { Listbox, Transition } from '@headlessui/react';
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
import classNames from 'classnames';
import type { RefinementListItem } from 'instantsearch.js/es/connectors/refinement-list/connectRefinementList';
import { Fragment } from 'react';
import { useRefinementList } from 'react-instantsearch-hooks';
import { ClassNameProp } from '../../types/react';

type SearchFacetProps = {
attribute: string,
label: string,
getItemLabel?: (item: RefinementListItem) => string,
getItemClassName?: (item: RefinementListItem) => string,
attribute: string;
label: string;
getItemLabel?: (item: RefinementListItem) => string;
getItemClassName?: (item: RefinementListItem) => string;
} & ClassNameProp;

export const SearchFacet = ({
attribute,
className,
label,
getItemLabel = item => item.label,
getItemLabel = (item) => item.label,
getItemClassName = () => 'bg-gray-light text-blue-default',
}: SearchFacetProps) => {
const {
items,
refine,
} = useRefinementList({ attribute, limit: 1000 })
const { items, refine } = useRefinementList({ attribute, limit: 1000 });

const refinedItems = items.filter(item => item.isRefined)
const refinedItems = items.filter((item) => item.isRefined);
return (
<Listbox value="" onChange={refine}>
{({ open }) => (
<>
<Listbox.Label className="sr-only">{label}</Listbox.Label>
<div className="mt-1 relative">
<Listbox.Button className={className}>
<span className="w-full inline-flex truncate gap-2">
{refinedItems.length
? refinedItems.map(item => (
<span className="w-full inline-flex flex-wrap truncate gap-2">
{refinedItems.length ? (
refinedItems.map((item) => (
<span
key={item.value}
className={classNames(
'inline-flex items-center px-2 py-0.5 rounded text-xs truncate',
getItemClassName(item),
getItemClassName(item)
)}
>
{getItemLabel(item)}
</span>
)) : <span className="text-gray-default text-sm">{label}</span>}
))
) : (
<span className="text-gray-default text-sm">{label}</span>
)}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
<SelectorIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>

Expand All @@ -63,23 +66,32 @@ export const SearchFacet = ({
{items.map((item) => (
<Listbox.Option
key={item.value}
className={({ active }) => classNames(
active
? getItemClassName(item)
: 'text-gray-900',
'cursor-default select-none relative py-2 pl-3 pr-9',
)}
className={({ active }) =>
classNames(
active ? getItemClassName(item) : 'text-gray-900',
'cursor-default select-none relative py-2 pl-3 pr-9'
)
}
value={item.value}
>
{({
active,
}) => (
{({ active }) => (
<>
<div className="flex items-baseline">
<span title={getItemLabel(item)} className={classNames(item.isRefined ? 'font-semibold' : 'font-normal', 'truncate')}>
<span
title={getItemLabel(item)}
className={classNames(
item.isRefined ? 'font-semibold' : 'font-normal',
'truncate'
)}
>
{getItemLabel(item)}
</span>
<span className={classNames(active ? getItemClassName(item) : 'text-gray-400', 'text-xs italic ml-2')}>
<span
className={classNames(
active ? getItemClassName(item) : 'text-gray-400',
'text-xs italic ml-2'
)}
>
({item.count})
</span>
</div>
Expand All @@ -88,7 +100,7 @@ export const SearchFacet = ({
<span
className={classNames(
active ? 'text-white' : 'text-green-default',
'absolute inset-y-0 right-0 flex items-center pr-4',
'absolute inset-y-0 right-0 flex items-center pr-4'
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
Expand All @@ -104,5 +116,5 @@ export const SearchFacet = ({
</>
)}
</Listbox>
)
}
);
};
Loading
Loading