117 lines
3.5 KiB
JavaScript
117 lines
3.5 KiB
JavaScript
import { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import logo from "../assets/logo_light_160.png";
|
|
import { SideSheet } from "@douyinfe/semi-ui";
|
|
import { IconMenu } from "@douyinfe/semi-icons";
|
|
|
|
export default function Navbar() {
|
|
const [openMenu, setOpenMenu] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="py-5 px-8 sm:px-4 flex justify-between items-center">
|
|
<div className="flex items-center">
|
|
<Link to="/">
|
|
<img src={logo} alt="logo" className="me-2 h-[48px] sm:h-[32px]" />
|
|
</Link>
|
|
<div className="md:hidden flex space-x-6 ml-6">
|
|
<Link
|
|
className="text-lg font-semibold hover:text-indigo-700"
|
|
onClick={() =>
|
|
document
|
|
.getElementById("features")
|
|
.scrollIntoView({ behavior: "smooth" })
|
|
}
|
|
>
|
|
Features
|
|
</Link>
|
|
<Link
|
|
to="/editor"
|
|
className="text-lg font-semibold hover:text-indigo-700"
|
|
>
|
|
Editor
|
|
</Link>
|
|
<Link
|
|
to="/templates"
|
|
className="text-lg font-semibold hover:text-indigo-700"
|
|
>
|
|
Templates
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="md:hidden block space-x-3">
|
|
<a
|
|
title="Jump to Github"
|
|
className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
|
href="https://github.com/drawdb-io/drawdb"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<i className="opacity-70 bi bi-github" />
|
|
</a>
|
|
<a
|
|
title="Follow us on X"
|
|
className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
|
href="https://x.com/drawDB_"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<i className="opacity-70 bi bi-twitter-x" />
|
|
</a>
|
|
<a
|
|
title="Join the community on Discord"
|
|
className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
|
href="https://discord.gg/BrjZgNrmR6"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<i className="opacity-70 bi bi-discord" />
|
|
</a>
|
|
</div>
|
|
<button
|
|
onClick={() => setOpenMenu((prev) => !prev)}
|
|
className="hidden md:inline-block h-[24px]"
|
|
>
|
|
<IconMenu size="extra-large" />
|
|
</button>
|
|
</div>
|
|
<hr />
|
|
<SideSheet
|
|
title={
|
|
<img src={logo} alt="logo" className="sm:h-[32px] md:h-[42px]" />
|
|
}
|
|
visible={openMenu}
|
|
onCancel={() => setOpenMenu(false)}
|
|
width={window.innerWidth}
|
|
>
|
|
<Link
|
|
className="hover:bg-zinc-100 block p-3 text-base font-semibold"
|
|
onClick={() => {
|
|
document
|
|
.getElementById("features")
|
|
.scrollIntoView({ behavior: "smooth" });
|
|
setOpenMenu(false);
|
|
}}
|
|
>
|
|
Features
|
|
</Link>
|
|
<hr />
|
|
<Link
|
|
to="/editor"
|
|
className="hover:bg-zinc-100 block p-3 text-base font-semibold"
|
|
>
|
|
Editor
|
|
</Link>
|
|
<hr />
|
|
<Link
|
|
to="/templates"
|
|
className="hover:bg-zinc-100 block p-3 text-base font-semibold"
|
|
>
|
|
Templates
|
|
</Link>
|
|
<hr />
|
|
</SideSheet>
|
|
</>
|
|
);
|
|
}
|