<template>
 <Navbar
  :position="position"
  :top="0"
  z="1"
  relative-width="100"
  :background-color="navBarBackground"
  :margin="navBarMargin"
  :class="classObject"
 >
  <Container
   :background-color="containerBackground"
   :rounded="!scrolled"
   :shadow="!scrolled"
   :padding="padding"
   :class="classObject"
  >
   <slot />
  </Container>
 </Navbar>
</template>

<script setup>
import Navbar from "../../bootstrap/navbar/Navbar";
import Container from "../../bootstrap/grid/Container";
import { useWindowScroll } from "../../../composables/utils/helpers";
import { computed } from "#imports";
const props = defineProps({
  offsetTop: {
    type: Number,
    default: 100
  },
  backgroundColor: {
    type: String,
    default: "white"
  },
  margin: {
    type: String,
    default: "t-5"
  },
  padding: {
    type: String,
    default: "3"
  }
});
const windowScroll = useWindowScroll();
const scrolled = computed(() => windowScroll.y.value > props.offsetTop);
const position = computed(() => scrolled.value ? "fixed" : "absolute");
const navBarBackground = computed(() => scrolled.value ? props.backgroundColor : "transparent");
const navBarMargin = computed(() => scrolled.value ? "0" : props.margin);
const containerBackground = computed(() => scrolled.value ? void 0 : props.backgroundColor);
const classObject = computed(() => ({
  "un-transition-all": true,
  [`un-duration-100`]: true,
  ["un-ease-in-out"]: true
}));
</script>
