@dcrackel/meyersquaredui/src/stories/Organisms/Headers/ScrollNav/ScrollNav.stories.js

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import ScrollNav from './ScrollNav.vue';
export default {
    title: 'Organisms/Headers/ScrollNav',
    component: ScrollNav,
    argTypes: {},
};

const Template = (args, { argTypes }) => ({
    components: { ScrollNav },
    setup() {
        return { args };
    },
    template: `
    <div>
      <!-- Simulating a hero banner -->
      <div id="hero" class="h-screen bg-gray-400 flex justify-center items-center">
        <h1 class="text-4xl text-white">Hero Banner</h1>
      </div>
      
      <!-- ScrollNav Component -->
      <ScrollNav v-bind="args" />

      <!-- Simulate some content to scroll through -->
      <div class="h-screen bg-gray-100 flex justify-center items-center">
        <p class="text-2xl">Scroll down to see the Nav Bar appear!</p>
      </div>
    </div>
  `,
});

export const Default = Template.bind({});
Default.args = {};