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";
|
||||
|
||||
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}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -54,6 +54,7 @@ let en = {
|
|||
NoNotesFound: "No notes found",
|
||||
LocalNote: "Local",
|
||||
PublicNote: "Public",
|
||||
Menu: "Menu",
|
||||
};
|
||||
|
||||
export default en;
|
||||
|
|
|
@ -57,6 +57,7 @@ let eo = {
|
|||
NoNotesFound: "Neniuj notoj trovitaj",
|
||||
LocalNote: "Loka",
|
||||
PublicNote: "Publika",
|
||||
Menu: "Menuo",
|
||||
};
|
||||
|
||||
export default eo;
|
||||
|
|
|
@ -57,6 +57,7 @@ let es = {
|
|||
NoNotesFound: "No se encontraron notas",
|
||||
LocalNote: "Local",
|
||||
PublicNote: "Pública",
|
||||
Menu: "Menú",
|
||||
};
|
||||
|
||||
export default es;
|
||||
|
|
|
@ -55,6 +55,7 @@ let ru = {
|
|||
NoNotesFound: "Заметок не найдено",
|
||||
LocalNote: "Локальная",
|
||||
PublishNote: "Публичная",
|
||||
Menu: "Меню",
|
||||
};
|
||||
|
||||
export default ru;
|
||||
|
|
Loading…
Reference in a new issue