fix: design

app/components/Navbar.php

@@ -5,7 +5,7 @@
         <img src="<?= BASE_URL ?>/icon/close.svg" alt="Close menu" width="3%" id="btn">
             <img src="<?= BASE_URL ?>/icon/menu.svg" alt="menu icon" width="3%" id="open">
         </label>
-        <div class="sidebar">
+        <div class="sidebar closed">
             <div class="top">
             <img src="<?= BASE_URL ?>/images/white-logo.svg" alt="White Logo" width="80%">
             </div>  

app/pages/book/BookDetailPage.php

@@ -38,6 +38,9 @@
 
         <!-- check ownership -->
         <?php
+            if(isset($this->data['username'])):
+            if(isset($this->data['own'])):
+                
             $bookIdToCheck = $this->data['book_id'];
             $found = false;
 
@@ -54,6 +57,8 @@
             Your browser does not support the audio element.
         </audio>
         <?php endif; ?>
+        <?php endif; ?>
+        <?php endif; ?>
         </div>
         <?php else : ?>
         <h2 class="info">Can't find the book you're looking for!</h2>

app/pages/book/BookListPage.php

@@ -80,6 +80,8 @@
                     </div>
                     <div class="button-container">
                     <?php
+                        if(isset($this->data['username'])):
+                        if(isset($this->data['own'])):
                         $bookIdToCheck = $book['book_id'];
                         $found = false;
 
@@ -90,7 +92,7 @@
                             }
                         }
 
-                        if (isset($this->data['username']) && $this->data['role'] == 'customer' && !$found):
+                        if ($this->data['role'] == 'customer' && !$found):
                         ?>
                     <form action= "/book/buy/<?=$book['book_id']?>" method="POST">
                         <input type="submit" class="button green-reverse-button" value="Buy"></input>
@@ -107,7 +109,8 @@
                     >
                         Delete
                     </a>
-
+                    <?php endif;?>
+                    <?php endif;?>
                     <?php endif;?>
                     <a type="button" class="button yellow-reverse-button" href="/book/details/<?=$book['book_id']?>">Details</a>
                 </div>

app/public/styles/template/navbar.css

@@ -80,6 +80,10 @@ ul li:hover a img {
     margin-right: 4rem;
 }
 
+.sidebar.closed {
+    left: -15vw;
+}
+
 #check {
     display: none;
 }
@@ -103,18 +107,18 @@ label #open {
 
 label #btn {
     z-index: 1111;
-    left: 15vw;
+    left: -15vw;
     color: #000000;
     padding: 4px;
     transition: all 0.5s ease;
 }
 
 #check:checked~.sidebar {
-    left: -15vw;
+    left: 0vw;
 }
 
 #check:checked~label #btn {
-    left: -195px;
+    left: 15vw;
 }
 
 .section {