aboutsummaryrefslogtreecommitdiff
path: root/src/components/navbar/navbar.js
blob: bf909e738f834f2177a7e1841f418174f9f81847 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/* OpenBills-web - Web based libre billing software
 * Copyright (C) 2022  Vidhu Kant Sharma <vidhukant@vidhukant.xyz>

 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.

 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

import './navbar.scss';
import { useLocation, Link } from 'react-router-dom';
import { useState, useEffect } from 'react';

const Navbar = () => {
  const [status, setStatus] = useState("");
  const location = useLocation().pathname;

  useEffect(() => {
    if (location.includes("/manage")) {
      switch (location) {
        case "/manage/items":
          setStatus("Manage Saved Items")
          break;
        case "/manage/clients":
          setStatus("Manage Saved Clients")
          break;
        case "/manage/brands":
          setStatus("Manage Saved Brands")
          break;
        default:
          setStatus("Manage Data")
          break;
      }
    } else {
      if (location === "/") {
        setStatus("Welcome To OpenBills")
      }
    }

  }, [location])

  // TODO: add manage invoices page
  const manageLinks = [
    {text: "Edit Items", to: "/manage/items"},
    {text: "Edit Clients", to: "/manage/clients"},
    {text: "Edit Brands", to: "/manage/brands"}
  ];

  return (
    <div className={"navbar"}>
      <span className={"logo"}>
        <Link to="/">
          <img src="/logo.png" alt="App Logo"/>
        </Link>
      </span>

      <p className={"status"}>
        {status}
      </p>

      <span className={"buttons"}>
        {location.includes("/manage") &&
          manageLinks.map((i, id) =>
            <Link key={`link-${id}`} to={i.to} className={i.to === location ? "current" : ""}>
              {i.text}
            </Link>
        )}
        {location !== "/" &&
          <Link to="/" className={location === "/" ? "current" : ""}>
            Home
          </Link>
        }
      </span>
    </div>
  );
}

export default Navbar;