feat: added the product page and enhanced the UI

- added the product page where the product details is shown
- enhanced the nav bar to handle the rendering
- added the loading screen to the page
- fixed the rendering method to the navigation-menu

1 files changed, 2 insertions, 21 deletions

diff --git a/frontend/src/components/theme-toggle.tsx b/frontend/src/components/theme-toggle.tsx
index 7532775..09a5fb8 100644
--- a/frontend/src/components/theme-toggle.tsx
+++ b/frontend/src/components/theme-toggle.tsx
@@ -14,26 +14,6 @@ import {
 
 export function ThemeToggle() {
   const { setTheme, theme } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
-
-  // Ensure we only render the correct icon after mounting to avoid hydration mismatch
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return (
-      <Button 
-        variant="ghost" 
-        size="icon" 
-        className="nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
-        disabled
-      >
-        <Monitor className="h-5 w-5" />
-        <span className="sr-only">Toggle theme</span>
-      </Button>
-    )
-  }
 
   return (
     <DropdownMenu>
@@ -41,7 +21,8 @@ export function ThemeToggle() {
         <Button 
           variant="ghost" 
           size="icon" 
-          className="nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
+          className="nav-button-transparent min-w-[44px] min-h-[44px] cursor-pointer"
+          suppressHydrationWarning
         >
           {/* Simple icon transitions with consistent styling */}
           <Sun className="h-5 w-5 rotate-0 scale-100 transition-all duration-500 ease-in-out dark:-rotate-180 dark:scale-0" />