searchbar

my-next-app/src/app/moviepage/page.module.css

@@ -1,6 +1,6 @@
 .wrapper {
-    background: linear-gradient(150deg, #001523, #003356, #001523 90%);
+  background: linear-gradient(150deg, #001523, #003356, #001523 90%);
+}
+.text {
+  color: #d7dae3;
 }
-.text{
-    color: #D7DAE3
-}

my-next-app/src/components/Header/Header.jsx

@@ -1,10 +1,29 @@
+'use client';
 import styles from './Header.module.css'; // Import CSS Modules
+import { useState } from 'react';
+import SearchBar from './searchBar.jsx';
 
 export default function Header() {
+  const [isSearchActive, setIsSearchActive] = useState(false);
+
+  const handleSearchClick = () => {
+    setIsSearchActive(true);
+  };
+
+  const handleCloseSearch = () => {
+    setIsSearchActive(false);
+  };
+
   return (
-    <header className={styles.header}>
-      <h1 className={styles.title}>📽️Reel Magic📽️</h1>
-      <button aria-label="Search" className={styles.searchButton}>
+    <header className={`${styles.header} ${isSearchActive ? styles.searchActiveHeader : ''}`}>
+      <h1 className={`${styles.title} ${isSearchActive ? styles.hidden : ''}`}>
+        :film_projector:Reel Magic:film_projector:
+      </h1>
+      <button
+        aria-label="Search"
+        className={`${styles.searchButton} ${isSearchActive ? styles.searchActive : ''}`}
+        onClick={!isSearchActive ? handleSearchClick : undefined}
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="24px"
@@ -16,11 +35,11 @@ export default function Header() {
           strokeLinecap="round"
           strokeLinejoin="round"
         >
-          This removes searchbar circle fill so the background is black
           <circle className={styles.iconStroke} cx="10" cy="10" r="7" />
           <line className={styles.iconStroke} x1="21" y1="21" x2="15" y2="15" />
         </svg>
       </button>
+      {isSearchActive && <SearchBar onClose={handleCloseSearch} />}
     </header>
   );
 }

my-next-app/src/components/Header/Header.module.css

@@ -1,21 +1,30 @@
 .header {
   display: flex; /* Use flexbox for layout */
   align-items: center; /* Align items vertically in the center */
-  justify-content: space-between; /* Space between title and button */
+  /* justify-content: space-between; Space between title and button */
+  justify-content: flex-end; /* Initially align items to the right */
   padding: 10px 15px; /* Add padding around the header for mobile */
-  background-color: #000;
-  box-sizing: border-box;
+  background-color: #001523;
   width: 100%; /* Set background color for visibility */
+  position: relative; /* Ensure relative positioning for search bar */
+  transition: justify-content 0.3s; /* Smooth transition for search bar */
 }
 
 .title {
   margin: 0; /* Remove default margin */
   font-size: 1.2rem; /* Set font size */
   color: #fff; /* Set text color */
   letter-spacing: 0.2em;
-  flex: 1; /* Allow title to take available space */
-  white-space: nowrap; /* Prevent title from wrapping to next line */
-  text-overflow: ellipsis; /* Show ellipsis for overflow text */
+  flex: 1;/* Allow title to take available space */
+  white-space: nowrap;/* Prevent title from wrapping to next line */
+  text-overflow: ellipsis;/* Show ellipsis for overflow text */
+  transition: opacity 0.3s;
+  display: block;
+}
+
+.title.hidden {
+  opacity: 0;
+  display: none;
 }
 
 .searchButton {
@@ -28,15 +37,17 @@
   justify-content: center; /* Center the icon horizontally */
   outline: none; /* Remove default outline on focus */
   margin-left: 15px; /* Add space between title and button */
-  transition: stroke 0.3s; /* Smooth transitions */
+  transition: margin-left 0.3s ease, transform 0.3s ease;
+  position: relative;
+  z-index: 2; /* Ensure the button stays above the search bar */
 }
 
+
 .searchButton svg {
   width: 24px; /* Set SVG width */
   height: 24px; /* Set SVG height */
-  transition:
-    fill 0.3s,
-    stroke 0.3s; /* Smooth transition for hover effect */
+  transition: fill 0.3s, stroke 0.3s;
+   /* Smooth transition for hover effect */
 }
 
 .iconFill {
@@ -56,11 +67,25 @@
 }
 
 .searchButton:focus {
-  /* /added to prevent the box of the button from having an outline when clicked,
- if you want to see the button being clicked add colour etc as needed. */
-  box-shadow: none;
+/* /added to prevent the box of the button from having an outline when clicked,
+if you want to see the button being clicked add colour etc as needed. */
+  box-shadow: none
 }
 
 .searchButton:focus .iconStroke {
   stroke: #fff; /* Ensure stroke remains white on focus */
 }
+
+/* Shift search button to the left when active */
+.searchActive {
+  margin-left: 0;
+  position: absolute;
+  left: 15px; /* Move to the left side */
+  right: auto;
+  transform: translateX(0);
+}
+
+/* Adjust header's justify-content when search is active */
+.searchActiveHeader {
+  justify-content: flex-start; /* Align items to the left */
+}

my-next-app/src/components/Header/SearchBar.module.css

@@ -0,0 +1,52 @@
+/* my-next-app/src/components/SearchBar.module.css */
+
+.searchBar {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    margin-left: 50px; /* Add space to the left to accommodate the shifted button */
+    transition: opacity 0.3s ease;
+}
+
+.input {
+    flex: 1;
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    outline: none;
+    background: #fff;
+    color: #000;
+}
+
+.closeButton {
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-size: 1.2rem;
+    cursor: pointer;
+    margin-left: 8px;
+}
+
+.submitButton {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    margin-left: 8px;
+}
+
+/* Responsive Styles */
+@media (max-width: 600px) {
+    .searchBar {
+        margin-left: 40px; /* Adjust spacing for smaller screens */
+    }
+
+    .input {
+        font-size: 0.9rem;
+    }
+}
+
+/* Optional: Style for the placeholder text */
+.input::placeholder {
+    color: #888; /* Sets placeholder text color to a shade of gray */
+}