refactor: Add dropdown menu for theme selection in navigation menu

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@hookform/resolvers": "^3.7.0",
         "@radix-ui/react-checkbox": "^1.1.1",
+        "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-navigation-menu": "^1.2.0",
@@ -2977,6 +2978,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.1.tgz",
+      "integrity": "sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
@@ -3062,6 +3091,45 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.1.tgz",
+      "integrity": "sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-navigation-menu": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.7.0",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",

src/components/feature.tsx

@@ -12,17 +12,43 @@ export default function Feature({
   color: string;
 }) {
   return (
-    <div className="flex items-center relative mx-auto mt-32">
+    <div className="flex flex-col lg:flex-row items-center relative mx-auto mt-32">
       <div
-        className={"ml-32 flex flex-col justify-center max-w-96"}
+        className={"flex flex-col justify-center max-w-96"}
       >
         <h1 className="text-6xl font-bold">{title}</h1>
         <p className="text-muted-foreground mt-3">{description}</p>
       </div>
-      <div className={ny(`ml-64 w-96 h-96 rounded-lg relative overflow-hidden`)} style={{ backgroundColor: color }}>
+      <div className={ny(`mt-10 lg:ml-64 lg:mt-0 w-96 h-96 rounded-lg relative overflow-hidden`)} style={{ backgroundColor: color }}>
         {children}
       </div>  
     </div>
   );
 }
 
+export function FeatureCard({
+  title,
+  description,
+  todo = false,
+}: {
+  title: string;
+  description: string;
+  todo?: boolean;
+}) {
+  return (
+    <div className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1">
+      <div className="text-md font-medium mb-5">
+        {title}
+      </div>
+      <div className="text-muted-foreground text-sm font-medium">
+        {description}
+      </div>
+      {todo && (
+        <div className="absolute top-0 right-0 bg-blue-500 text-white text-xs font-medium p-1 rounded-bl-lg">
+          Coming soon
+        </div>
+      )}
+    </div>
+  );
+}
+

src/components/features.tsx

@@ -1,8 +1,7 @@
-import Feature from "./feature";
+import Feature, { FeatureCard } from "./feature";
 import { Button } from "./ui/button";
 import TextReveal from "./ui/text-reveal";
 
