From 99e83ec6f8be53b86c9fce5ae0d4722b9d82ad65 Mon Sep 17 00:00:00 2001 From: Yamura3 <96625893+Yxmura@users.noreply.github.com> Date: Sun, 8 Feb 2026 14:23:19 +0100 Subject: [PATCH] ui: remove blogs promo banner --- src/components/Navbar.tsx | 315 +++++++++++++++++++++----------------- 1 file changed, 172 insertions(+), 143 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index e282aad..d89b7e3 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,8 +1,16 @@ -import React, { useState, useEffect } from 'react'; -import { Link, useLocation, useNavigate } from 'react-router-dom'; -import { IconChevronDown, IconMenu2, IconX, IconSun, IconMoon, IconSkull, IconExternalLink } from '@tabler/icons-react'; -import { ThemeToggle } from './ThemeToggle'; -import { Button } from '@/components/ui/button'; +import React, { useState, useEffect } from "react"; +import { Link, useLocation, useNavigate } from "react-router-dom"; +import { + IconChevronDown, + IconMenu2, + IconX, + IconSun, + IconMoon, + IconSkull, + IconExternalLink, +} from "@tabler/icons-react"; +import { ThemeToggle } from "./ThemeToggle"; +import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, @@ -15,17 +23,17 @@ import { CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; -import { useIsMobile } from '@/hooks/use-mobile'; +import { useIsMobile } from "@/hooks/use-mobile"; import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; // Keep for now in case it's a dependency of drawer import { Toggle } from "@/components/ui/toggle"; import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"; -import Logo from './Logo'; -import PixelSvgIcon from './PixelSvgIcon'; -import AuthDialog from './auth/AuthDialog'; // Added for auth -import UserMenu from './auth/UserMenu'; // Added for auth -import { useAuth } from '@/hooks/useAuth'; // Added for auth -import { useProfile } from '@/hooks/useProfile'; -import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import Logo from "./Logo"; +import PixelSvgIcon from "./PixelSvgIcon"; +import AuthDialog from "./auth/AuthDialog"; // Added for auth +import UserMenu from "./auth/UserMenu"; // Added for auth +import { useAuth } from "@/hooks/useAuth"; // Added for auth +import { useProfile } from "@/hooks/useProfile"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; interface NavLink { name: string; @@ -41,33 +49,57 @@ interface NavDropdown { } const mainLinks: (NavLink | NavDropdown)[] = [ - { name: 'Home', path: '/', icon: 'home' }, - { name: 'Blogs', path: '/blogs', icon: 'text', tag: 'NEW' }, - { name: 'Contact', path: '/contact', icon: 'contact' }, + { name: "Home", path: "/", icon: "home" }, + { name: "Blogs", path: "/blogs", icon: "text", tag: "NEW" }, + { name: "Contact", path: "/contact", icon: "contact" }, { - name: 'Resources', - icon: 'resources', + name: "Resources", + icon: "resources", links: [ - { name: 'Resources Hub', path: '/resources', icon: 'resources-hub' }, - { name: 'Utilities', path: '/utilities', icon: 'software' }, - { name: 'Community Assets', path: '/showcase', icon: 'yt-videos', tag: 'NEW' }, - { name: 'Community', path: '/community', icon: 'yt-videos' }, - ] + { name: "Resources Hub", path: "/resources", icon: "resources-hub" }, + { name: "Utilities", path: "/utilities", icon: "software" }, + { + name: "Community Assets", + path: "/showcase", + icon: "yt-videos", + tag: "NEW", + }, + { name: "Community", path: "/community", icon: "yt-videos" }, + ], }, { - name: 'Tools', - icon: 'tools', + name: "Tools", + icon: "tools", links: [ - { name: 'Music Copyright Checker', path: '/gappa', icon: 'music' }, - { name: 'Background Generator', path: '/background-generator', icon: 'background' }, - { name: 'Player Renderer', path: '/player-renderer', icon: 'player' }, - { name: 'Text Generator', path: '/text-generator', icon: 'text' }, - { name: 'Youtube Tools', path: '/youtube-downloader', icon: 'yt-downloader', tag: 'NEW' }, - { name: 'AI Title Helper', path: '/ai-title-helper', icon: 'text', tag: 'NEW' }, - { name: 'Content Generators', path: '/generators', icon: 'text' }, - { name: 's0', path: 'https://s0.renderdragon.org/docs', icon: 'external', tag: 'NEW' } - ] - } + { name: "Music Copyright Checker", path: "/gappa", icon: "music" }, + { + name: "Background Generator", + path: "/background-generator", + icon: "background", + }, + { name: "Player Renderer", path: "/player-renderer", icon: "player" }, + { name: "Text Generator", path: "/text-generator", icon: "text" }, + { + name: "Youtube Tools", + path: "/youtube-downloader", + icon: "yt-downloader", + tag: "NEW", + }, + { + name: "AI Title Helper", + path: "/ai-title-helper", + icon: "text", + tag: "NEW", + }, + { name: "Content Generators", path: "/generators", icon: "text" }, + { + name: "s0", + path: "https://s0.renderdragon.org/docs", + icon: "external", + tag: "NEW", + }, + ], + }, ]; // Small badge for marking new/updated links @@ -85,83 +117,83 @@ const Navbar = () => { const [scrolled, setScrolled] = useState(false); const [scrollProgress, setScrollProgress] = useState(0); const [activeDropdown, setActiveDropdown] = useState(null); - const [openMobileCollapsible, setOpenMobileCollapsible] = useState(null); - const [theme, setTheme] = useState<'light' | 'dark'>(() => { - return localStorage.getItem('theme') as 'light' | 'dark' || - (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); + const [openMobileCollapsible, setOpenMobileCollapsible] = useState< + string | null + >(null); + const [theme, setTheme] = useState<"light" | "dark">(() => { + return ( + (localStorage.getItem("theme") as "light" | "dark") || + (window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light") + ); }); const isMobile = useIsMobile(); const [authDialogOpen, setAuthDialogOpen] = useState(false); // Added for auth const { user, loading, signOut } = useAuth(); // Added for auth const { profile } = useProfile(); const [isDrawerOpen, setIsDrawerOpen] = useState(false); // Manages Drawer open state - const [showBlogsBanner, setShowBlogsBanner] = useState(true); - - // Initialize banner state from localStorage - useEffect(() => { - const hidden = localStorage.getItem('hideBlogsBanner'); - if (hidden === '1') setShowBlogsBanner(false); - }, []); - - const dismissBanner = () => { - setShowBlogsBanner(false); - localStorage.setItem('hideBlogsBanner', '1'); - }; // ... (lines 111-266 omitted for brevity, logic remains same) // ... const toggleTheme = () => { - const newTheme = theme === 'dark' ? 'light' : 'dark'; + const newTheme = theme === "dark" ? "light" : "dark"; setTheme(newTheme); - localStorage.setItem('theme', newTheme); - if (newTheme === 'dark') { - document.documentElement.classList.add('dark'); + localStorage.setItem("theme", newTheme); + if (newTheme === "dark") { + document.documentElement.classList.add("dark"); } else { - document.documentElement.classList.remove('dark'); + document.documentElement.classList.remove("dark"); } }; useEffect(() => { - if (theme === 'dark') { - document.documentElement.classList.add('dark'); + if (theme === "dark") { + document.documentElement.classList.add("dark"); } else { - document.documentElement.classList.remove('dark'); + document.documentElement.classList.remove("dark"); } }, [theme]); - const displayName = profile?.username || user?.user_metadata?.full_name || user?.email?.split('@')[0] || 'User'; + const displayName = + profile?.username || + user?.user_metadata?.full_name || + user?.email?.split("@")[0] || + "User"; const safeAvatarUrl = profile?.avatar_url || user?.user_metadata?.avatar_url; const getInitials = (name: string) => { - return name - ?.split(' ') - .map((n) => n[0]) - .join('') - .toUpperCase() - .slice(0, 2) || 'U'; + return ( + name + ?.split(" ") + .map((n) => n[0]) + .join("") + .toUpperCase() + .slice(0, 2) || "U" + ); }; const navigate = useNavigate(); const handleShowFavorites = () => { - navigate('/account'); + navigate("/account"); }; const handleMobileCollapsibleToggle = (name: string) => { - setOpenMobileCollapsible(prev => prev === name ? null : name); + setOpenMobileCollapsible((prev) => (prev === name ? null : name)); }; const isLinkActive = (path: string) => { - if (path === '/') { - return location.pathname === '/'; + if (path === "/") { + return location.pathname === "/"; } return location.pathname.startsWith(path); }; const isDropdownActive = (dropdown: NavDropdown) => { - return dropdown.links.some(link => isLinkActive(link.path)); + return dropdown.links.some((link) => isLinkActive(link.path)); }; const getBackgroundStyle = () => { @@ -176,40 +208,23 @@ const Navbar = () => { return baseStyle; }; - const isHomePage = location.pathname === '/'; + const isHomePage = location.pathname === "/"; const isTransparent = isHomePage && !scrolled; return ( <> - {showBlogsBanner && ( -
-
-
- Check out our new - - Blogs feature! - - -
-
-
- )}
@@ -227,22 +242,19 @@ const Navbar = () => {
@@ -330,11 +346,7 @@ const Navbar = () => { {/* Mobile Menu Trigger */} - @@ -355,12 +367,12 @@ const Navbar = () => {
{/* Mobile Auth Section */}
@@ -429,19 +450,30 @@ const Navbar = () => {
{safeAvatarUrl && ( - + )} {getInitials(displayName)}
-
{displayName || 'User'}
-
{user.email}
+
+ {displayName || "User"} +
+
+ {user.email} +
- + ); }; -export default React.memo(Navbar); \ No newline at end of file +export default React.memo(Navbar);