Meine Bücher weiter gemacht part 3

abmelden_erfolgreich.php

@@ -27,11 +27,6 @@
         <a id="buecher" href="buecher.php">Bücher</a>
         <a id="meinebuecher" href="anmelden_meinebuecher.php">
             Meine Bücher</a>
-        <?php
-        session_start();
-        if(isset($_SESSION["eingeloggt"])  && $_SESSION["eingeloggt"] == 1 ){
-            echo "<a id='abmelden' href='abmelden.php'>Abmelden</a>";}
-        ?>
         <form action="suchergebnisse.php">
             <input type="hidden" name="searchType" value="simple">
             <input name="searchFor" class="suchleiste" type="search"

burgerIcon.js

@@ -23,6 +23,14 @@ function openNav() {
         pointer-events: auto;
         opacity: 1;
       }
+      
+      #erweitertesuche{
+        position: fixed;
+        right: 450px;
+        top: 13px;
+        opacity: 1;
+        pointer-events: auto;
+      }
     
       #nav-toggle {
         opacity: 1;
@@ -39,7 +47,7 @@ function openNav() {
 
       .suchleiste{
         position: fixed;
-        right: 280px;
+        right: 233px;
         top: 0px;
       }
       #buttonID{

meinebuecher.php

@@ -166,8 +166,8 @@ if(isset($_POST['submit'])){
                                     </div>
                                     
                                 </div>
-                                <div class='shoppingCart_container'>
+                                <div class='placeholder_container'>
-                                   <div class='shoppingCart' id='shoppingCart$ausleihID'></div>
+                                   <div class='placeholder' id='placeholder$ausleihID'></div>
                                 </div>
                                 <script type='text/javascript' 
                                         language='JavaScript'>
@@ -180,12 +180,14 @@ if(isset($_POST['submit'])){
                                                     parentDiv.style.backgroundColor 
                                                     = '#70AD47';
                                                     document.getElementById('bestellungsInfo$ausleihID').innerHTML = 'Diese Reservierung verfällt, wenn das Buch nicht bis zum $bookStartdatePlusSeven abgeholt wurde.';
-                                                    document.getElementById('shoppingCart$ausleihID').style.backgroundImage = url('pictures/bin.png')
+                                                    document.getElementById('placeholder$ausleihID').classList.add('bin');
+                                                    document.getElementById('placeholder$ausleihID').addEventListener('click', )
                                                 }
                                                 // Ausgeliehen und Verlängerbar
                                                 else if (currentElement.innerHTML.trim().includes('Rückgabe') && $bookExtendable === 1){
                                                     parentDiv.style.backgroundColor 
                                                     = '#70AD47';
+                                                    document.getElementById('placeholder$ausleihID').classList.add('extend');
                                                 } 
                                                 // Ausgeliehen und nicht Verlängerbar
                                                 else if (currentElement.innerHTML.trim().includes('Rückgabe') && $bookExtendable === 0){
@@ -197,6 +199,7 @@ if(isset($_POST['submit'])){
                                                     parentDiv.style.backgroundColor 
                                                     = '#F34343';
                                                     document.getElementById('bestellungsInfo$ausleihID').innerHTML = 'Dieses Buch ist für sie Reserviert.';
+                                                    document.getElementById('placeholder$ausleihID').classList.add('bin');
                                                 }
                                             })();
                                         </script>

style.css

@@ -1737,9 +1737,8 @@ input[type=number] {
   }
   /*Reposition*/
   #erweitertesuche{
-    position: fixed;
+    opacity: 0;
-    right: 60px;
+    pointer-events: none;
-    top: 15px;
   }
   
   /*Burger Icon creation and position*/

suchergebnisse.css

@@ -97,6 +97,46 @@
     cursor: pointer;
 }
 
+.bin_container {
+    /* background-color: chartreuse; */
+    margin-left: auto;
+    margin-top: auto;
+    flex: 0 0 40px;
+}
+
+.bin {
+    background-image: url('pictures/bin.png');
+    width: 40px;
+    height: 40px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.bin:hover {
+    background-image: url('pictures/bin_hover.png');
+    cursor: pointer;
+}
+
+.extend {
+    background-image: url('pictures/extend.png');
+    width: 40px;
+    height: 40px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.extend:hover {
+    background-image: url('pictures/extend_hover.png');
+    cursor: pointer;
+}
+
+.placeholder_container {
+    /* background-color: chartreuse; */
+    margin-left: auto;
+    margin-top: auto;
+    flex: 0 0 40px;
+}
+
 .divider {
     margin-top: 15px;
     margin-bottom: 15px;