[{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "18047",
	"severity": 8,
	"message": "'header' is possibly 'null'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 7,
	"endLineNumber": 66,
	"endColumn": 13
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2339",
	"severity": 8,
	"message": "Property 'style' does not exist on type 'Element'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 14,
	"endLineNumber": 66,
	"endColumn": 19
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'linear'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 33,
	"endLineNumber": 66,
	"endColumn": 39
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'gradient'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 40,
	"endLineNumber": 66,
	"endColumn": 48
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'to'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 49,
	"endLineNumber": 66,
	"endColumn": 51
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'right'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 52,
	"endLineNumber": 66,
	"endColumn": 57
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1005",
	"severity": 8,
	"message": "',' expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 52,
	"endLineNumber": 66,
	"endColumn": 57
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2581",
	"severity": 8,
	"message": "Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i --save-dev @types/jquery`.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 79,
	"endLineNumber": 66,
	"endColumn": 80
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1005",
	"severity": 8,
	"message": "',' expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 80,
	"endLineNumber": 66,
	"endColumn": 81
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2365",
	"severity": 8,
	"message": "Operator '<' cannot be applied to types '{}' and 'number'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 80,
	"endLineNumber": 66,
	"endColumn": 85
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2365",
	"severity": 8,
	"message": "Operator '>' cannot be applied to types 'boolean' and 'number'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 80,
	"endLineNumber": 66,
	"endColumn": 110
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2365",
	"severity": 8,
	"message": "Operator '<' cannot be applied to types 'boolean' and 'number'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 80,
	"endLineNumber": 66,
	"endColumn": 114
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1136",
	"severity": 8,
	"message": "Property assignment expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 81,
	"endLineNumber": 66,
	"endColumn": 82
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'br'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 82,
	"endLineNumber": 66,
	"endColumn": 84
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1109",
	"severity": 8,
	"message": "Expression expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 85,
	"endLineNumber": 66,
	"endColumn": 86
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'br'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 111,
	"endLineNumber": 66,
	"endColumn": 113
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1109",
	"severity": 8,
	"message": "Expression expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 114,
	"endLineNumber": 66,
	"endColumn": 115
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1109",
	"severity": 8,
	"message": "Expression expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 116,
	"endLineNumber": 66,
	"endColumn": 117
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1005",
	"severity": 8,
	"message": "',' expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 117,
	"endLineNumber": 66,
	"endColumn": 118
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1134",
	"severity": 8,
	"message": "Variable declaration expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 118,
	"endLineNumber": 66,
	"endColumn": 119
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "7005",
	"severity": 8,
	"message": "Variable 'rgba' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 120,
	"endLineNumber": 66,
	"endColumn": 124
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1005",
	"severity": 8,
	"message": "',' expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 124,
	"endLineNumber": 66,
	"endColumn": 125
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2695",
	"severity": 8,
	"message": "Left side of comma operator is unused and has no side effects.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 125,
	"endLineNumber": 66,
	"endColumn": 128,
	"tags": [
		1
	]
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2695",
	"severity": 8,
	"message": "Left side of comma operator is unused and has no side effects.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 125,
	"endLineNumber": 66,
	"endColumn": 133,
	"tags": [
		1
	]
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2695",
	"severity": 8,
	"message": "Left side of comma operator is unused and has no side effects.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 125,
	"endLineNumber": 66,
	"endColumn": 138,
	"tags": [
		1
	]
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2581",
	"severity": 8,
	"message": "Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i --save-dev @types/jquery`.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 140,
	"endLineNumber": 66,
	"endColumn": 141
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1005",
	"severity": 8,
	"message": "')' expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 141,
	"endLineNumber": 66,
	"endColumn": 142
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'leftOpacity'.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 152,
	"endLineNumber": 66,
	"endColumn": 163
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1128",
	"severity": 8,
	"message": "Declaration or statement expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 164,
	"endLineNumber": 66,
	"endColumn": 165
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1128",
	"severity": 8,
	"message": "Declaration or statement expected.",
	"source": "ts",
	"startLineNumber": 66,
	"startColumn": 165,
	"endLineNumber": 66,
	"endColumn": 166
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "18047",
	"severity": 8,
	"message": "'logoContainer' is possibly 'null'.",
	"source": "ts",
	"startLineNumber": 69,
	"startColumn": 7,
	"endLineNumber": 69,
	"endColumn": 20
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2339",
	"severity": 8,
	"message": "Property 'style' does not exist on type 'Element'.",
	"source": "ts",
	"startLineNumber": 69,
	"startColumn": 21,
	"endLineNumber": 69,
	"endColumn": 26
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2581",
	"severity": 8,
	"message": "Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i --save-dev @types/jquery`.",
	"source": "ts",
	"startLineNumber": 69,
	"startColumn": 37,
	"endLineNumber": 69,
	"endColumn": 38
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1005",
	"severity": 8,
	"message": "';' expected.",
	"source": "ts",
	"startLineNumber": 69,
	"startColumn": 38,
	"endLineNumber": 69,
	"endColumn": 39
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'leftOpacity'.",
	"source": "ts",
	"startLineNumber": 69,
	"startColumn": 51,
	"endLineNumber": 69,
	"endColumn": 62
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "18047",
	"severity": 8,
	"message": "'nav' is possibly 'null'.",
	"source": "ts",
	"startLineNumber": 70,
	"startColumn": 7,
	"endLineNumber": 70,
	"endColumn": 10
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2339",
	"severity": 8,
	"message": "Property 'style' does not exist on type 'Element'.",
	"source": "ts",
	"startLineNumber": 70,
	"startColumn": 11,
	"endLineNumber": 70,
	"endColumn": 16
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2581",
	"severity": 8,
	"message": "Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i --save-dev @types/jquery`.",
	"source": "ts",
	"startLineNumber": 70,
	"startColumn": 27,
	"endLineNumber": 70,
	"endColumn": 28
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1005",
	"severity": 8,
	"message": "';' expected.",
	"source": "ts",
	"startLineNumber": 70,
	"startColumn": 28,
	"endLineNumber": 70,
	"endColumn": 29
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2304",
	"severity": 8,
	"message": "Cannot find name 'leftOpacity'.",
	"source": "ts",
	"startLineNumber": 70,
	"startColumn": 39,
	"endLineNumber": 70,
	"endColumn": 50
},{
	"resource": "/home/dev/re/src/layouts/Header.astro",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "1128",
	"severity": 8,
	"message": "Declaration or statement expected.",
	"source": "ts",
	"startLineNumber": 71,
	"startColumn": 5,
	"endLineNumber": 71,
	"endColumn": 6
}]
---
/* No frontmatter needed as we're not importing any modules */
---

