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";
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 (
<Link to={props.href} className={props.className}>
<Link to={href} className={className}>
<div
onClick={props.onClick}
onClick={onClick}
className={`transition-transform ${
props.w ? props.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 ${
props.className
}`}
w ? w : "w-48"
} ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 p-2 pl-6 text-lg ${color} rounded-2xl ${className}`}
>
{props.children}
{children}
</div>
</Link>
);
@ -41,6 +46,7 @@ function ButtonWithIcon(props) {
className={props.className}
onClick={props.onClick}
w={props.w}
color={props.color}
>
<IconWithText
reverse={props.reverse}

View file

@ -4,27 +4,47 @@ import {
PencilIcon,
ExclamationCircleIcon,
Cog6ToothIcon,
ChevronDownIcon,
} from "@heroicons/react/24/outline";
import { useState } from "react";
function Menu() {
const [hidden, setHidden] = useState(window.innerWidth < 1024 ? true : false);
console.log(window.innerWidth);
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">
<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"
/>
{window.innerWidth < 1024 && (
<ButtonWithIcon
icon={ChevronDownIcon}
text={"Menu"}
reverse
className="col-span-2 lg:col-span-1 justify-self-center"
color="bg-sky-600 hover:bg-sky-800 dark:bg-sky-800 dark:hover:bg-sky-900 text-white"
onClick={() => {
setHidden(!hidden);
}}
/>
)}
{!hidden && (
<>
<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>
);
}

View file

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

View file

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

View file

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

View file

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