From 8c2cd22558eab12cf5a0e4d943ba563a1791da4e Mon Sep 17 00:00:00 2001
From: Jonath-z <jonathanzihindula95@gmail.com>
Date: Mon, 27 Jun 2022 16:37:05 +0200
Subject: [PATCH] add margin top when top nav is opened

---
 components/CategoryPage/index.jsx     |  8 +++++---
 components/modules/Category/index.jsx | 13 +++++++++++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/CategoryPage/index.jsx b/components/CategoryPage/index.jsx
index 3a7339a..94b9313 100644
--- 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
index 7967881..61c2346 100644
--- 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;