<header class="header">
  <div class="logo-container">
    <img src="/path_to_your_logo.png" alt="Logo" class="logo" />
  </div>
  <nav class="nav">
    <ul class="nav-list">
      <li class="nav-item">
        <a href="#">Site</a>
        <ul class="dropdown">
          <li><a href="#">My Chart</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a href="#">Categories</a>
        <ul class="dropdown">
          <!-- Replace with your actual categories -->
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
          <li><a href="#">Category 6</a></li>
          <li><a href="#">Category 7</a></li>
          <li><a href="#">Category 8</a></li>
          <li><a href="#">Category 9</a></li>
          <li><a href="#">Category 10</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a href="#">Account</a>
        <div class="dropdown login-form">
          <form>
            <label>
              Email:
              <input type="email" name="email" />
            </label>
            <label>
              Password:
              <input type="password" name="password" />
            </label>
            <button type="submit">Sign In</button>
          </form>
        </div>
      </li>
    </ul>
  </nav>

  <!-- Client-side script for handling scroll events -->
  <script>
    const header = document.querySelector('.header');
    const logoContainer = document.querySelector('.logo-container');
    const nav = document.querySelector('.nav');

    const handleScroll = () => {
      const scrollPosition = window.pageYOffset;
      const leftOpacity = Math.min(1, scrollPosition / 200);
      const rightOpacity = 1 - leftOpacity;

      // Adjust header background gradient
      header.style.background = linear-gradient(to right, rgba(173, 216, 230, ${<br/> 0.5 + 0.5 * leftOpacity<br/> }), rgba(152, 251, 152, ${1 - 0.5 * leftOpacity}));

      // Adjust opacity of logo and nav
      logoContainer.style.opacity = ${0.5 + 0.5 * leftOpacity};
      nav.style.opacity = ${1 - 0.5 * leftOpacity};
    };

    window.addEventListener('scroll', handleScroll);

    // Initial call to set styles based on initial scroll position
    handleScroll();
  </script>
</header>

<style>
  /* Reset some default styles */
   {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Header styling */
  .header {
    position: fixed;
    top: 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    z-index: 1000;
    transition: background 0.3s ease;
    background: linear-gradient(
      to right,
      rgba(131, 220, 250, 0.501),
      rgb(157, 243, 212)
    );
  }

  /* Logo container */
  .logo-container {
    flex-shrink: 0;
    transition: opacity 0.3s ease;
  }

  /* Logo image */
  .logo {
    width: 450px;
    height: 50px;
    object-fit: contain;
    transition: width 0.3s ease, height 0.3s ease;
  }

  /* Responsive logo sizing */
  @media (max-width: 768px) {
    .logo {
      width: 300px;
      height: 40px;
    }
  }

  @media (max-width: 480px) {
    .logo {
      width: 200px;
      height: 30px;
    }
  }

  /* Navigation bar */
  .nav {
    display: flex;
    transition: opacity 0.3s ease;
  }

  .nav-list {
    list-style: none;
    display: flex;
  }

  .nav-item {
    position: relative;
    margin-left: 20px;
  }

  .nav-item a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
  }

  /* Dropdown menu */
  .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    min-width: 150px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  .dropdown li {
    width: 100%;
  }

  .dropdown li a {
    color: #000;
    padding: 8px 12px;
    display: block;
  }

  .dropdown li a:hover {
    background-color: #ddd;
  }

  /* Show dropdown on hover */
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown {
    display: block;
  }

  /* Login form styling */
  .login-form {
    padding: 10px;
  }

  .login-form form {
    display: flex;
    flex-direction: column;
  }

  .login-form label {
    margin-bottom: 5px;
    font-size: 14px;
  }

  .login-form input {
    padding: 5px;
    margin-bottom: 10px;
  }

  .login-form button {
    padding: 5px;
  }
</style>