diff --git a/client/css/catalog.css b/client/css/catalog.css
index 7e0c8d66b9f8184ddf1df074e5a0f8cf7a6bcfe9..3987914848b5079cd8bd9d111640e776af53383c 100644
--- a/client/css/catalog.css
+++ b/client/css/catalog.css
@@ -14,24 +14,28 @@
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
+ display: flex;
+ flex-direction: column;
}
.center{
text-align: center;
- position: relative;
+ position: absolute;
width: 100%;
+ bottom: 10px;
}
.pageview{
width: 100%;
- height: 92vh;
- top: 8%;
+ height: 85vh;
+ top: 0%;
flex-shrink: 0;
position: relative;
}
.catalogview{
- height: 86vh;
+ height: 85vh;
+ padding-top: 20px;
text-align: center;
}
diff --git a/client/css/navbar.css b/client/css/navbar.css
index cdbc2e7be1e26b759c07f4c871c1e47c1073fb4d..a2c2bd119ff8bc22d6ecc549ddc42dc8be983ec5 100644
--- a/client/css/navbar.css
+++ b/client/css/navbar.css
@@ -1,33 +1,30 @@
-.navbar-container {
- display: flex;
- justify-content: space-evenly;
- background-color: #AA1E1E;
- border: none;
- outline: none;
- color: #eaeaea;
- /* float: left; */
- font-size: 17px;
- width: 100%;
- height: 8%;
-}
img{
- /* float: left; */
- margin: 5px;
+ float: left;
+ margin: 10px;
min-width: 100px;
min-height: 50px;
}
+.tabgroup{
+ background-color: #AA1E1E;
+ color: #eaeaea;
+ outline: none;
+ font-size: 17px;
+ width: 100%;
+ height: 8%;
+ position: relative;
+}
.searchbar {
- /* float: left; */
+ float: left;
padding: 6px;
background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67));
margin-top: 15px;
margin-left: 10%;
border-radius: 10px;
display: flex;
- /* align-items: center; */
+ align-items: center;
max-height: 35px;
transition: max-height 0.5s;
overflow: hidden;
@@ -36,28 +33,32 @@ img{
.searchbar input{
- background: transparent;
background-color: transparent;
border: none;
- outline: none;
font-size: 20px;
margin-left: 10px;
width: 100%;
- border: 0;
+}
+input{
+ width: 100%;
+ background: transparent;
+ border: 0;
+ outline: 0;
}
+
.tabexpand{
-
+ background-color: #AA1E1E;
color: #eaeaea;
float: left;
border: none;
-
+ outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
- font-size: 5vh;
- padding: 10px 14px;
+ font-size: 30px;
+ padding: 14px 14px;
width: 5%;
height: 100%;
}
@@ -66,74 +67,73 @@ img{
background-color: transparent;
color: #eaeaea;
border: none;
-
+ outline: none;
cursor: pointer;
font-size: 17px;
- /* padding: 17px 0px; */
+ padding: 17px 0px;
width: 10%;
text-align: center;
border-radius: 10px;
height: 100%;
}
-/* .tabbutton{
-
+.tabbutton{
+ background-color: #AA1E1E;
color: #eaeaea;
float: left;
border: none;
-
+ outline: none;
cursor: pointer;
font-size: 17px;
padding: 14px 16px;
width: 13%;
-} */
+}
.tabright{
-
+ background-color: #AA1E1E;
color: #eaeaea;
float: right;
border: none;
-
+ outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
- font-size: 3vh;
+ font-size: 30px;
padding: 17px 14px;
width: 13%;
- /* height: 100%; */
+ height: 100%;
}
-/* .tabaccount{
-
+.tabaccount{
+ background-color: #AA1E1E;
color: #eaeaea;
float: right;
border: none;
-
+ outline: none;
cursor: pointer;
text-align: center;
font-size: 30px;
padding: 14px 16px;
width: 5%;
margin-left: 50px;
-} */
+}
@media screen and (max-width: 850px){
.tabaccount, .tabright{
- font-size: 3vh;
+ font-size: 8px;
width: 17%;
height: 100%;
}
.tabexpand{
- font-size: 3vh;
+ font-size: 15px;
width: 10%;
}
.searchbar{
margin-left: 5%;
width: 50%;
- margin-top: 3.5px;
- margin-bottom: 3.5px;
+ margin-top: 7px;
}
img{
display: none;
@@ -142,16 +142,10 @@ img{
@media screen and (max-width: 1350px) and (min-width: 851px) {
.tabaccount, .tabright{
- font-size: 3.5vh;
+ font-size: 25px;
}
.tabexpand{
- font-size: 3.5vh;
- }
- .searchbar{
- margin: 5px;
- }
- img{
- margin: 5px;
+ font-size: 25px;
}
}
diff --git a/client/css/sidebar.css b/client/css/sidebar.css
new file mode 100644
index 0000000000000000000000000000000000000000..048d0b3645c545846887583ebd4ff1bb0c1d9736
--- /dev/null
+++ b/client/css/sidebar.css
@@ -0,0 +1,35 @@
+@import url('https://fonts.googleapis.com/css?family=Inter');
+
+
+.sidebar{
+ width: 13%;
+ top: 8%;
+ left: -20%;
+ padding-top: 2vh;
+ background-color: rgb(12, 12, 82);
+ height: 92%;
+ transition: all 0.2s;
+ position: fixed;
+}
+
+.sidebar li{
+ list-style-type: none;
+ margin-bottom: 15px;
+ margin-left: 10px;
+ padding-bottom: 10px;
+}
+
+.sidebar li a{
+ font-size: 15px;
+ margin-left: 2px;
+ color: #fff;
+ text-decoration: none;
+ display: block;
+}
+
+#logout{
+ position: absolute;
+ bottom: 10px;
+}
+
+
diff --git a/client/js/catalog.js b/client/js/catalog.js
index 97cfb10cb2100acad49b4ba9f53517d9f2d72876..0d1b0c807563709a9280ae0e8e81d0d9cc1579bf 100644
--- a/client/js/catalog.js
+++ b/client/js/catalog.js
@@ -1,22 +1,9 @@
var activePage;
-
-
-function debounce(func, delay=1000){
- let timer = null;
- return (...args) => {
- clearTimeout(timer);
- timer = setTimeout(() => func.apply(this, args), delay);
- };
-}
-
-
-
//Promise is to syncronize asyncronous process
const input = document.getElementById("Searchinput");
var myPromises = new Promise(function(resolve, reject){
const formdata = new FormData();
- formdata.append("signal", "getTotalRows");
formdata.append('search', document.getElementById("Searchinput").value);
console.log(input.value);
@@ -28,7 +15,7 @@ var myPromises = new Promise(function(resolve, reject){
var responseData = JSON.parse(xhr.responseText);
if (responseData.success){
//if expected process occur during promise get the expected value
- resolve(Math.ceil(responseData.total[0]/10)-1);
+ resolve(Math.ceil(responseData.total[0]/10));
} else {
alert("error: " + responseData.message);
//unexpected process occur during promise
@@ -113,7 +100,7 @@ function changePage(page){
</button>`
}
- var endpage = numPages-4;
+ var endpage = numPages-5;
for (var i = 0; i < pages.length; i++){
diff --git a/client/js/login-page.js b/client/js/login-page.js
index e87eaa638da84f29408ee6611cacb51eeabfca9d..e956baac46e579607507a0852b8af1cd6c3243a0 100644
--- a/client/js/login-page.js
+++ b/client/js/login-page.js
@@ -112,7 +112,7 @@ signupBtn.onclick = function(){
signupBtn.style.color = "#fff";
signinBtn.style.color = "#555";
nameField.style.maxHeight = "60px";
- title.innerHTML = "SIGN UP";``
+ title.innerHTML = "SIGN UP";
signupBtn.classList.remove("disable");
signinBtn.classList.add("disable");
diff --git a/client/js/navbar.js b/client/js/navbar.js
index 2f6ce98160fb70cd0351bfe156f19bd2797cf915..f51feeaecfb68f73a0ca7da74255f6718de9e0db 100644
--- a/client/js/navbar.js
+++ b/client/js/navbar.js
@@ -1,24 +1,23 @@
+
addnavbar = () => {
return document.getElementById("tabgroup").innerHTML =`
- <div class="navbar-container">
- <a class="tabexpand" href="#">
- <i class="fa-solid fa-bars"></i>
- </a>
- <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%">
- <div class="searchbar">
- <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress="">
- <button class="search" onclick="">
- <i class="fa-solid fa-magnifying-glass"></i>
- </button>
- </div>
- <a class="tabright" href="#">
- <i class="fa-solid fa-cart-shopping"></i>
- Cart
- </a>
- <a class="tabright" href="../pages/catalog.php">
- <i class="fa-solid fa-clipboard-list"></i>
- Catalog
- </a>
+ <a id="tabexpand" class="tabexpand" href="javascript:openSidebar()" onclick="openSidebar()">
+ <i class="fa-solid fa-bars"></i>
+ </a>
+ <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%">
+ <div class="searchbar">
+ <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress="">
+ <button class="search" onclick="">
+ <i class="fa-solid fa-magnifying-glass"></i>
+ </button>
</div>
+ <a class="tabright" href="#">
+ <i class="fa-solid fa-cart-shopping"></i>
+ Cart
+ </a>
+ <a class="tabright" href="../pages/catalog.php">
+ <i class="fa-solid fa-clipboard-list"></i>
+ Catalog
+ </a>
`
}
\ No newline at end of file
diff --git a/client/js/sidebar.js b/client/js/sidebar.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8d254719bb096cf85f4f90607434c42ecd12c3a
--- /dev/null
+++ b/client/js/sidebar.js
@@ -0,0 +1,38 @@
+function openSidebar(){
+ document.getElementById("sidebar").style.left = "-20%";
+ document.getElementById("tabexpand").setAttribute("href","javascript:closeSidebar()");
+ document.getElementById("tabexpand").setAttribute("onclick","");
+}
+
+function closeSidebar(){
+ document.getElementById("sidebar").style.left = "0%";
+ document.getElementById("tabexpand").setAttribute("href","javascript:openSidebar()");
+ document.getElementById("tabexpand").setAttribute("onclick","");
+}
+
+addsidebar = () => {
+ return document.getElementById("sidebar").innerHTML = `
+ <li><a href='#' id="account">
+ <i class="fa-solid fa-user"></i> Account
+ </a></li>
+ <li><a href='#' id="manageuser">
+ <i class="fa-solid fa-people-roof"></i>
+ Manage User
+ </a></li>
+ <li><a href='#' id="manageitem">
+ <i class="fa-solid fa-layer-group"></i>
+ Manage Item
+ </a></li>
+ <li><a href='#' id="adduser">
+ <i class="fa-solid fa-user-plus"></i>
+ Add User
+ </a></li>
+ <li><a href='#' id="makesale">
+ <i class="fa-solid fa-cart-plus"></i>
+ Make Sale
+ </a></li>
+ <li><a href='#' id="logout">
+ <i class="fa-solid fa-right-from-bracket"></i>
+ Log Out
+ </a></li>1`
+}
\ No newline at end of file
diff --git a/client/js/util.js b/client/js/util.js
new file mode 100644
index 0000000000000000000000000000000000000000..1baa13f1f65e802a3b787279d6499ff795608627
--- /dev/null
+++ b/client/js/util.js
@@ -0,0 +1,8 @@
+//debounce function utility
+function debounce(func, delay=1000){
+ let timer = null;
+ return (...args) => {
+ clearTimeout(timer);
+ timer = setTimeout(() => func.apply(this, args), delay);
+ };
+}
diff --git a/client/pages/catalog.php b/client/pages/catalog.php
index fd105e48d938c874b42ca38212b3c8b45c04504c..83de04c16266e8998333f477c2e3dec506811b80 100644
--- a/client/pages/catalog.php
+++ b/client/pages/catalog.php
@@ -5,9 +5,12 @@
<title>Catalog</title>
<link rel="stylesheet" href="../css/catalog.css">
<link rel="stylesheet" href="../css/navbar.css">
+ <link rel="stylesheet" href="../css/sidebar.css">
<script src="../js/navbar.js"></script>
- <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
+ <script src="../js/sidebar.js"></script>
<script src="../js/catalog.js"></script>
+ <script src="../js/util.js"></script>
+ <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
@@ -36,6 +39,11 @@
<a href="javascript:nextPage()" id="btnNext">Next</a>
</div>
</div>
+ <div class="sidebar" id="sidebar">
+ <script>
+ addsidebar();
+ </script>
+ </div>
</div>
</body>
</html>
\ No newline at end of file
diff --git a/client/protoype/sidebar.html b/client/protoype/sidebar.html
new file mode 100644
index 0000000000000000000000000000000000000000..544bfc298f02c9d2e7bc363a990a7ddb13610726
--- /dev/null
+++ b/client/protoype/sidebar.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="viewport" content="width=device-width, initial scale=1.0">
+ <title>Homepage</title>
+ <link rel="stylesheet" href="../css/navbar.css">
+ <link rel="stylesheet" href="../css/sidebar.css">
+ <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
+ <script src="../js/navbar.js"></script>
+ <script src="../js/sidebar.js"></script>
+</head>
+<body>
+ <div class="container">
+ <div class="tabgroup" id="tabgroup">
+ <script>
+ addnavbar();
+ </script>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <!--admin sidebar-->
+ <li><a href='#' id="manageuser">
+ <i class="fa-solid fa-people-roof"></i>
+ Manage User
+ </a></li>
+ <li><a href='#' id="manageitem">
+ <i class="fa-solid fa-layer-group"></i>
+ Manage Item
+ </a></li>
+ <li><a href='#' id="adduser">
+ <i class="fa-solid fa-user-plus"></i>
+ Add User
+ </a></li>
+ <li><a href='#' id="additem">
+ <i class="fa-solid fa-cart-plus"></i>
+ Add Item
+ </a></li>
+ <li><a href='#' id="logout">
+ <i class="fa-solid fa-right-from-bracket"></i>
+ Log Out
+ </a></li>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file