Fixed issues with absolute positioning

daily-thought-frontend/src/components/navigation/NavBar.tsx

@@ -34,7 +34,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
   return (
     <>
       <div className="min-h-full min-w-full">
-        <Disclosure as="nav" className="bg-c-pink fixed w-full">
+        <Disclosure as="nav" className="bg-c-pink fixed w-full z-10">
           {({ open }) => (
             <>
               <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

daily-thought-frontend/src/components/post/AnswerCard.tsx

 import { Post } from "@/types/post"
 import { FC, PropsWithChildren } from "react"
-import { Bars3Icon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
+import { EyeSlashIcon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
 import LikeStack from "./LikeStack"
 import Comment from "../comments/Comment"
+import styles from '../../styles/AnswerCard.module.css'
 
 type AnswerCardProps = {
   post: Post;
@@ -15,7 +16,7 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
 }) => {
 
   return (
-    <div className="flex-1 rounded-3xl bg-white text-lg shadow-lg overflow-hidden">
+    <div className="flex-1 rounded-3xl bg-white text-lg shadow-lg overflow-hidden relative">
       <div className="p-4">
         <p className="text-sm text-gray-600">{`${post.User.Name}'s answer`}</p>
         <div>
@@ -41,6 +42,7 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
           <LikeStack Users={[post.User, post.User, post.User, post.User, post.User, post.User]} />
         </div>
       </div>
+
     
     
 
@@ -48,6 +50,21 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
       <p className="text-xs text-gray-500 hover:text-c-pink">View all 3 comments</p>
       <Comment Comment={{Data: "asdfg", User: post.User}} />
     </div>
+
+    {/* <div className={styles.hidden}>
+      <div className="flex justify-center flex-col  items-center">
+          <EyeSlashIcon className="h-10 w-10 text-c-pink"/>
+          <p className="text-sm text-c-pink">This post is hidden</p>
+
+          <button
+            className="rounded-md bg-white px-3.5 py-2 mt-2 text-xs font-semibold text-c-pink shadow-sm hover:bg-c-pink hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
+          >
+            Post your daily
+          </button>
+      </div>
+    </div> */}
+
+
   </div>
   )
 }

daily-thought-frontend/src/styles/AnswerCard.module.css

+.hidden {
+/* From https://css.glass */
+background: rgba(180, 180, 180, 0.18);
+border-radius: 16px;
+box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+backdrop-filter: blur(20px);
+-webkit-backdrop-filter: blur(8.1px);
+
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
\ No newline at end of file