Reproduce actual website (#2)

* Update Astro configuration and package dependencies

* Add SearchBar component and integrate it into the Header; update styles and media queries

* Update background gradients in SVG and adjust color variables in global CSS for improved theming

* Refactor typography and SVG dimensions: update h1 font size and svg dimensions to use medium spacing for consistency

* Refactor Header component: improve structure and styling for better responsiveness and consistency

* Enhance Header component: implement scroll-based visibility toggle and refine layout structure in Main layout

* Update SearchBar placeholder text for clarity

* Refactor SearchBar styles: reorganize CSS for improved readability and maintainability

* Refactor SearchBar layout: change flex property to width for better responsiveness
Enhance Main layout: add margin-top for main section on small screens
Update global styles: adjust polaroid photo size and width for improved layout on small devices

* Add conditional rendering for SearchBar in Header component

* Add authentication page with login and registration forms, including eye icons for password visibility

* Update authentication page: enhance password input with visibility toggle icons and improve layout

* Add vite-svg-loader to devDependencies in package.json and package-lock.json

* Add vite-svg-loader plugin to Astro configuration for SVG support

* Refactor icon usage in components: replace Icon component with individual SVG imports for GitHub, Contact, Privacy, Search, and Password visibility icons

* Enhance password visibility toggle: add title attribute for accessibility and style adjustments

Author: Vianpyro

astro.config.mjs

@@ -1,14 +1,17 @@
 // @ts-check
 import { defineConfig } from 'astro/config'
+import svgLoader from 'vite-svg-loader'
 
 // https://astro.build/config
 export default defineConfig({
-    output: 'static',
     build: {
         format: 'file',
         assets: 'compressed',
+        assetsPrefix: './',
     },
+    output: 'static',
     vite: {
+        plugins: [svgLoader()],
         server: {
             watch: {
                 usePolling: true,

package-lock.json

@@ -12,6 +12,7 @@
         "astro": "^5.7.7"
     },
     "devDependencies": {
-        "prettier": "^3.5.3"
+        "prettier": "^3.5.3",
+        "vite-svg-loader": "^5.1.0"
     }
 }

package.json

@@ -1,6 +1,8 @@
 ---
 import '../styles/global.css'
-import Icon from '../components/Icon.astro'
+import IconGitHub from '../assets/icon/brand-github.svg'
+import IconContact from '../assets/icon/mail-question.svg'
+import IconPrivacy from '../assets/icon/file-text-shield.svg'
 
 import { SITE_NAME } from '../config.js'
 
@@ -24,14 +26,14 @@ const yearString =
                 target="_blank"
                 rel="noopener noreferrer"
             >
-                <Icon name="brand-github" />
+                <IconGitHub />
             </a>
         </li>
         <li title="Contact Us">
-            <a href="contact.html"><Icon name="mail-question" /></a>
+            <a href="contact.html"><IconContact /></a>
         </li>
         <li title="Privacy Policy">
-            <a href="privacy.html"><Icon name="file-text-shield" /></a>
+            <a href="privacy.html"><IconPrivacy /></a>
         </li>
     </ul>
 </footer>

public/background.svg

@@ -1,30 +1,51 @@
 ---
 import '../styles/global.css'
-import Icon from '../components/Icon.astro'
+import SearchBar from '../components/SearchBar.astro'
+import IconHome from '../assets/icon/home.svg'
+import IconUser from '../assets/icon/user-circle.svg'
 
 import { SITE_NAME } from '../config.js'
+const { canSearch = false } = Astro.props || {}
 ---
 
-<header>
+<header class="show">
     <a href="index.html" title="Home">
-        <Icon name="home" />
+        <IconHome />
         <h1>{SITE_NAME}</h1>
     </a>
+    {canSearch && <SearchBar placeholder="Search for recipes..." />}
     <nav>
         <ul>
             <li title="Account">
-                <a href="authentication.html"><Icon name="user-circle" /></a>
+                <a href="authentication.html"><IconUser /></a>
             </li>
         </ul>
     </nav>
 </header>
 
 <style>
+    h1 {
+        text-wrap: nowrap;
+    }
+
     header {
         background-color: var(--color-primary);
         display: flex;
         justify-content: space-between;
+        position: fixed;
+        gap: var(--spacing-medium);
+        transition: transform 0.5s ease-in-out;
+        white-space: nowrap;
         width: 100%;
+        z-index: 1;
+    }
+
+    header.hide {
+        transform: translateY(-100%);
+    }
+
+    header.show {
+        transform: translateY(0);
     }
 
     header > a {
@@ -44,7 +65,7 @@ import { SITE_NAME } from '../config.js'
         margin: 0 var(--spacing-medium);
     }
 
-    @media screen and (width<=850px) {
+    @media screen and (width<=1000px) {
         header {
             align-items: center;
             flex-direction: column;
@@ -55,12 +76,9 @@ import { SITE_NAME } from '../config.js'
         header > *:last-child {
             margin: 0;
         }
-    }
 
-    @media screen and (width<=850px) {
         h1 {
-            font-size: calc(1.5 * var(--spacing-medium));
-            line-height: calc(2.25 * var(--spacing-medium));
+            font-size: 1.75rem;
         }
 
         svg {
@@ -69,3 +87,18 @@ import { SITE_NAME } from '../config.js'
         }
     }
 </style>
+
+<script type="module" is:inline>
+    const header = document.querySelector('header')
+    let lastScroll = 0
+
+    window.addEventListener('scroll', () => {
+        const current = window.scrollY
+        const scrollingDown = current > lastScroll
+
+        header.classList.toggle('hide', scrollingDown && current > 0)
+        header.classList.toggle('show', !scrollingDown || current <= 0)
+
+        lastScroll = Math.max(current, 0)
+    })
+</script>