Scrolling issue and mob theme toggler (#97)

docs/components/nav-bar.tsx

@@ -1,14 +1,16 @@
-import React from "react";
 import Link from "next/link";
 import { ThemeToggle } from "@/components/theme-toggler";
-import { NavbarMobile, NavbarMobileBtn } from "./nav-mobile";
+import Image from "next/image";
+import { NavbarMobileBtn } from "./nav-mobile";
 import { NavLink } from "./nav-link";
 import { Logo } from "./logo";
+import { PulicBetaBadge } from "./beta/badge";
+import { useState } from "react";
+import { MenuIcon, X } from "lucide-react";
 
 export const Navbar = () => {
   return (
-		<div className="flex flex-col sticky top-0 bg-background backdrop-blur-md z-30">
-			<nav className="md:grid grid-cols-12 border-b  top-0 flex items-center justify-between ">
+    <nav className="sticky z-40 top-0 flex items-center justify-between bg-background backdrop-blur-md">
       <Link
         href="/"
         className="md:border-r md:px-5 px-2.5 py-4 text-foreground md:col-span-2 shrink-0 transition-colors md:w-[--fd-sidebar-width]"
@@ -20,7 +22,7 @@ export const Navbar = () => {
           </div>
         </div>
       </Link>
-				<div className="md:col-span-10 flex items-center justify-end relative">
+      <div className="md:col-span-10 flex items-center justify-end sticky top-0 z-30 pb-3 w-full font-geist border-b border-black/10 transition duration-200 ease-in-out md:bg-transparent animate-header-slide-down-fade dark:border-white/10  md:backdrop-blur-md">
         <ul className="md:flex items-center divide-x w-max border-r hidden shrink-0">
           {navMenu.map((menu, i) => (
             <NavLink key={menu.name} href={menu.path}>
@@ -32,8 +34,6 @@ export const Navbar = () => {
         <NavbarMobileBtn />
       </div>
     </nav>
-			<NavbarMobile />
-		</div>
   );
 };
 

docs/components/nav-mobile.tsx

@@ -1,13 +1,7 @@
 "use client";
-import { Menu, X } from "lucide-react";
+import { Menu, Sun, X } from "lucide-react";
 import Link from "next/link";
-import {
-	Fragment,
-	createContext,
-	useContext,
-	useEffect,
-	useState,
-} from "react";
+import { Fragment, createContext, useContext, useState } from "react";
 import {
   Accordion,
   AccordionContent,
@@ -16,6 +10,7 @@ import {
 } from "@/components/ui/accordion";
 import { AnimatePresence, FadeIn } from "@/components/ui/fade-in";
 import { contents } from "./sidebar-content";
+import { MobileThemeToggle, ThemeToggle } from "./theme-toggler";
 
 interface NavbarMobileContextProps {
   isOpen: boolean;
@@ -25,7 +20,7 @@ interface NavbarMobileContextProps {
 }
 
 const NavbarContext = createContext<NavbarMobileContextProps | undefined>(
-	undefined,
+  undefined
 );
 
 export const NavbarProvider = ({ children }: { children: React.ReactNode }) => {
@@ -52,7 +47,7 @@ export const useNavbarMobile = (): NavbarMobileContextProps => {
   const context = useContext(NavbarContext);
   if (!context) {
     throw new Error(
-			"useNavbarMobile must be used within a NavbarMobileProvider",
+      "useNavbarMobile must be used within a NavbarMobileProvider"
     );
   }
   return context;
@@ -62,38 +57,30 @@ export const NavbarMobileBtn: React.FC = () => {
   const { toggleNavbar } = useNavbarMobile();
 
   return (
+    <div className="flex pt-2 items-center">
+      <MobileThemeToggle />
       <button
-			className="text-muted-foreground ml-auto px-2.5 block md:hidden"
+        className="text-muted-foreground overflow-hidden  px-2.5 block md:hidden"
         onClick={() => {
           toggleNavbar();
         }}
       >
         <Menu />
       </button>
+    </div>
   );
 };
 
 export const NavbarMobile = () => {
   const { isOpen, toggleNavbar } = useNavbarMobile();
 
-	useEffect(() => {
-		if (isOpen) {
-			document.body.classList.add("overflow-hidden");
-		} else {
-			document.body.classList.remove("overflow-hidden");
-		}
-
-		return () => {
-			document.body.classList.remove("overflow-hidden");
-		};
-	}, [isOpen]);
-
   return (
+    <div className="fixed top-[50px]  left-0 z-30 px-4 mx-auto w-full h-auto backdrop-blur-lg dark:bg-black md:hidden transform-gpu [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-40px_80px_-20px_#8686f01f_inset]">
       <AnimatePresence>
         {isOpen && (
           <FadeIn
             fromTopToBottom
-					className="bg-background h-[calc(100vh)] w-full z-[1000] p-5 divide-y overflow-y-auto "
+            className="bg-transparent p-5 divide-y overflow-y-auto"
           >
             {navMenu.map((menu, i) => (
               <Fragment key={menu.name}>
@@ -131,6 +118,7 @@ export const NavbarMobile = () => {
           </FadeIn>
         )}
       </AnimatePresence>
+    </div>
   );
 };
 

docs/components/theme-toggler.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Moon, Sun } from "lucide-react";
+import { Moon, MoonIcon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import * as React from "react";
 import { Button } from "@/components/ui/button";
@@ -50,3 +50,29 @@ export function ThemeToggle() {
     </DropdownMenu>
   );
 }
+export function MobileThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <div className="">
+      {theme === "dark" ? (
+        <Button
+          onClick={() => {
+            setTheme("light");
+          }}
+          variant={"ghost"}
+        >
+          <Sun className="w-4 h-4" />
+        </Button>
+      ) : (
+        <Button
+          onClick={() => {
+            setTheme("dark");
+          }}
+          variant={"ghost"}
+        >
+          <MoonIcon className="w-4 h-4" />
+        </Button>
+      )}
+    </div>
+  );
+}

studio/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.