Reverted to edit e75f2567-c2d3-43a1-9c32-020e99f1a8ad: "security updated"

Author: lovable-dev[bot]

package-lock.json

@@ -52,7 +52,7 @@
     "input-otp": "^1.2.4",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.462.0",
-    "next-themes": "^0.4.6",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",

package.json

@@ -1,48 +1,70 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../utils/auth';
+import { logout } from '../utils/firebase';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
 
-import { Link } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { ThemeToggle } from "@/components/ui/theme-toggle";
-import { useAuth } from "../utils/auth";
-import { signOut } from "firebase/auth";
-import { auth } from "../utils/firebase";
+const Navbar: React.FC = () => {
+  const { currentUser } = useAuth();
+  const navigate = useNavigate();
 
-const Navbar = () => {
-  const { currentUser: user } = useAuth();
-
-  const handleSignOut = async () => {
-    try {
-      await signOut(auth);
-      console.log('User signed out successfully.');
-    } catch (error) {
-      console.error('Sign out error:', error);
-    }
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
   };
 
   return (
-    <nav className="w-full py-4 px-6 flex items-center justify-between bg-background border-b">
-      <div className="flex items-center gap-6">
-        <Link to="/" className="text-xl font-bold">
-          Sober App
+    <div className="bg-background border-b">
+      <div className="container flex h-16 items-center justify-between py-4">
+        <Link to="/" className="font-bold text-2xl">
+          PurePath
         </Link>
-        <Link to="/community">Community</Link>
-        <Link to="/progress">Progress</Link>
-      </div>
-      <div className="flex items-center gap-2">
-        <ThemeToggle />
-        {user ? (
-          <Button variant="outline" onClick={handleSignOut}>Sign Out</Button>
-        ) : (
-          <>
-            <Link to="/login">
-              <Button variant="outline">Log In</Button>
-            </Link>
-            <Link to="/register">
-              <Button>Register</Button>
-            </Link>
-          </>
-        )}
+        <nav>
+          {currentUser ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+                  <Avatar>
+                    <AvatarImage src="/placeholder.svg" alt="User" />
+                    <AvatarFallback>{currentUser.email?.charAt(0).toUpperCase()}</AvatarFallback>
+                  </Avatar>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                  <Link to="/dashboard">Dashboard</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link to="/profile">Profile</Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={handleLogout}>
+                  Logout
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <div>
+              <Link to="/login" className="mr-4">
+                Login
+              </Link>
+              <Link to="/register">Register</Link>
+            </div>
+          )}
+        </nav>
       </div>
-    </nav>
+    </div>
   );
 };
 

src/components/Navbar.tsx

@@ -1,16 +1,22 @@
 
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
-import { ThemeProvider } from './components/ThemeProvider.tsx'
-import { Toaster } from './components/ui/sonner.tsx'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <ThemeProvider defaultTheme="system" enableSystem>
-      <App />
-      <Toaster />
-    </ThemeProvider>
-  </React.StrictMode>,
-)
+// Add more detailed logging
+console.log("Main component starting initialization");
+
+// Check if root element exists
+const rootElement = document.getElementById("root");
+if (!rootElement) {
+  console.error("Root element not found in the DOM");
+} else {
+  console.log("Root element found, attempting to render app");
+  
+  try {
+    createRoot(rootElement).render(<App />);
+    console.log("App rendered successfully");
+  } catch (error) {
+    console.error("Error rendering the app:", error);
+  }
+}