creatorcluster · Oct 5, 2026 · Oct 4, 2026
diff --git a/src/App.tsx b/src/App.tsx
@@ -120,6 +120,7 @@ const App = () => {
           <HelmetProvider>
             <TooltipProvider>
               <BrowserRouter>
+                <Navbar />
                 <Suspense fallback={<LoadingFallback />}>
                   <Routes>
                     <Route path="/" element={<HomeRedirect />} />
@@ -154,7 +155,6 @@ const App = () => {
                     <Route path="/account" element={<Account />} />
                     <Route path="/account/profile" element={
                       <div className="min-h-screen flex flex-col cow-grid-bg bg-background text-foreground">
-                        <Navbar />
                         <main className="flex-grow pt-24 pb-16 px-4 container mx-auto">
                           <ProfileEditor />
                         </main>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -110,6 +110,12 @@ const Navbar = () => {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
+  useEffect(() => {
+    setActiveDropdown(null);
+    setOpenMobileCollapsible(null);
+    setIsDrawerOpen(false);
+  }, [location.pathname]);
+
   const toggleTheme = () => {
     const newTheme = theme === 'dark' ? 'light' : 'dark';
     setTheme(newTheme);

diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
@@ -4,34 +4,11 @@ import { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'
 
 import { cn } from "@/lib/utils"
 
-// Add effect to prevent layout shift when opening dropdown menu
-const PreventLayoutShift = () => {
-  React.useEffect(() => {
-    const html = document.documentElement;
-    const scrollbarWidth = window.innerWidth - html.clientWidth;
-
-    if (scrollbarWidth > 0) {
-      const originalPaddingRight = getComputedStyle(html).getPropertyValue('padding-right');
-
-      html.style.paddingRight = `${scrollbarWidth}px`;
-      html.classList.add('overflow-hidden');
-
-      return () => {
-        html.style.paddingRight = originalPaddingRight;
-        html.classList.remove('overflow-hidden');
-      };
-    }
-  }, []);
-
-  return null;
-}
-
 const DropdownMenu = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>
->(({ children, ...props }, ref) => (
-  <DropdownMenuPrimitive.Root {...props}>
-    {props.open && <PreventLayoutShift />}
+>(({ modal = false, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.Root modal={modal} {...props}>
     {children}
   </DropdownMenuPrimitive.Root>
 ))
@@ -89,24 +66,6 @@ const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => {
-  // Add effect to prevent layout shift when opening dropdown
-  React.useEffect(() => {
-    const html = document.documentElement;
-    const scrollbarWidth = window.innerWidth - html.clientWidth;
-
-    if (scrollbarWidth > 0) {
-      const originalPaddingRight = getComputedStyle(html).getPropertyValue('padding-right');
-
-      html.style.paddingRight = `${scrollbarWidth}px`;
-      html.style.overflow = 'hidden';
-
-      return () => {
-        html.style.paddingRight = originalPaddingRight;
-        html.style.overflow = '';
-      };
-    }
-  }, []);
-
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content

diff --git a/src/pages/Account.tsx b/src/pages/Account.tsx
@@ -8,7 +8,6 @@ import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import { toast } from 'sonner';
 import { IconUser, IconMail, IconCalendar, IconLogout } from '@tabler/icons-react';
@@ -55,7 +54,6 @@ const Account = () => {
   if (loading) {
     return (
       <div className="min-h-screen flex flex-col">
-        <Navbar />
         <main className="flex-grow pt-24 pb-16 cow-grid-bg">
           <div className="container mx-auto px-4">
             <AccountPageSkeleton />
@@ -124,7 +122,6 @@ const Account = () => {
         <meta name="description" content="Manage your Renderdragon account settings and profile information." />
       </Helmet>
 
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">

diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState, lazy, Suspense } from 'react';
 import { useAuth } from '@/hooks/useAuth';
 import { Navigate } from 'react-router-dom';
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import { Helmet } from 'react-helmet-async';
 import { motion } from 'framer-motion';
@@ -18,7 +17,6 @@ const Admin = () => {
   if (loading) {
     return (
       <div className="min-h-screen flex flex-col">
-        <Navbar />
         <main className="flex-grow pt-24 pb-16 cow-grid-bg">
           <div className="container mx-auto px-4">
             <div className="max-w-7xl mx-auto">
@@ -45,7 +43,6 @@ const Admin = () => {
         <meta name="robots" content="noindex, nofollow" />
       </Helmet>
 
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">

diff --git a/src/pages/AiTitleHelper.tsx b/src/pages/AiTitleHelper.tsx
@@ -1,4 +1,3 @@
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import Seo from '@/components/Seo';
 import { softwareApplicationSchema } from '@/lib/structuredData';
@@ -89,7 +88,6 @@ const AiTitleHelper = () => {
           category: "UtilitiesApplication",
         })}
       />
-      <Navbar />
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="max-w-6xl mx-auto px-4">
           <div className="text-center mb-8">

diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
@@ -13,7 +13,6 @@ import {
   IconUserPlus,
   IconUsers,
 } from "@tabler/icons-react";
-import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart";
@@ -139,7 +138,6 @@ const Analytics = () => {
         <meta name="robots" content="noindex, nofollow" />
       </Helmet>
 
-      <Navbar />
 
       <main className="cow-grid-bg flex-grow pb-16 pt-24">
         <div className="container mx-auto px-4">

diff --git a/src/pages/BackgroundGenerator.tsx b/src/pages/BackgroundGenerator.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect, useRef, useMemo } from "react";
-import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
@@ -636,7 +635,6 @@ const BackgroundGenerator = () => {
           image: "/ogimg/background.png",
         })}
       />
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">

diff --git a/src/pages/BlogView.tsx b/src/pages/BlogView.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { useParams, Link } from "react-router-dom";
-import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import Seo from "@/components/Seo";
 import { breadcrumbSchema } from "@/lib/structuredData";
@@ -76,7 +75,6 @@ export default function BlogView() {
     if (loading) {
         return (
             <div className="min-h-screen flex flex-col">
-                <Navbar />
                 <main className="flex-grow flex items-center justify-center">
                     <IconLoader2 className="h-8 w-8 animate-spin text-cow-purple" />
                 </main>
@@ -88,7 +86,6 @@ export default function BlogView() {
     if (error || !blog) {
         return (
             <div className="min-h-screen flex flex-col">
-                <Navbar />
                 <main className="flex-grow pt-24 pb-16 cow-grid-bg">
                     <div className="container mx-auto px-4 text-center">
                         <h1 className="text-2xl font-minecraftia text-red-400">Error</h1>
@@ -130,7 +127,6 @@ export default function BlogView() {
                 ]}
             />
 
-            <Navbar />
 
             <main className="flex-grow pt-24 pb-16 cow-grid-bg">
                 <div className="container mx-auto px-4 max-w-4xl">

diff --git a/src/pages/Blogs.tsx b/src/pages/Blogs.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { Link } from "react-router-dom";
 import { supabase } from "@/integrations/supabase/client";
@@ -102,7 +101,6 @@ export default function Blogs() {
                 <meta name="description" content="Read the latest news and guides from Renderdragon." />
             </Helmet>
 
-            <Navbar />
 
             <main className="flex-grow pt-24 pb-16 cow-grid-bg">
                 <div className="container mx-auto px-4">

diff --git a/src/pages/Changelogs.tsx b/src/pages/Changelogs.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 
 import { Helmet } from 'react-helmet-async';
@@ -46,7 +45,6 @@ export default function Changelogs() {
         <meta name="twitter:card" content="summary_large_image" />
       </Helmet>
 
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">

diff --git a/src/pages/Community.tsx b/src/pages/Community.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { IconPlayerPlay, IconChevronRight, IconUsers, IconStar, IconTrendingUp, IconClock, IconEye } from '@tabler/icons-react';
 import { Button } from "@/components/ui/button";
@@ -356,7 +355,6 @@ const Community = () => {
         />
       </Helmet>
 
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">

diff --git a/src/pages/Construction.tsx b/src/pages/Construction.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 
 import { IconChevronRight, IconPlayerPlay, IconUsers } from '@tabler/icons-react';
@@ -290,7 +289,6 @@ const Community = () => {
         <meta name="twitter:image" content="https://renderdragon.org/ogimg/community.png" />
       </Helmet>
 
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">

diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 import { IconCopy, IconMail, IconCheck, IconBrandGithub, IconGlobe, IconExternalLink } from '@tabler/icons-react';
-import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
@@ -138,7 +137,6 @@ const Contact = () => {
           content="https://renderdragon.org/ogimg/contact.png"
         />
       </Helmet>
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">

diff --git a/src/pages/CreateCreatorPackPage.tsx b/src/pages/CreateCreatorPackPage.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -100,7 +99,6 @@ const CreateCreatorPackPage = () => {
                 <title>Upload Creator Pack | RenderDragon</title>
             </Helmet>
 
-            <Navbar />
 
             <main className="flex-grow pt-24 pb-16 cow-grid-bg custom-scrollbar">
                 <div className="container mx-auto px-4 max-w-3xl">

diff --git a/src/pages/CreatorPackPage.tsx b/src/pages/CreatorPackPage.tsx
@@ -3,7 +3,6 @@ import { useParams, Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import { useCreatorPacks, CreatorPack } from '@/hooks/useCreatorPacks';
 import { useAuth } from '@/hooks/useAuth';
@@ -54,7 +53,6 @@ const CreatorPackPage = () => {
     if (isLoading) {
         return (
             <div className="min-h-screen flex flex-col">
-                <Navbar />
                 <div className="flex-grow flex items-center justify-center">
                     <IconLoader2 className="w-10 h-10 animate-spin text-cow-purple" />
                 </div>
@@ -66,7 +64,6 @@ const CreatorPackPage = () => {
     if (!pack) {
         return (
             <div className="min-h-screen flex flex-col">
-                <Navbar />
                 <div className="flex-grow flex flex-col items-center justify-center gap-4">
                     <h1 className="text-3xl font-geist">Pack Not Found</h1>
                     <Link to="/resources?tab=creator-packs">
@@ -90,7 +87,6 @@ const CreatorPackPage = () => {
                 {pack.cover_image_url && <meta property="og:image" content={pack.cover_image_url} />}
             </Helmet>
 
-            <Navbar />
 
             <main className="flex-grow pt-24 pb-16 cow-grid-bg custom-scrollbar">
                 <div className="container mx-auto px-4 max-w-4xl">

diff --git a/src/pages/EditCreatorPackPage.tsx b/src/pages/EditCreatorPackPage.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams, Link } from 'react-router-dom';
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -129,7 +128,6 @@ const EditCreatorPackPage = () => {
     if (isLoading) {
         return (
             <div className="min-h-screen flex flex-col">
-                <Navbar />
                 <div className="flex-grow flex items-center justify-center">
                     <IconLoader2 className="w-10 h-10 animate-spin text-cow-purple" />
                 </div>
@@ -156,7 +154,6 @@ const EditCreatorPackPage = () => {
                 <title>Edit Creator Pack | RenderDragon</title>
             </Helmet>
 
-            <Navbar />
 
             <main className="flex-grow pt-24 pb-16 cow-grid-bg custom-scrollbar">
                 <div className="container mx-auto px-4 max-w-3xl">

diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx
@@ -1,4 +1,3 @@
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import Seo from '@/components/Seo';
 
@@ -64,7 +63,6 @@ const FAQ = () => {
         jsonLd={faqSchema}
       />
 
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">

diff --git a/src/pages/Generators.tsx b/src/pages/Generators.tsx
@@ -1,5 +1,4 @@
 import { lazy, Suspense } from 'react';
-import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Helmet } from 'react-helmet-async';
@@ -24,7 +23,6 @@ const Generators = () => {
         <meta name="twitter:image" content="https://renderdragon.org/ogimg/generators.png" />
       </Helmet>
 
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">

diff --git a/src/pages/GuideView.tsx b/src/pages/GuideView.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
 import { useParams, Link } from "react-router-dom";
-import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 
 import Seo from "@/components/Seo";
@@ -98,7 +97,6 @@ export default function GuideView() {
         ]}
       />
 
-      <Navbar />
 
       <main className="flex-grow pt-24 pb-16 cow-grid-bg">
         <div className="container mx-auto px-4">