/* Common styles for .floating-nav */

.floating-nav {

  position: fixed;

  left: 0;

  width: 55px;

  z-index: 9999;

  border-top-right-radius: 20px;

  border-bottom-right-radius: 20px;

  cursor: pointer;

  overflow: hidden;

  transition: top 0.2s ease-out; /* Smooth transition for vertical movement */

}



/* Positioning for logged-out users */

body.logged-out .floating-nav {

  top: 0; /* Very top */

}



/* Positioning for logged-in users */

body.logged-in .floating-nav {

  top: 32px; /* Adjust this value to fit after the admin bar */

}



/* Ensure no horizontal overflow on the body */

body {

  overflow-x: hidden;

}



/* Control overflow on .floating-nav and .nav-items */

.floating-nav {

  overflow: hidden; /* Prevent overflow */

}



.nav-items {

  overflow-x: hidden; /* Prevent horizontal overflow */

}



.nav-items .nav-close-x {

  justify-content: center;

  padding-left: 0px;

}



/* If needed, also add this to your wrapper or container */

.container,

.wrapper {

  overflow-x: hidden; /* Prevent horizontal overflow */

}



.toggle-nav {

  padding: 10px;

  border-bottom-right-radius: 20px;

  border-top-right-radius: 20px;

}



.toggle-nav span.open img {

  width: 26px;

}



.toggle-nav span.close {

  display: none;

}



.nav-items {

  position: fixed;

  left: 0px; /* Adjust this value as needed */

  list-style: none;

  padding: 0;

  margin: 0;

  display: none; /* Hidden by default */

  background: #485a22;

  z-index: 9998;

  height: 95vh; /* Adjust height as needed */

  overflow-y: scroll; /* Make it scrollable */

}



.nav-items::-webkit-scrollbar {

  display: none; /* Hide scrollbar */

}



.floating-nav.expanded .toggle-nav span.open {

  display: none;

}



.floating-nav.expanded .toggle-nav span.close {

  display: block;

}



.floating-nav.expanded + .nav-items {

  display: block; /* Show the ul when expanded */

}



.floating-nav.expanded {

  transition: height 0.3s ease-in-out;

}



.nav-items li {

  display: flex;

  align-items: center;

  padding: 5px;

}

.nav-items {

  transition: opacity 0.3s ease-in-out;

}



.nav-items li img {

  max-width: 40px;

  margin-right: 0px;

}



.nav-items li span {

  display: none;

}



.nav-items.slideDown {

  display: block; /* Ensure the nav-items are displayed */

  opacity: 1; /* Ensure the opacity is set to 1 for smooth fading in */

}



.nav-items.slideUp {

  opacity: 0; /* Ensure the opacity is set to 0 for smooth fading out */

  display: none; /* Ensure the nav-items are hidden */

}



.floating-nav.expanded + .nav-items li span {

  display: block;

}



/* Positioning for logged-out users */

body.logged-out .nav-items {

  top: 0; /* Very top */

}



/* Positioning for logged-in users */

body.logged-in .nav-items {

  top: 32px; /* Adjust this value to fit after the admin bar */

}



/* Disable text selection */

body.dragging,

body.dragging * {

  user-select: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

}



/* Media query */

@media (max-width: 480px) {

  body.logged-out .floating-nav,

  body.logged-in .floating-nav {

    top: 108px;

    border-top-right-radius: 20px;

  }



  body.logged-out .nav-items,

  body.logged-in .nav-items {

    top: 160px; /* Same adjustment as .floating-nav */

    height: 50vh; /* Adjust height as needed */

  }

}