aboutsummaryrefslogtreecommitdiff
path: root/src/components/navbar
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/navbar')
-rw-r--r--src/components/navbar/navbar.js86
-rw-r--r--src/components/navbar/navbar.scss59
2 files changed, 145 insertions, 0 deletions
diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js
new file mode 100644
index 0000000..79a02e4
--- /dev/null
+++ b/src/components/navbar/navbar.js
@@ -0,0 +1,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"/>
+ </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;
diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss
new file mode 100644
index 0000000..8173249
--- /dev/null
+++ b/src/components/navbar/navbar.scss
@@ -0,0 +1,59 @@
+/* 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 "../../colors";
+
+.navbar {
+ height: 4rem;
+ width: 100%;
+ box-sizing: border-box;
+ background-color: rgba($altBackgroundColor, 1);
+ position: relative;
+
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .buttons {
+ flex: 1;
+ display: flex;
+ justify-content: right;
+ a {
+ margin-left: 0.3rem;
+ margin-right: 0.3rem;
+ color: $fgColor;
+ }
+ a.current {
+ color: $linkColor;
+ }
+ }
+
+ .status {
+ flex: 2;
+ text-align: center;
+ }
+
+ .logo {
+ flex: 1;
+ img {
+ height: 4rem;
+ }
+ }
+}