Make the navbarHeader sticky.

Author: peeweetje

netflix-create-react-vite-app/src/components/navbarmenu/navbarheader/navbar-styles.tsx

@@ -5,6 +5,12 @@ export const NavbarMenu = styled.nav`
   width: 100%;
   justify-content: center;
   align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background-color: ${(props) => props.theme.colors.black};
+  padding-top: ${(props) => props.theme.space[2]};
+  padding-bottom: ${(props) => props.theme.space[2]};
 
   @media (max-width: 768px) {
     flex-direction: column;

netflix-create-react-vite-app/src/components/navbarmenu/navbarheader/navbarHeader.tsx

@@ -8,20 +8,15 @@ import {
   ToggleButton,
 } from './navbar-styles';
 import { SearchBar } from './search-bar/searchBar';
-import { useLocation } from 'react-router-dom';
 import { useTheme } from '../../../context/themeContext';
-import styled from 'styled-components';
 
-
-
-export type navbarHeaderProps = {
-  onChange: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+interface NavbarHeaderProps  {
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   value: string;
-};
+}
 
 export const NavbarHeader = ({ onChange, value }: navbarHeaderProps) => {
   const { t } = useTranslation();
-  const location = useLocation();
   const { toggleTheme } = useTheme();
 
   return (
@@ -48,10 +43,10 @@ export const NavbarHeader = ({ onChange, value }: navbarHeaderProps) => {
           {t('my-list')}
         </NavItems>
       </NavList>
-      <ToggleButton onClick={toggleTheme}>
-        Toggle Theme
-      </ToggleButton>
+      <ToggleButton onClick={toggleTheme}>Switch Theme</ToggleButton>
       <SearchBar onChange={onChange} value={value} />
     </NavbarMenu>
   );
 };
+
+