From 7f8c07b736b072667b7641dff4dd40a4269119f3 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 30 Oct 2024 20:34:07 -0700
Subject: [PATCH] Prevent app bar and top bar from scrolling out of view

---
 src/components/navigational/appBar/AppBar.tsx | 11 +----------
 src/components/navigational/topBar/TopBar.tsx | 11 +----------
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/components/navigational/appBar/AppBar.tsx b/src/components/navigational/appBar/AppBar.tsx
index 78c77b0f..2e2f6ef4 100644
--- a/src/components/navigational/appBar/AppBar.tsx
+++ b/src/components/navigational/appBar/AppBar.tsx
@@ -2,7 +2,6 @@
 
 import { usePathname } from "next/navigation";
 import NavItem from "../navbar/NavItem";
-import { useScrollContext } from "@/app/providers/scroll";
 import useAgent from "@/lib/hooks/bsky/useAgent";
 import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";
 import { useQuery } from "@tanstack/react-query";
@@ -14,8 +13,6 @@ import { HiClipboardList, HiOutlineClipboardList } from "react-icons/hi";
 
 export default function AppBar() {
   const pathname = usePathname();
-  const val = useScrollContext();
-  const canUpdate = typeof window !== "undefined";
   const agent = useAgent();
   const {
     data: notificationsCount,
@@ -28,13 +25,7 @@ export default function AppBar() {
   });
 
   return (
-    <nav
-      className="bg-skin-base border-skin-base fixed bottom-0 z-40 flex w-full justify-between gap-6 overflow-auto border-t px-6 pb-8 pt-1 transition-all ease-linear md:hidden"
-      style={{
-        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "100%",
-        transform: canUpdate ? `translateY(${val ?? 0}%)` : "translateY(0%)",
-      }}
-    >
+    <nav className="bg-skin-base border-skin-base fixed bottom-0 z-40 flex w-full justify-between gap-6 overflow-auto border-t px-6 pb-8 pt-1 transition-all ease-linear md:hidden">
       <NavItem
         href="/dashboard/home"
         icon={<BiHome className="text-2xl md:text-3xl" />}
diff --git a/src/components/navigational/topBar/TopBar.tsx b/src/components/navigational/topBar/TopBar.tsx
index 66f7c6da..edfebc18 100644
--- a/src/components/navigational/topBar/TopBar.tsx
+++ b/src/components/navigational/topBar/TopBar.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useScrollContext } from "@/app/providers/scroll";
 import Button from "@/components/actions/button/Button";
 import Avatar from "@/components/dataDisplay/avatar/Avatar";
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
@@ -14,17 +13,9 @@ interface Props {
 
 export default function TopBar(props: Props) {
   const { profile } = props;
-  const val = useScrollContext();
-  const canUpdate = typeof window !== "undefined" && window.innerWidth < 768;
 
   return (
-    <div
-      className="bg-skin-base border-skin-base sticky top-0 z-50 flex items-center justify-between border-b px-3 py-2.5 transition-all ease-linear md:hidden"
-      style={{
-        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "100%",
-        transform: canUpdate ? `translateY(-${val ?? 0}%)` : "translateY(-0%)",
-      }}
-    >
+    <div className="bg-skin-base border-skin-base sticky top-0 z-[60] flex items-center justify-between border-b px-3 py-2.5 transition-all ease-linear md:hidden">
       <Link
         href={`/dashboard/user/${profile?.handle}`}
         className="hover:brightness-90"