mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-05 05:11:32 -05:00
Code Issues Packages Projects Releases 100 Wiki Activity

fix: fixing navbar position while scrolling the page. (#1266)

Browse Source 
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
This commit is contained in:
Abhinav Arya
2023-10-18 15:06:08 +05:30
committed by GitHub
parent 5c9d8af3f0
commit eb88858d6f
2 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/formbricks-com/components/shared/Header.tsx
+21 -2
View File
@@ -18,7 +18,7 @@ import { usePlausible } from "next-plausible";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { Fragment, useState } from "react";
import { Fragment, useEffect, useState } from "react";
import { FooterLogo } from "./Logo";
import { ThemeSelector } from "./ThemeSelector";
@@ -99,8 +99,27 @@ export default function Header() {
const [mobileSubOpen, setMobileSubOpen] = useState(false);
const plausible = usePlausible();
const router = useRouter();
const [stickyNav, setStickyNav] = useState(false);
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 250) {
setStickyNav(true);
} else {
setStickyNav(false);
}
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
const stickyNavClass = stickyNav
? `bg-transparent shadow-md backdrop-blur-lg fixed top-0 z-30 w-full`
: "relative";
return (
<Popover className="relative" as="header">
<Popover className={`${stickyNavClass}`} as="header">
<a href="https://www.producthunt.com/products/formbricks" target="_blank">
<div className="bg-[#ff6154] text-center text-sm text-white">
We&apos;re launching soon on Product Hunt - get notified 🚀
packages/ui/Button/index.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ export const Button: React.ForwardRefExoticComponent<
variant === "darkCTA" &&
(disabled
? "text-slate-400 dark:text-slate-500 bg-slate-200 dark:bg-slate-800"
: "text-slate-100 hover:text-slate-50 bg-gradient-to-br from-slate-900 to-slate-800 hover:from-slate-800 hover:to-slate-700 dark:bg-slate-200 dark:text-slate-700 dark:hover:bg-slate-300 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-slate-700 focus:ring-neutral-500"),
: "text-slate-100 hover:text-slate-50 bg-gradient-to-br from-slate-900 to-slate-800 hover:from-slate-800 hover:to-slate-700 dark:text-slate-300 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-slate-700 focus:ring-neutral-500"),
// set not-allowed cursor if disabled
loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",