created a navbar

9 files changed, 171 insertions, 14 deletions

diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..8be973c
--- /dev/null
+++ b/public/logo.png
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;