Infrastructure/pingvin-share
0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2025-01-29 01:28:59 -05:00
Code Issues Activity

Fix NavBar on mobile

Browse source
This commit is contained in:
Elias Schneider 2022-05-13 19:27:12 +02:00
parent c28d3f960e
commit 464406603a
No known key found for this signature in database
GPG key ID: D5EC1C72D93244FD
1 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/navBar/NavBar.tsx
View file

@ -11,7 +11,7 @@ import {
import { useBooleanToggle } from "@mantine/hooks"; import { useBooleanToggle } from "@mantine/hooks";
import { NextLink } from "@mantine/next"; import { NextLink } from "@mantine/next";
import Image from "next/image"; import Image from "next/image";
import React, { useContext, useEffect, useState } from "react"; import React, { ReactNode, useContext, useEffect, useState } from "react";
import headerStyle from "../../styles/header.style"; import headerStyle from "../../styles/header.style";
import { IsSignedInContext } from "../../utils/auth.util"; import { IsSignedInContext } from "../../utils/auth.util";
import { useConfig } from "../../utils/config.util"; import { useConfig } from "../../utils/config.util";
@ -19,7 +19,8 @@ import ActionAvatar from "./ActionAvatar";
type Link = { type Link = {
link?: string; link?: string;
label: string; label?: string;
component?: ReactNode;
action?: () => Promise<void>; action?: () => Promise<void>;
}; };
@ -35,6 +36,9 @@ const Header = () => {
link: "/upload", link: "/upload",
label: "Upload", label: "Upload",
}, },
{
component: <ActionAvatar />,
},
]; ];
const unauthenticatedLinks: Link[] | undefined = [ const unauthenticatedLinks: Link[] | undefined = [
@ -59,6 +63,15 @@ const Header = () => {
const links = isSignedIn ? authenticatedLinks : unauthenticatedLinks; const links = isSignedIn ? authenticatedLinks : unauthenticatedLinks;
const items = links.map((link) => { const items = links.map((link) => {
if (link.component) {
return (
<>
<Container pl={5} py={15}>
{link.component}
</Container>
</>
);
}
if (link) { if (link) {
// eslint-disable-next-line react-hooks/rules-of-hooks // eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => { useEffect(() => {
@ -97,8 +110,6 @@ const Header = () => {
</NextLink> </NextLink>
<Group spacing={5} className={classes.links}> <Group spacing={5} className={classes.links}>
{items} {items}
<Space w={5} />
{isSignedIn && <ActionAvatar />}
</Group> </Group>
<Burger <Burger
opened={opened} opened={opened}