devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved a bit more of the responsiveness and solved a bug

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-08-28 16:25:01 +01:00
parent 3c711e0279
commit b4d856d32f
6 changed files with 113 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Navbar.tsx
View File

@@ -3,6 +3,10 @@ import Link from "next/link";
import {Avatar} from "primereact/avatar";
import FocusLayer from "@/components/FocusLayer";
import {preventNavigation} from "@/utils/navigation.disabled";
import {useRouter} from "next/router";
import axios from "axios";
import {RiLogoutBoxFill} from "react-icons/ri";
import {BsPower} from "react-icons/bs";
interface Props {
user: User;
@@ -14,18 +18,30 @@ interface Props {
/* eslint-disable @next/next/no-img-element */
export default function Navbar({user, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
const disableNavigation = preventNavigation(navDisabled, focusMode);
const router = useRouter();
const logout = async () => {
axios.post("/api/logout").finally(() => {
setTimeout(() => router.reload(), 500);
});
};
return (
<header className="w-full bg-transparent py-4 gap-12 flex items-center relative">
<div className="px-8 flex gap-8 items-center">
<header className="w-full bg-transparent py-4 -lg:justify-between lg:gap-12 flex items-center relative -lg:px-4">
<Link href={disableNavigation ? "" : "/"} className=" lg:px-8 flex gap-8 items-center">
<img src="/logo.png" alt="EnCoach's Logo" className="w-12" />
<h1 className="font-bold text-2xl w-1/6">EnCoach</h1>
</div>
<div className="flex justify-between w-5/6 mr-8">
<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
<Link href={disableNavigation ? "" : "/profile"} className="flex gap-3 items-center justify-end">
<h1 className="font-bold text-2xl w-1/6 -lg:hidden">EnCoach</h1>
</Link>
<div className="flex justify-between lg:w-5/6 lg:mr-8">
<input
type="text"
placeholder="Search..."
className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none -lg:hidden"
/>
<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end">
<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
<span className="text-right">{user.name}</span>
<span className="text-right -lg:hidden">{user.name}</span>
<BsPower size={40} className="bg-mti-red-light px-2 rounded-full text-white lg:hidden" />
</Link>
</div>
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}