Mengambil function pada jquery not defined

Jadi saya mau ngambil fungsi dari event onclick ketika menekan tombol dengan script dibawah ini

<div class="w3-left">
  <button id="tombol-nav" class="w3-button w3-xxlarge" onclick="buka_nav()">☰</button>
</div>

nih script jquerynya

<script>
      $(document).ready(function(){

        // Tombol nav
        function buka_nav() {
          $('#main').css('marginLeft', '300px');
          $('#sidebar').css('width', '300px');
          $('#sidebar').css('display', 'block');
          $('#tombol-nav').css('display', 'none');
        }

        function tutup_nav() {
          $('#main').css('marginLeft', '0');
          $('#sidebar').css('display', 'none');
          $('#tombol-nav').css('display', 'inline-block');
        }

dst ...

pas di load error, muncul tulisan "Uncaught ReferenceError: buka_nav is not defined at HTMLButtonElement.onclick ((index):27)" di console browser

sebenarnya hal yang saya mau lakuin dapat berjalan dengan mengeluarkan fungsi itu dari dalam kode jquery itu dengan menggunakan penulisan js biasa diluarnya. Namun saya hanya bingung kenapa fungsi nya gak bisa di panggil ketika fungsinya berada dalam script jquery? Semoga jelas ...