1 | import {Button, Modal} from "react-bootstrap";
|
---|
2 | import React, {useState} from "react";
|
---|
3 | import { Container, Image, Navbar } from "react-bootstrap";
|
---|
4 | import { Nav } from "react-bootstrap";
|
---|
5 | import { BsFillPersonFill } from "react-icons/bs";
|
---|
6 | import { useNavigate } from "react-router-dom";
|
---|
7 | import useGet from "../../Hooks/useGet";
|
---|
8 | import axios from "../../../axios.js";
|
---|
9 | import {useAuth} from "../../Context/AuthContext";
|
---|
10 | import ImageUpload from "../../ImageUpload/ImageUpload";
|
---|
11 | //import logo from 'assets/images/logo.png';
|
---|
12 | //src="https://upload.wikimedia.org/wikipedia/commons/0/08/Vergina_Sun_-_Golden_Larnax.png"
|
---|
13 |
|
---|
14 | function Navigation(props) {
|
---|
15 | const navigator = useNavigate();
|
---|
16 | const Auth = useAuth();
|
---|
17 | const isLoggedIn = Auth.userIsAuthenticated();
|
---|
18 |
|
---|
19 | const [show, setShow] = useState(false);
|
---|
20 |
|
---|
21 | const handleClose = () => setShow(false);
|
---|
22 | const handleShow = () => setShow(true);
|
---|
23 |
|
---|
24 | return (
|
---|
25 | <>
|
---|
26 | <Navbar
|
---|
27 | bg="white"
|
---|
28 | variant="white"
|
---|
29 | expand="md"
|
---|
30 | className={props.mt == "0" ? "px-5 m-4" : ""}
|
---|
31 | >
|
---|
32 | <Container>
|
---|
33 | <Navbar.Brand href="/home">
|
---|
34 | <span className="ikona">
|
---|
35 | <Image
|
---|
36 | id="background-img"
|
---|
37 | src="https://i.ibb.co/BwtmZqX/logo.png"
|
---|
38 | width={60}
|
---|
39 | height={60}
|
---|
40 | ></Image>
|
---|
41 | </span>
|
---|
42 | <span className="mx-3 ikona">
|
---|
43 | <span className="svetlo">Tour</span>
|
---|
44 | <span className="temno">Mate</span>
|
---|
45 | </span>
|
---|
46 | </Navbar.Brand>
|
---|
47 | <Navbar.Toggle aria-controls="navbarScroll" />
|
---|
48 | <Navbar.Collapse id="navbarScroll">
|
---|
49 | <Nav className="ms-auto" navbarScroll>
|
---|
50 | <Nav.Link className="m-2" href="/home">
|
---|
51 | Home
|
---|
52 | </Nav.Link>
|
---|
53 | <Nav.Link className="m-2" href="#features">
|
---|
54 | Features
|
---|
55 | </Nav.Link>
|
---|
56 | <Nav.Link className="m-2" href="#pricing">
|
---|
57 | <Button onClick={handleShow}></Button>
|
---|
58 | </Nav.Link>
|
---|
59 | {!isLoggedIn && (
|
---|
60 | <Button
|
---|
61 | className="m-2"
|
---|
62 | size="md"
|
---|
63 | style={{ backgroundColor: "#159895" }}
|
---|
64 | onClick={() => {
|
---|
65 | window.location.href = ("http://localhost:8080/login");
|
---|
66 | }}
|
---|
67 | >
|
---|
68 | <BsFillPersonFill size={"1.5em"}></BsFillPersonFill> Најави се
|
---|
69 | </Button>
|
---|
70 | )}
|
---|
71 | {isLoggedIn && (
|
---|
72 | <>
|
---|
73 | <Nav.Link className="m-2" href="/profile">
|
---|
74 | {Auth.getUser().username}
|
---|
75 | </Nav.Link>
|
---|
76 | <Button
|
---|
77 | className="m-2"
|
---|
78 | size="md"
|
---|
79 | style={{ backgroundColor: "#159895" }}
|
---|
80 | onClick={async () => {
|
---|
81 | await axios.get("/logout")
|
---|
82 | .then((res) => {
|
---|
83 | console.log(res);
|
---|
84 | Auth.userLogout();
|
---|
85 | })
|
---|
86 | .catch((err) => {
|
---|
87 | console.log(err)
|
---|
88 | window.location.href="/login"
|
---|
89 | })
|
---|
90 | }}
|
---|
91 | >
|
---|
92 | <BsFillPersonFill size={"1.5em"}></BsFillPersonFill>
|
---|
93 | Одјави се
|
---|
94 | </Button>
|
---|
95 | </>
|
---|
96 | )}
|
---|
97 | </Nav>
|
---|
98 | </Navbar.Collapse>
|
---|
99 | </Container>
|
---|
100 | </Navbar>
|
---|
101 | <br />
|
---|
102 |
|
---|
103 | <Modal show={show} onHide={handleClose}>
|
---|
104 | <Modal.Header closeButton>
|
---|
105 | <Modal.Title>Modal heading</Modal.Title>
|
---|
106 | </Modal.Header>
|
---|
107 | <Modal.Body><ImageUpload/></Modal.Body>
|
---|
108 | <Modal.Footer>
|
---|
109 | <Button variant="secondary" onClick={handleClose}>
|
---|
110 | Close
|
---|
111 | </Button>
|
---|
112 | <Button variant="primary" onClick={handleClose}>
|
---|
113 | Save Changes
|
---|
114 | </Button>
|
---|
115 | </Modal.Footer>
|
---|
116 | </Modal>
|
---|
117 | </>
|
---|
118 | );
|
---|
119 | }
|
---|
120 |
|
---|
121 | export default Navigation;
|
---|