<?php   
ob_start(); //এটা এবং এর ইনড-ফ্লাস না দিলে; যদি নেট গতি কম হয় তাহলে ডাটাবেজ পাবে না।
include("configa.php");
 $result = mysqli_query($conn,"SELECT distinct category_name FROM goods_category ") or die(mysqli_error($conn));

 // mysqli_close($conn);
ob_end_flush();
?>


<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name="theme-color" content="#FF0000">
    
<title>অনলাইন শপ</title>
   

  
</head>
<body>


<div class="topbar">Hamisa</div>


<div class="menubar">



  <div class="menubar_one">
    <div class="menu_symbol">
    <img class="menu_symbol_image" src="logo/menu_symbol.png">
    </div>
    
    <div><img class="hamisah_big" src="logo/hamisah_big5.png"></div>
    <div class="search_box_big">
    <img class="search_symbol_image" src="logo/search.png">
    <div></div>
    <input class="search_input" type="" name="">
    <div></div>
    <span class="reset_button">x</span>
    </div>
    <div></div>
    <div><img class="troli_symbol" src="logo/troli.png"></div>
    <div class="loging_link"><strong>Login</strong></div> 
  </div>

</div>



<div>Jamal </div>

<div class="container">

  <div class="sidebar">

    <div class="sidebar_under"> 
      <div class="close_sybmol">        
      <img class="close_sybmol_image" src="logo/close_button.png">   
      </div>

      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      <a href="">কৃষি</a>
      <a href="">ফ্যাশন</a>
      <a href="">মাছ</a>
      </div>
      


    </div>

    <div style="width: 100%; background-color: red; padding: 10pt;" class="">
      Al Arabia Offset Press Al Arabia Offset Press Al Arabia Offset Press Al Arabia Offset Press Al Arabia Offset Press Al Arabia Offset Press Al Arabia Offset Press Al Arabia Offset Press Al Arabia Offset Press Al Arabia Offset Press  
    </div>


</div>



<style type="text/css">


  *{
    margin : 0pt;
    padding: 0pt;
    /*border: solid 1pt;*/
  }

  .topbar{
/*    width: 100%;
*/  background-color: #E1A066;
    padding: 5pt;
    }


    .menubar{
     background-color: #C3104D;

    }

    .menubar_one{
      align-items: flex-start;
/*      height: 20pt;
*/      padding: 15pt;
/*      width: 100%;
*/      display: grid;
      grid-template-columns: repeat(6, 10%15%40%25%5%5%);
      background-color: #C3104D;

    }

    .menu_symbol{
    }

    .menu_symbol_image{
      width: 20pt;
      height: 20pt;
    }

    .hamisah_big{
      max-height: 40pt;
    }

    .search_box_big{
      background-color : #FFFFBE;
      padding: 8pt;
      display: flex;
      flex-direction: row;
      align-items: center;
    }


    .search_symbol_image{
      width: 20pt;
      height: 20pt;
    }

    .search_input{
      width: 100%;
      height: 20pt;
      border: solid 1pt; 
      margin : 5pt;

    }


    .troli_symbol{
      width: 20pt;
      height: 20pt;
    }

    .loging_link{
      width: 20pt;
      height: 20pt;
      color: white;
    }



.close_sybmol_image{
  max-width: 20pt;

}


  .sidebar{
    display: none;
    width: 20%;  
  }


  .sidebar_under{
    display: flex;
    flex-direction: column;
    background-color: #CA2991; 
    color: black; 
    padding: 20pt;
    width: 100%;
    box-sizing: border-box;    
  }


  .sidebar_under > a{
    color: white;  
    padding : 10pt;
    text-decoration: none; 
    border: solid 0pt;
  }


  .sidebar_under > a:hover{
    background-color: #c2185b; /* গাঢ় ম্যাজেন্টা */
    padding-top: 12pt;
  }


.close_sybmol :hover{
 transform: scale(1.15); /* হোভারে হালকা বড় হবে */
 box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2); /* হোভারে গাঢ় শ্যাডো */
  }


.container{
  display: grid;
  grid-template-columns:repeat(2, 30% 70% 1fr );


}


</style>
 


<script>
  document.addEventListener("DOMContentLoaded", function() {
    const menuButton = document.querySelector('.menu_symbol');
    const closeButton = document.querySelector('.close_sybmol');
    const sidebar = document.querySelector('.sidebar');

    // Toggle sidebar on menu symbol click
    menuButton.addEventListener('click', function() {
      sidebar.style.display = (sidebar.style.display === "block") ? "none" : "block";
    });

    // Hide sidebar on close symbol click
    closeButton.addEventListener('click', function() {
      sidebar.style.display = "none";
    });
  });
</script>



<script>
  document.addEventListener("DOMContentLoaded", function() {
    const menuButton = document.querySelector('.menu_symbol_small');
    const closeButton = document.querySelector('.close_sybmol');
    const sidebar = document.querySelector('.sidebar');

    // Toggle sidebar on menu symbol click
    menuButton.addEventListener('click', function() {
      sidebar.style.display = (sidebar.style.display === "block") ? "none" : "block";
    });

    // Hide sidebar on close symbol click
    closeButton.addEventListener('click', function() {
      sidebar.style.display = "none";
    });
  });
</script>





<!-- <script type="text/javascript">
  // Get references to the search input and reset button for the large menu
  const searchInput = document.querySelector('.search_input');
  const resetButton = document.querySelector('.reset_button');

  // Add event listener to the reset button to clear the search input
  resetButton.addEventListener('click', function() {
    searchInput.value = ''; // Set the input value to an empty string
  });
</script> -->



<script>
  // বড় স্ক্রিনের রিসেট বাটনের জন্য
  document.querySelector('.reset_button').addEventListener('click', function () {
    document.querySelector('.search_input').value = '';
  });

  // ছোট স্ক্রিনের রিসেট বাটনের জন্য
  document.querySelector('.reset_button_small').addEventListener('click', function () {
    document.querySelector('.search_input_small').value = '';
  });
</script>






</body>
</html>