-
 export default function Features() {
   return (
     <div>
@@ -19,21 +18,37 @@ export default function Features() {
         title="Sidebar" 
         description="Access websites with ease. The sidebar allows you to quickly access your favorite websites without disrupting your browsing experience."
         color="#F5ED97">
-        <img src="/sidebar.png" alt="Split Views" className="absolute left-1/2 top-1/2" style={{
+        <img src="/sidebar.png" alt="Split Views" className="absolute left-1/2 top-1/2 w-4/5 rounded-lg overflow-hidden" style={{
           transform: "translate(-50%, -50%)"
         }} />
       </Feature>
       <Feature 
         title="Profiles"
         description="Switch between profiles with ease. Create multiple profiles to keep your work and personal browsing separate."
-        color="#8CE7C0">
-        <img src="/profiles.png" alt="Profiles" className="absolute left0 w-full top-1/2" style={{
-          transform: "translateY(-50%)"
+        color="#C2E3B7">
+        <img src="/profiles.png" alt="Profiles" className="absolute left-1/2 w-3/4 top-1/2" style={{
+          transform: "translate(-50%, -50%)"
         }} />
       </Feature>
       <div className="my-40 w-full flex items-center justify-center flex-col">
         <h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1>
         <p className="text-muted-foreground text-center mt-3 w-1/2">Zen is packed with features that will change the way you browse the web. Download it today and experience a new way to browse the web.</p>
+        <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
+          <FeatureCard title="Beautifully designed"
+              description="Zen is designed to be easy to use and beautiful to look at." />
+          <FeatureCard title="Customizable"
+              description="Customize Zen to fit your needs. Change the theme, layout, and more." />
+          <FeatureCard title="Workspaces"
+              description="Create workspaces to keep your tabs organized." 
+              todo />
+          <FeatureCard title="Better new tab page"
+              description="The new tab page in Zen is designed to help you get to your favorite websites faster." />
+          <FeatureCard title="Tab groups"
+              description="Organize your tabs into groups to keep your browsing experience organized."
+              todo />
+          <FeatureCard title="Vertical tabs"
+              description="Keep your tabs organized with vertical tabs." />
+        </div>
         <Button onClick={() => window.location.href = "/download"} className="mt-8">Download Zen Browser</Button>
       </div>
     </div>

src/components/header.tsx

@@ -73,7 +73,8 @@ export default function Header() {
           transform: 'translateX(-50%)',
         }} />
       </div>
-      <img src="/browser.png" className={ny('mx-auto shadow mt-24 z-0 w-3/4 rounded-xl overflow-hidden border-2 border-blue-500')} />
+      <img src="/browser-dark.png" className={ny('hidden dark:block mx-auto shadow mt-24 z-0 w-3/4 rounded-xl overflow-hidden border-2 border-blue-500')} />
+      <img src="/browser-light.png" className={ny('dark:hidden mx-auto shadow mt-24 z-0 w-3/4 rounded-xl overflow-hidden border-2 border-blue-500')} />
     </>
   )
 }

src/components/mode-toggle.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from 'react'
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { useTheme } from 'next-themes'
+import { Button } from './ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu'
+
+export function ModeToggle() {
+   const { setTheme } = useTheme()
+
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="size-8 px-0">
+               <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+               <MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+               <span className="sr-only">Toggle theme</span>
+            </Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setTheme('light')}>
+               Light
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme('dark')}>
+               Dark
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme('system')}>
+               System
+            </DropdownMenuItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}

src/components/navigation.tsx

@@ -14,6 +14,7 @@ import {
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu"
 import Logo from "./logo"
+import { ModeToggle } from "./mode-toggle"
  
 const components: { title: string; href: string; description: string }[] = [
   {
@@ -30,7 +31,7 @@ const components: { title: string; href: string; description: string }[] = [
  
 export function Navigation() {
   return (
-    <div className="backdrop-blur fixed z-10 top-0 left-0 w-full flex fixed border-b border-grey p-2 items-center justify-center">
+    <div className="bg-background fixed z-10 top-0 left-0 w-full flex fixed border-b border-grey p-2 items-center justify-center">
       <NavigationMenu>
         <NavigationMenuList className="w-full">
           <NavigationMenuItem className="cursor-pointer mr-20">
@@ -94,6 +95,7 @@ export function Navigation() {
               </NavigationMenuLink>
             </Link>
           </NavigationMenuItem>
+          <ModeToggle />
         </NavigationMenuList>
       </NavigationMenu>
     </div>

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,205 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import {
+   CheckIcon,
+   ChevronRightIcon,
+   DotFilledIcon,
+} from '@radix-ui/react-icons'
+
+import { ny } from '@/lib/utils'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+      inset?: boolean
+   }
+>(({ className, inset, children, ...props }, ref) => (
+   <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={ny(
+         'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+         inset && 'pl-8',
+         className,
+      )}
+      {...props}
+   >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+   </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName
+  = DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+   <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={ny(
+         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+         className,
+      )}
+      {...props}
+   />
+))
+DropdownMenuSubContent.displayName
+  = DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+   <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+         ref={ref}
+         sideOffset={sideOffset}
+         className={ny(
+            'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            className,
+         )}
+         {...props}
+      />
+   </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+      inset?: boolean
+   }
+>(({ className, inset, ...props }, ref) => (
+   <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={ny(
+         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         inset && 'pl-8',
+         className,
+      )}
+      {...props}
+   />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+   <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={ny(
+         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         className,
+      )}
+      checked={checked}
+      {...props}
+   >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+         <DropdownMenuPrimitive.ItemIndicator>
+            <CheckIcon className="size-4" />
+         </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+   </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName
+  = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+   <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      className={ny(
+         'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         className,
+      )}
+      {...props}
+   >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+         <DropdownMenuPrimitive.ItemIndicator>
+            <DotFilledIcon className="size-4 fill-current" />
+         </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+   </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+      inset?: boolean
+   }
+>(({ className, inset, ...props }, ref) => (
+   <DropdownMenuPrimitive.Label
+      ref={ref}
+      className={ny(
+         'px-2 py-1.5 text-sm font-semibold',
+         inset && 'pl-8',
+         className,
+      )}
+      {...props}
+   />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+   <DropdownMenuPrimitive.Separator
+      ref={ref}
+      className={ny('bg-muted -mx-1 my-1 h-px', className)}
+      {...props}
+   />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+function DropdownMenuShortcut({
+   className,
+   ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+   return (
+      <span
+         className={ny('ml-auto text-xs tracking-widest opacity-60', className)}
+         {...props}
+      />
+   )
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+
+export {
+   DropdownMenu,
+   DropdownMenuTrigger,
+   DropdownMenuContent,
+   DropdownMenuItem,
+   DropdownMenuCheckboxItem,
+   DropdownMenuRadioItem,
+   DropdownMenuLabel,
+   DropdownMenuSeparator,
+   DropdownMenuShortcut,
+   DropdownMenuGroup,
+   DropdownMenuPortal,
+   DropdownMenuSub,
+   DropdownMenuSubContent,
+   DropdownMenuSubTrigger,
+   DropdownMenuRadioGroup,
+}