fixed the navbar,header and hamburger-sidebar

samyakmaitre · Oct 27, 2024 · 45572f3 · 45572f3
1 parent 476688d
commit 45572f3
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/styles/NavBar.css b/src/assets/styles/NavBar.css
@@ -67,7 +67,7 @@
   transition: width 0.3s ease;
   position: absolute;
   left: 50%;
-  bottom: -5px;
+  bottom:0px;
   transform: translateX(-50%);
 }
 

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -41,10 +41,10 @@ function Header({ onSearch }) {
           <img src={Logo} alt="Logo" className="aspect-[3/2] object-contain"/>
         </a>
       </div>
-      <div className="search-location-container d-flex align-items-center w-100">
+      <div className="search-location-container d-flex justify-center align-items-center w-100">
         <div
           className="search-bar input-group w-75"
-          style={{ marginLeft: "20px" }}
+          style={{ marginLeft: "5px", marginRight:"-17px" }}
         >
           <input
             type="text"
@@ -79,7 +79,7 @@ function Header({ onSearch }) {
         ) : (
           <div className="flex flex-row gap-2 justify-center items-center">
             <button
-              className="px-2 rounded-lg w-[120px] py-2 border-[2px] font-semibold hover:font-semibold hover:text-white border-red-600 hover:bg-red-500"
+              className="hidden sm:block px-2 rounded-lg w-[120px] py-2 border-[2px] font-semibold hover:font-semibold hover:text-white border-red-600 hover:bg-red-500"
               onClick={() => navigate("/login")}
             >
               Login/SignUp

diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js
@@ -40,7 +40,7 @@ const ImageSlider = () => {
   };
 
   return (
-    <div className="slider-container">
+    <div className="slider-container xl:pt-0 pt-6">
       <Slider {...settings}>
         <div>
           <ImageWithNoEffect imageSrc={image1} altText="Image 1" />

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -7,7 +7,7 @@ const Navbar = () => {
 
   return (
     <nav className="navbar secondsnav">
-      <div className="container mx-auto px-4 py-3 flex justify-between items-center ">
+      <div className="container mx-auto px-4 py-3 flex justify-center items-center gap-x-10" style={{justifyContent:"center"}}>
         <div className="flex space-x-8">
           <NavLink
             to="/movies"

diff --git a/src/components/SideMenu.js b/src/components/SideMenu.js
@@ -59,7 +59,7 @@ const SideMenu = ({ isMenuOpen, toggleMenu }) => {
     <>
       <div
         ref={menuRef}
-        className={`fixed top-0 right-0 h-full w-[20%] bg-white shadow-lg transform transition-transform duration-300 ease-in-out ${
+        className={`fixed top-0 right-0 h-full w-[20%] bg-white shadow-lg transform transition-transform duration-300 ease-in-out w-auto ${
           isMenuOpen ? "translate-x-0" : "translate-x-full"
         } z-50`}
       >
@@ -83,8 +83,8 @@ const SideMenu = ({ isMenuOpen, toggleMenu }) => {
             <div className="h-10 min-w-10 bg-red-500 rounded-full flex items-center justify-center">
               <Gift className="text-white" size={18} />
             </div>
-            <div className="flex flex-col justify-center px-2">
-              <p className="text-sm text-gray-100 leading-none">
+            <div className="flex flex-col justify-center px-2 h-9">
+              <p className="text-sm text-gray-100 leading-none h-0">
                 Unlock special offers & benefits
               </p>
             </div>