add margin top when top nav is opened

G-Techs · Jun 27, 2022 · 8c2cd22 · 8c2cd22
1 parent d535cff
commit 8c2cd22
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/components/CategoryPage/index.jsx b/components/CategoryPage/index.jsx
@@ -1,11 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 import Category from "../modules/Category";
 import PageCard from "../modules/__modules__/Card/PageCard";
 
 const CategoryPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+
   return (
-    <PageCard>
-      <Category />
+    <PageCard setIsTopNav={setIsTopNav}>
+      <Category isTopNav={isTopNav} />
     </PageCard>
   );
 };

diff --git a/components/modules/Category/index.jsx b/components/modules/Category/index.jsx
@@ -1,10 +1,15 @@
 import React from "react";
 import { VPen, VTrash } from "../__modules/Vectors";
 import Link from "next/link";
+import PropTypes from "prop-types";
 
-const Category = () => {
+const Category = ({ isTopNav }) => {
   return (
-    <div className="my-24 bg-white flex flex-col mr-5 border shadow-lg rounded-lg overflow-x-auto">
+    <div
+      className={`my-24 bg-white flex flex-col mr-5 border shadow-lg rounded-lg overflow-x-auto ${
+        isTopNav && "my-40"
+      } transition-all`}
+    >
       <div className="flex justify-between items-center px-5 py-5 border-b border-gray-200">
         <h3 className="font-bold text-2xl">Category Lists</h3>
         <Link href="/admin/addcategory">
@@ -76,4 +81,8 @@ const Category = () => {
   );
 };
 
+Category.propsTypes = {
+  isTopNav: PropTypes.bool.isRequired,
+};
+
 export default Category;