---
import type { PageData } from '../../../interfaces/PageData.ts'
import type { SocialData } from '../../../interfaces/SocialData.ts'
interface Props {
   title: string
   background: string
   pageList: PageData
   social: SocialData
}
const { title, background, pageList, social } = Astro.props
const pages = pageList.pages
---

<div class='drawer-content flex flex-col'>
   <!-- Navbar -->
   <div class=`navbar ${background} w-full`>
      <div class='mx-2 flex-1 px-2'>{title}</div>
      <div class='flex-none lg:hidden'>
         <label
            for='sideNav'
            aria-label='open sidebar'
            class='btn btn-square btn-ghost focus:z-20'
         >
            <svg
               xmlns='http://www.w3.org/2000/svg'
               fill='none'
               viewBox='0 0 24 24'
               class='inline-block h-6 w-6 stroke-current'
            >
               <path
                  stroke-linecap='round'
                  stroke-linejoin='round'
                  stroke-width='2'
                  d='M4 6h16M4 12h16M4 18h16'
               ></path>
            </svg>
         </label>
      </div>
      <div class='hidden flex-none lg:block'>
         <ul class='menu menu-horizontal'>
            <!-- Navbar menu content here -->
            {
               pages.map((page) => {
                  if (page.parent === 'none') {
                     return (
                        <li>
                           <a>{page.title}</a>
                        </li>
                     )
                  }
               })
            }
         </ul>
      </div>
   </div>
   <!-- Page content here -->
   <slot />
</div>