feat: menu dropdown on mobile

This commit is contained in:
Artemy 2023-04-11 11:09:24 +03:00
parent a4e5a7157e
commit 09cbc9fbc3
6 changed files with 54 additions and 24 deletions

View file

@ -1,17 +1,22 @@
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
function Button(props) { function Button({
href,
className,
onClick,
w,
children,
color = "bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800",
}) {
return ( return (
<Link to={props.href} className={props.className}> <Link to={href} className={className}>
<div <div
onClick={props.onClick} onClick={onClick}
className={`transition-transform ${ className={`transition-transform ${
props.w ? props.w : "w-48" w ? w : "w-48"
} ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 p-2 pl-6 text-lg bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800 rounded-2xl ${ } ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 p-2 pl-6 text-lg ${color} rounded-2xl ${className}`}
props.className
}`}
> >
{props.children} {children}
</div> </div>
</Link> </Link>
); );
@ -41,6 +46,7 @@ function ButtonWithIcon(props) {
className={props.className} className={props.className}
onClick={props.onClick} onClick={props.onClick}
w={props.w} w={props.w}
color={props.color}
> >
<IconWithText <IconWithText
reverse={props.reverse} reverse={props.reverse}

View file

@ -4,27 +4,47 @@ import {
PencilIcon, PencilIcon,
ExclamationCircleIcon, ExclamationCircleIcon,
Cog6ToothIcon, Cog6ToothIcon,
ChevronDownIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { useState } from "react";
function Menu() { function Menu() {
const [hidden, setHidden] = useState(window.innerWidth < 1024 ? true : false);
console.log(window.innerWidth);
return ( return (
<div className="grid grid-cols-2 lg:grid-cols-1 col-span-4 lg:col-span-1 gap-2 mt-4 lg:m-4 place-content-start justify-self-center justify-center"> <div className="grid grid-cols-2 lg:grid-cols-1 col-span-4 lg:col-span-1 gap-2 mt-4 lg:m-4 place-content-start justify-self-center justify-center">
<ButtonWithIcon {window.innerWidth < 1024 && (
icon={MagnifyingGlassCircleIcon} <ButtonWithIcon
text={locals.Notes} icon={ChevronDownIcon}
href="/notes" text={"Menu"}
/> reverse
<ButtonWithIcon icon={PencilIcon} text={locals.Write} href="/" /> className="col-span-2 lg:col-span-1 justify-self-center"
<ButtonWithIcon color="bg-sky-600 hover:bg-sky-800 dark:bg-sky-800 dark:hover:bg-sky-900 text-white"
icon={Cog6ToothIcon} onClick={() => {
text={locals.Settings} setHidden(!hidden);
href="/settings" }}
/> />
<ButtonWithIcon )}
icon={ExclamationCircleIcon} {!hidden && (
text={locals.About} <>
href="/about" <ButtonWithIcon
/> icon={MagnifyingGlassCircleIcon}
text={locals.Notes}
href="/notes"
/>
<ButtonWithIcon icon={PencilIcon} text={locals.Write} href="/" />
<ButtonWithIcon
icon={Cog6ToothIcon}
text={locals.Settings}
href="/settings"
/>
<ButtonWithIcon
icon={ExclamationCircleIcon}
text={locals.About}
href="/about"
/>
</>
)}
</div> </div>
); );
} }

View file

@ -54,6 +54,7 @@ let en = {
NoNotesFound: "No notes found", NoNotesFound: "No notes found",
LocalNote: "Local", LocalNote: "Local",
PublicNote: "Public", PublicNote: "Public",
Menu: "Menu",
}; };
export default en; export default en;

View file

@ -57,6 +57,7 @@ let eo = {
NoNotesFound: "Neniuj notoj trovitaj", NoNotesFound: "Neniuj notoj trovitaj",
LocalNote: "Loka", LocalNote: "Loka",
PublicNote: "Publika", PublicNote: "Publika",
Menu: "Menuo",
}; };
export default eo; export default eo;

View file

@ -57,6 +57,7 @@ let es = {
NoNotesFound: "No se encontraron notas", NoNotesFound: "No se encontraron notas",
LocalNote: "Local", LocalNote: "Local",
PublicNote: "Pública", PublicNote: "Pública",
Menu: "Menú",
}; };
export default es; export default es;

View file

@ -55,6 +55,7 @@ let ru = {
NoNotesFound: "Заметок не найдено", NoNotesFound: "Заметок не найдено",
LocalNote: "Локальная", LocalNote: "Локальная",
PublishNote: "Публичная", PublishNote: "Публичная",
Menu: "Меню",
}; };
export default ru; export default ru;