<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- ===== CSS ===== -->
        <link rel="stylesheet" href="assets/css/styles.css">
        
        <title>Sidebar sub menus</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <style>
        /*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

/*===== VARIABLES CSS =====*/
:root{
  --nav-width: 92px;

  /*===== Colores =====*/
  --first-color: #0C5DF4;
  --bg-color: #12192C;
  --sub-color: #B6CEFC;
  --white-color: #FFF;
  
  /*===== Fuente y tipografia =====*/
  --body-font: 'Poppins', sans-serif;
  --normal-font-size: 1rem;
  --small-font-size: .875rem;
  
  /*===== z index =====*/
  --z-fixed: 100;
}


/*===== BASE =====*/
*,::before,::after{
  box-sizing: border-box;
}
body{
  position: relative;
  margin: 0;
  padding: 2rem 0 0 6.75rem;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  transition: .5s;
}
h1{
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
a{
  text-decoration: none;
}

/*===== l NAV =====*/
.l-navbar{
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nav-width);
  height: 100vh;
  background-color: var(--bg-color);
  color: var(--white-color);
  padding: 1.5rem 1.5rem 2rem;
  transition: .5s;
  z-index: var(--z-fixed);
}

/*===== NAV =====*/
.nav{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.nav__brand{
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.nav__toggle{
  font-size: 1.25rem;
  padding: .75rem;
  cursor: pointer;
}
.nav__logo{
  color: var(--white-color);
  font-weight: 600;
}

.nav__link{
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: .75rem;
  padding: .75rem;
  color: var(--white-color);
  border-radius: .5rem;
  margin-bottom: 1rem;
  transition: .3s;
  cursor: pointer;
}
.nav__link:hover{
  background-color: var(--first-color);
}
.nav__icon{
  font-size: 1.25rem;
}
.nav__name{
  font-size: var(--small-font-size);
}

/*Expander menu*/
.expander{
  width: calc(var(--nav-width) + 9.25rem);
}

/*Add padding body*/
.body-pd{
  padding: 2rem 0 0 16rem;
}

/*Active links menu*/
.active{
  background-color: var(--first-color);
}

/*===== COLLAPSE =====*/
.collapse{
  grid-template-columns: 20px max-content 1fr;
}
.collapse__link{
  justify-self: flex-end;
  transition: .5s;
}
.collapse__menu{
  display: none;
  padding: .75rem 2.25rem;
}
.collapse__sublink{
  color: var(--sub-color);
  font-size: var(--small-font-size);
}
.collapse__sublink:hover{
  color: var(--white-color);
}

/*Show collapse*/
.showCollapse{
  display: block;
}

/*Rotate icon*/
.rotate{
  transform: rotate(180deg);
}
    </style>
    <body id="body-pd">
        <div class="l-navbar" id="navbar">
            <nav class="nav">
                <div>
                    <div class="nav__brand">
                        <ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
                        <a href="#" class="nav__logo">Bedimcode</a>
                    </div>
                    <div class="nav__list">
                        <a href="#" class="nav__link active">
                            <ion-icon name="home-outline" class="nav__icon"></ion-icon>
                            <span class="nav__name">Dashboard</span>
                        </a>
                        <a href="#" class="nav__link active">
                            <ion-icon name="chatbubbles-outline" class="nav__icon"></ion-icon>
                            <span class="nav__name">Messenger</span>
                        </a>

                        <div  class="nav__link collapse">
                            <ion-icon name="folder-outline" class="nav__icon"></ion-icon>
                            <span class="nav__name">Projects</span>

                            <ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>

                            <ul class="collapse__menu">
                                <a href="#" class="collapse__sublink">Data</a>
                                <a href="#" class="collapse__sublink">Group</a>
                                <a href="#" class="collapse__sublink">Members</a>
                            </ul>
                        </div>

                        <a href="#" class="nav__link">
                            <ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
                            <span class="nav__name">Analytics</span>
                        </a>
                        <div class="nav__link collapse">
                            <ion-icon name="people-outline" class="nav__icon"></ion-icon>
                            <span class="nav__name">Team</span>

                            <ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>

                            <ul class="collapse__menu">
                                <a href="#" class="collapse__sublink">Data</a>
                                <a href="#" class="collapse__sublink">Group</a>
                                <a href="#" class="collapse__sublink">Members</a>
                            </ul>
                        </div>
                        <a href="#" class="nav__link">
                            <ion-icon name="settings-outline" class="nav__icon"></ion-icon>
                            <span class="nav__name">Settings</span>
                        </a>
                    </div>
                </div>

                <a href="#" class="nav__link">
                    <ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
                    <span class="nav__name">Log Out</span>
                </a>
            </nav>
        </div>

        <h1>Componentes</h1>
        <div id="dashboard_div" class="">
         <div class="grid grid-cols-1 md:grid-cols-2 p-4 gap-4">
            <div style="background-color: #E5F6FA;" class="camp-box p-3 rounded shadow-sm hover:shadow-lg">
               <h1 class="pb-4 font-semibold text-xl font-oswald"><%= campground.title%></h1>
               <p class="camp-description font-montserrat">
                  <%= campground.location%>
               </p>
               <div class="flex justify-between mt-4">
                  <p class="text-gray-700 font-montserrat text-base font-semibold mb-2">Total Capacity : <f
                     id="total-capacity" class="font-normal">100</f>
               </p>
               <p class="text-gray-700 font-montserrat text-base font-semibold mb-4">Remaining space : <f
                     id="remaining-space" class="font-normal text-green-400">50</f>
               </p>
               </div>
            </div>
            <div style="background-color: #E5F6FA;" class="camp-box p-3 rounded shadow-sm hover:shadow-lg">
               <h1 class="pb-4 font-semibold text-xl font-oswald">Address</h1>
               <p class="camp-description font-montserrat">
                  Address Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016
               </p>
               <p class="text-gray-700 font-montserrat text-base mt-5 font-semibold">Contact Number : <f
                     class="font-normal">9876543452</f>
               </p>
            </div>
         </div>

         <!-- Progress bar -->
         <div style="background-color: #E5F6FA;" class="grid grid-cols-1 p-4 gap-4">
            <div class="progress-bar rounded-lg w-full shadow-sm hover:shadow-lg block p-4 m-auto">
               <div>
                  <span
                     class="text-sm font-semibold camp-capacity inline-block py-1 px-2 uppercase rounded-full text-black bg-white">
                     Requirements
                  </span>
               </div>
              <p>this is the requirements</p>
               </div>
            </div>
         </div>
         <!-- Progress bar end -->

         <div class="block md:flex gap-4 p-4 md:mb-14">
            <div style="background-color: #E5F6FA;" class="camp-box w-full md:w-2/6 rounded p-3 mb-4 md:mb-0 col-span-2">
               <iframe class="w-full h-full md:h-80"
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2822.7806761080233!2d-93.29138368446431!3d44.96844997909819!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x52b32b6ee2c87c91%3A0xc20dff2748d2bd92!2sWalker+Art+Center!5e0!3m2!1sen!2sus!4v1514524647889"
                  frameborder="0" style="border:0"></iframe>
            </div>
            <div style="background-color: #E5F6FA;" class="camp-box p-3 w-full md:w-2/3 rounded col-span-3">
               <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 md:gap-1">
                  <div>
                     <img alt="gallery" class="w-full object-cover object-center block rounded"
                        src="https://cdn.pixabay.com/photo/2016/02/19/20/57/iceland-1211171_960_720.jpg">
                  </div>
                  <div>
                     <img alt="gallery" class="w-full object-cover object-center block rounded"
                        src="https://cdn.pixabay.com/photo/2016/02/19/20/57/iceland-1211171_960_720.jpg">
                  </div>
                  <div>
                     <img alt="gallery" class="w-full object-cover object-center block rounded"
                        src="https://cdn.pixabay.com/photo/2016/02/19/20/57/iceland-1211171_960_720.jpg">
                  </div>
                  <div>
                     <img alt="gallery" class="w-full object-cover object-center block rounded"
                        src="https://cdn.pixabay.com/photo/2016/02/19/20/57/iceland-1211171_960_720.jpg">
                  </div>
                  <div>
                     <img alt="gallery" class="w-full object-cover object-center block rounded"
                        src="https://cdn.pixabay.com/photo/2016/02/19/20/57/iceland-1211171_960_720.jpg">
                  </div>
               </div>
            </div>
         </div>
      </div>
  
         <div></div>

        <!-- ===== IONICONS ===== -->
        <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
        
        <!-- ===== MAIN JS ===== -->
        <script src="assets/js/main.js"></script>
        <script>
            /*===== EXPANDER MENU  =====*/ 
const showMenu = (toggleId, navbarId, bodyId)=>{
  const toggle = document.getElementById(toggleId),
  navbar = document.getElementById(navbarId),
  bodypadding = document.getElementById(bodyId)

  if(toggle && navbar){
    toggle.addEventListener('click', ()=>{
      navbar.classList.toggle('expander')

      bodypadding.classList.toggle('body-pd')
    })
  }
}
showMenu('nav-toggle','navbar','body-pd')

/*===== LINK ACTIVE  =====*/ 
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
  linkColor.forEach(l=> l.classList.remove('active'))
  this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))


/*===== COLLAPSE MENU  =====*/ 
const linkCollapse = document.getElementsByClassName('collapse__link')
var i

for(i=0;i<linkCollapse.length;i++){
  linkCollapse[i].addEventListener('click', function(){
    const collapseMenu = this.nextElementSibling
    collapseMenu.classList.toggle('showCollapse')

    const rotate = collapseMenu.previousElementSibling
    rotate.classList.toggle('rotate')
  })
}


        </script>
    </body>
</html>