Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Michal Čížek
flea-market-manager
Commits
05ee06a6
Commit
05ee06a6
authored
May 25, 2022
by
Michal Čížek
Browse files
added back navigation drawer for mobile
parent
8132aceb
Changes
4
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/header/header.tsx
View file @
05ee06a6
import
{
use
Memo
}
from
"
react
"
;
import
{
Coin
,
Logout
}
from
"
tabler-icons-react
"
;
import
{
use
Callback
,
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
>
);
};
frontend/src/components/navigation/navigation.tsx
0 → 100644
View file @
05ee06a6
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
>
);
};
frontend/src/components/sidebar/sidebar.tsx
View file @
05ee06a6
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
>
);
};
frontend/src/modules/events/events.tsx
View file @
05ee06a6
...
...
@@ -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
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment