aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-10-01 22:13:51 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-10-01 22:13:51 +0530
commite5c1454c091cb4101664d1bfa0e766ab37e9879a (patch)
tree7f7c8424b4f14f42758e951476ef252660ddfef4 /src
parent8c01e16a8336a91659db7bf73ffe94077f90e25b (diff)
created a navbar
Diffstat (limited to 'src')
-rw-r--r--src/App.js6
-rw-r--r--src/App.scss11
-rw-r--r--src/_colors.scss1
-rw-r--r--src/components/navbar/navbar.js86
-rw-r--r--src/components/navbar/navbar.scss59
-rw-r--r--src/components/tables/scss/_colors.scss2
-rw-r--r--src/components/tables/scss/table.scss6
-rw-r--r--src/views/homepage.js (renamed from src/views/new-invoice.js)14
8 files changed, 171 insertions, 14 deletions
diff --git a/src/App.js b/src/App.js
index 6e90a3d..7ea7ca9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,8 +15,10 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
-import './App.scss';
import { BrowserRouter, Route, Routes } from "react-router-dom";
+import './App.scss';
+import Navbar from './components/navbar/navbar';
+import HomePage from './views/homepage';
import ManageItemsPage from './views/manage/items';
import ManageClientsPage from './views/manage/clients';
import ManageBrandsPage from './views/manage/brands';
@@ -24,8 +26,10 @@ import ManageBrandsPage from './views/manage/brands';
const App = () => {
return (
<BrowserRouter>
+ <Navbar/>
<main>
<Routes>
+ <Route exact path="/" element={<HomePage/>}/>
<Route exact path="/manage/items" element={<ManageItemsPage/>}/>
<Route exact path="/manage/clients" element={<ManageClientsPage/>}/>
<Route exact path="/manage/brands" element={<ManageBrandsPage/>}/>
diff --git a/src/App.scss b/src/App.scss
index b4fc72f..6215663 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -35,7 +35,7 @@ main {
width: 100%;
max-width: 1500px;
margin: 0 auto;
- min-height: 100vh;
+ min-height: calc(100vh - 4rem);
padding: 0.7rem 0.5rem;
box-sizing: border-box;
}
@@ -49,3 +49,12 @@ a {
color: $linkColor;
text-decoration: none;
}
+
+::selection {
+ color: $fgColor;
+ background: $primaryAccentColor;
+}
+::-moz-selection {
+ color: $fgColor;
+ background: $primaryAccentColor;
+}
diff --git a/src/_colors.scss b/src/_colors.scss
index ced67aa..0eb1854 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -19,6 +19,7 @@ $primaryAccentColor: #bd93f9;
$secondaryAccentColor: #d0afff;
$backgroundColor: #282a36;
+$altBackgroundColor: #383a59;
$linkColor: $primaryAccentColor;
$white: #f8f8f2;
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;
+ }
+ }
+}
diff --git a/src/components/tables/scss/_colors.scss b/src/components/tables/scss/_colors.scss
index 2a3725c..7077b62 100644
--- a/src/components/tables/scss/_colors.scss
+++ b/src/components/tables/scss/_colors.scss
@@ -28,6 +28,8 @@ $fgColorDisabled: $disabledColor;
$inputBackgroundColor: $backgroundColor;
+$thColor: $altBackgroundColor;
+
$warningColor: $warningColor;
@mixin button {
diff --git a/src/components/tables/scss/table.scss b/src/components/tables/scss/table.scss
index d9be7c8..13e247a 100644
--- a/src/components/tables/scss/table.scss
+++ b/src/components/tables/scss/table.scss
@@ -15,20 +15,22 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
+@import "colors";
+
table {
width: 90%;
margin: auto;
th {
box-sizing: border-box;
- background-color: #383a59;
+ background-color: $thColor;
font-weight: normal;
text-align: left;
padding-left: 0.3rem;
}
tr:hover {
- background-color: rgba(#383a59, 0.4);
+ background-color: rgba($thColor, 0.4);
}
td {
diff --git a/src/views/new-invoice.js b/src/views/homepage.js
index bba149a..fe32136 100644
--- a/src/views/new-invoice.js
+++ b/src/views/homepage.js
@@ -15,19 +15,13 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
-import NewBrand from './../components/doc-editors/new-brand';
-import ItemEditor from './../components/doc-editors/item-editor';
-
-const NewInvoicePage = () => {
+const HomePage = () => {
return (
<>
- <h1>Billing Page</h1>
- <h2>Add new brand:</h2>
- <NewBrand/>
- <h2>Add new item:</h2>
- <ItemEditor/>
+ <h1>Welcome to OpenBills</h1>
+ <p>Check out <a href="/manage">/manage</a></p>
</>
);
}
-export default NewInvoicePage;
+export default HomePage;