titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make navbar responsive

Browse Source
This commit is contained in:
1ilit 2023-10-24 13:04:33 +03:00
parent dfe48ef560
commit 0b1a6d2eae
2 changed files with 95 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/Navbar.jsx Normal file
View File

@ -0,0 +1,88 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import logo from "../assets/logo_light_46.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-6 sm:px-4 flex justify-between items-center">
<div className="flex items-center justify-start">
<Link to="/">
<img src={logo} alt="logo" className="me-2 sm:h-[32px]" />
</Link>
<div className="md:hidden">
<Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
Features
</Link>
<Link
to="/editor"
className="ms-4 text-lg font-semibold hover:text-indigo-700"
>
Editor
</Link>
<Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
Templates
</Link>
<Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
Download
</Link>
</div>
</div>
<div className="md:hidden">
<Link to="/login" className="me-5 font-semibold">
Log in
</Link>
<Link
to="/signup"
className="px-6 py-3 bg-[#386b8f] hover:bg-[#4e8bb6] text-white font-semibold rounded-md"
>
Sign up
</Link>
</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]" />}
visible={openMenu}
onCancel={() => setOpenMenu(false)}
width={window.innerWidth}
>
<Link className="hover:bg-zinc-100 block p-3 text-lg font-semibold">
Features
</Link>
<hr />
<Link
to="/editor"
className="hover:bg-zinc-100 block p-3 text-lg font-semibold"
>
Editor
</Link>
<hr />
<Link className="hover:bg-zinc-100 block p-3 text-lg font-semibold">
Templates
</Link>
<hr />
<Link className="hover:bg-zinc-100 block p-3 text-lg font-semibold">
Download
</Link>
<hr />
<Link
to="/login"
className="hover:bg-zinc-100 block p-3 text-lg font-semibold text-indigo-700"
>
Log in
</Link>
</SideSheet>
</>
);
}

45
src/pages/LandingPage.jsx
View File

@ -1,14 +1,16 @@
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { IconCrossStroked } from "@douyinfe/semi-icons";
import logo from "../assets/logo_light_46.png";
import Navbar from "../components/Navbar";
export default function LandingPage() {
const [showSurvey, setShowSurvey] = useState(true);
useEffect(() => {
document.title = "drawDB | Online database diagram editor and SQL generator"
})
document.body.setAttribute("theme-mode", "light");
document.title =
"drawDB | Online database diagram editor and SQL generator";
});
return (
<div>
@ -24,42 +26,7 @@ export default function LandingPage() {
</div>
</div>
)}
<div>
<div className="py-5 px-6 flex justify-between items-center">
<div className="flex items-center justify-start">
<Link to="/">
<img src={logo} alt="logo" className="me-2" />
</Link>
<Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
Features
</Link>
<Link
to="/editor"
className="ms-4 text-lg font-semibold hover:text-indigo-700"
>
Editor
</Link>
<Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
Templates
</Link>
<Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
Download
</Link>
</div>
<div>
<Link to="/login" className="me-5 font-semibold">
Log in
</Link>
<Link
to="/signup"
className="px-6 py-3 bg-[#386b8f] hover:bg-[#4e8bb6] text-white font-semibold rounded-md"
>
Sign up
</Link>
</div>
</div>
<hr />
</div>
<Navbar />
</div>
);
}