mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-06 04:53:56 +03:00
feat: menu dropdown on mobile
This commit is contained in:
parent
a4e5a7157e
commit
09cbc9fbc3
6 changed files with 54 additions and 24 deletions
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -55,6 +55,7 @@ let ru = {
|
||||||
NoNotesFound: "Заметок не найдено",
|
NoNotesFound: "Заметок не найдено",
|
||||||
LocalNote: "Локальная",
|
LocalNote: "Локальная",
|
||||||
PublishNote: "Публичная",
|
PublishNote: "Публичная",
|
||||||
|
Menu: "Меню",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ru;
|
export default ru;
|
||||||
|
|
Loading…
Reference in a new issue