Many changes aded to system.

client/General/headerbar.css

@@ -0,0 +1,62 @@
+ /* Basic styling for the navigation panel */
+.sidenav {
+    height: 100%;
+    width: 250px;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: -250px;
+    background-color: #333;
+    overflow-x: hidden;
+    transition: 0.5s;
+}
+
+.sidenav a {
+    padding: 16px 8px 16px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f1f1f1;
+    display: block;
+    transition: 0.3s;
+}
+
+.sidenav a:hover {
+    background-color: #555;
+}
+
+/* Button to toggle the sidenav */
+.openbtn {
+    cursor: pointer;
+}
+
+.openbtn:hover {
+    background-color: #444;
+}
+
+.closeBtn {
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    font-size: 24px !important;
+    margin-left: 50px;
+    cursor: pointer;
+}
+
+.closeBtn:hover {
+    background-color: #444;
+}
+
+/* Top section for title and other information */
+.top-section {
+    padding: 30px;
+    text-align: center;
+    background-color: #555;
+    color: white;
+    font-size: 24px;
+}
+
+/* On smaller screens, reduce the size of the sidenav button */
+@media screen and (max-height: 450px) {
+    .sidenav {padding-top: 15px;}
+    .sidenav a {font-size: 18px;}
+}