Commit 05ee06a6 authored by Michal Čížek's avatar Michal Čížek
Browse files

added back navigation drawer for mobile

parent 8132aceb
import { useMemo } from "react";
import { Coin, Logout } from "tabler-icons-react";
import { useCallback, useMemo, useState } from "react";
import { Coin, Logout, Menu2 } from "tabler-icons-react";
import {
ActionIcon,
Avatar,
Box,
Button,
Center,
Drawer,
Grid,
Group,
Paper,
......@@ -11,9 +14,11 @@ import {
} from "@mantine/core";
import { useAuth } from "context/auth/auth-context";
import { Navigation } from "components/navigation/navigation";
export const Header = () => {
const { user, logout, isLoggedIn } = useAuth();
const [isOpen, setIsOpen] = useState(false);
const initials = useMemo(() => {
const parts = user?.name.trim().split(" ");
......@@ -27,10 +32,23 @@ export const Header = () => {
return result ?? "UN";
}, [user?.name]);
const openDrawer = useCallback(() => setIsOpen(true), []);
const closeDrawer = useCallback(() => setIsOpen(false), []);
return (
<Paper shadow="sm" sx={{ padding: "0.5rem" }}>
<Grid align="center">
<Grid.Col xs={6} md={4} />
<Grid.Col xs={6} md={4}>
<Box
sx={(theme) => ({
[theme.fn.largerThan("md")]: { display: "none" },
})}
>
<ActionIcon onClick={openDrawer}>
<Menu2 />
</ActionIcon>
</Box>
</Grid.Col>
<Grid.Col
xs={4}
sx={(theme) => ({
......@@ -60,6 +78,19 @@ export const Header = () => {
</Group>
</Grid.Col>
</Grid>
<Drawer
opened={isOpen}
onClose={closeDrawer}
title={
<Text size="md" weight="bold">
Navigation
</Text>
}
size="lg"
padding="md"
>
<Navigation onClick={closeDrawer} />
</Drawer>
</Paper>
);
};
import { ReactNode } from "react";
import { Link } from "react-router-dom";
import { Stack, Button, Sx } from "@mantine/core";
import {
BuildingStore,
CalendarEvent,
Home,
Location,
Login,
UserPlus,
} from "tabler-icons-react";
import { User } from "models";
import { useAuth } from "../../context/auth/auth-context";
type NavItem = {
label: string;
to: string;
icon: ReactNode;
show?: ((user?: User) => boolean) | boolean;
sx?: Sx;
};
const navItems: NavItem[] = [
{
label: "Home",
to: "/",
icon: <Home />,
},
{
label: "Events",
to: "/events",
icon: <CalendarEvent />,
},
{
label: "Locations",
to: "/locations",
icon: <Location />,
show: (user) => user?.userRole === "MANAGER",
},
{
label: "My reservations",
to: "/my-reservations",
icon: <BuildingStore />,
show: (user) => user?.userRole === "SELLER",
},
{
label: "Login",
to: "/login",
icon: <Login />,
show: (user) => !user,
sx: { marginTop: "auto" },
},
{
label: "Register",
to: "/register",
icon: <UserPlus />,
show: (user) => !user,
},
];
interface Props {
onClick?: () => void;
}
export const Navigation = ({ onClick }: Props) => {
const { user } = useAuth();
return (
<Stack spacing={5} sx={{ position: "sticky", top: "1rem" }}>
{navItems.map(
({ icon, label, to, show = true, sx }) =>
(show instanceof Function ? show?.(user) : show) && (
<Button
variant="subtle"
leftIcon={icon}
key={to}
component={Link}
to={to}
onClick={onClick}
sx={sx}
>
{label}
</Button>
)
)}
</Stack>
);
};
import { ReactNode } from "react";
import { Link } from "react-router-dom";
import { Stack, Button, Paper, Sx } from "@mantine/core";
import { Paper } from "@mantine/core";
import {
BuildingStore,
CalendarEvent,
Home,
Location,
Login,
UserPlus,
} from "tabler-icons-react";
import { User } from "models";
import { useAuth } from "../../context/auth/auth-context";
type NavItem = {
label: string;
to: string;
icon: ReactNode;
show?: ((user?: User) => boolean) | boolean;
sx?: Sx;
};
const navItems: NavItem[] = [
{
label: "Home",
to: "/",
icon: <Home />,
},
{
label: "Events",
to: "/events",
icon: <CalendarEvent />,
},
{
label: "Locations",
to: "/locations",
icon: <Location />,
show: (user) => user?.userRole === "MANAGER",
},
{
label: "My reservations",
to: "/my-reservations",
icon: <BuildingStore />,
show: (user) => user?.userRole === "SELLER",
},
{
label: "Login",
to: "/login",
icon: <Login />,
show: (user) => !user,
sx: { marginTop: "auto" },
},
{
label: "Register",
to: "/register",
icon: <UserPlus />,
show: (user) => !user,
},
];
interface Props {
onClick?: () => void;
}
export const Sidebar = ({ onClick }: Props) => {
const { user } = useAuth();
import { Navigation } from "components/navigation/navigation";
export const Sidebar = () => {
return (
<Paper
withBorder
sx={{
sx={(theme) => ({
flexGrow: 1,
minWidth: 250,
maxWidth: 350,
position: "relative",
padding: "1rem",
}}
[theme.fn.smallerThan("md")]: {
display: "none",
},
})}
>
<Stack spacing={5} sx={{ position: "sticky", top: "1rem" }}>
{navItems.map(
({ icon, label, to, show = true, sx }) =>
(show instanceof Function ? show?.(user) : show) && (
<Button
variant="subtle"
leftIcon={icon}
key={to}
component={Link}
to={to}
onClick={onClick}
sx={sx}
>
{label}
</Button>
)
)}
</Stack>
<Navigation />
</Paper>
);
};
......@@ -306,7 +306,7 @@ export const Events = () => {
value={search}
onChange={handleSearchChange}
/>
{user !== undefined && user.userRole === "MANAGER" ? (
{user !== undefined && user.userRole === "MANAGER" && (
<Button
variant="outline"
leftIcon={<Plus />}
......@@ -314,8 +314,6 @@ export const Events = () => {
>
Add Event
</Button>
) : (
<th />
)}
</Container>
<Table
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment