fixed some responsive issues

like navbar and explore going behind sidebar
Aman-Mandal · Oct 5, 2022 · b423042 · b423042
1 parent 33b49fc
commit b423042
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx
@@ -50,7 +50,11 @@ const Navbar = () => {
   }, [screenSize]);
 
   return (
-    <div className={`w-full flex items-center justify-between my-4 px-8`}>
+    <div
+      className={`flex items-center justify-between my-4 px-8 ${
+        activeMenu && "md:ml-60"
+      }`}
+    >
       <div className="flex items-center gap-32">
         <div className="flex items-center gap-8">
           <IconButton

diff --git a/components/Sidebar/Sidebar.jsx b/components/Sidebar/Sidebar.jsx
@@ -30,7 +30,7 @@ const Sidebar = () => {
         onClick={(event) => event.stopPropagation()}
       >
         <Cross onClick={() => setActiveMenu(false)} />
-        <div className="flex justify-between items-center gap-3 ml-3 text-xl font-extrabold tracking-tight text-slate-900">
+        <div className="flex justify-between items-center gap-3 ml-3 md:pt-0 pt-3 text-xl font-extrabold tracking-tight text-slate-900">
           <Link href="/">
             <span className="text-2x text-gray-100">Groovy</span>
           </Link>

diff --git a/components/svg/Cross.js b/components/svg/Cross.js
@@ -8,7 +8,7 @@ const Cross = (props) => {
       viewBox="0 0 24 24"
       style={{ strokeWidth: "2" }}
       stroke="currentColor"
-      className="w-6 h-6 text-white ml-auto m-5 cursor-pointer"
+      className="w-6 h-6 text-white ml-auto m-5 cursor-pointer md:block hidden"
     >
       <path
         style={{

diff --git a/pages/Explore.jsx b/pages/Explore.jsx
@@ -10,7 +10,7 @@ const Explore = () => {
   const { activeMenu, setActiveMenu } = useStateContext();
 
   return (
-    <div className={`flex flex-col gap-4 mt-12 mx-8`}>
+    <div className={`flex flex-col gap-4 mt-12 px-8 ${activeMenu && 'md:ml-60'}`}>
       <h2 className="text-2xl font-normal text-gray-100">Trending New Hits</h2>
 
       <div className="grid grid-cols-4 gap-4 mt-6">