Settings page : Ticket number not defined

app/page.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import React, {useState} from "react"
 import {Button} from "@/components/ui/button"
 import {useSession} from "@/auth/session"
 import {useRouter} from "next/navigation"

app/profile/[slug]/ssr.tsx

@@ -3,13 +3,13 @@ import {CommentFilledIcon, MintFilledIcon} from "@/components/ui/icons"
 import React from "react"
 import {NftType} from "@/domain/types"
 import {Button} from "@/components/ui/button"
-import {DotsHorizontalIcon} from "@radix-ui/react-icons"
 import {cn} from "@/lib/utils"
 import {Pacifico} from "next/font/google"
 import Link from "next/link"
 import {createRedirectQueryParam} from "@/utils/url"
 import {Separator} from "@/components/ui/separator"
 import {FollowUnfollowTextButton, ProfileStatisticsSectionSubAccess, ViewerUserType} from "../types"
+import {SettingsPopover} from "@/components/section/SettingsPopover"
 
 export const dynamic = "force-dynamic"
 
@@ -175,9 +175,7 @@ function SmallScreenProfileSection({
         <div className="flex flex-col justify-between mt-2 ml-8">
           <div className="flex items-center">
             <h2 className="text-lg font-medium">{username}</h2>
-            <Link className="ml-4 mt-1" href="/">
-              <DotsHorizontalIcon className="size-5"/>
-            </Link>
+            <SettingsPopover/>
           </div>
           <div className="flex gap-2">
             {
@@ -282,9 +280,8 @@ function MediumScreenProfileSection({
             {
               secondButton()
             }
-            <Link className="mt-1 ml-2.5" href="/">
-              <DotsHorizontalIcon className="size-5"/>
-            </Link>
+            <SettingsPopover/>
+
           </div>
           <div className="font-semibold text-sm mt-4">{displayName}</div>
 

app/settings/components/sidebar-nav.tsx

@@ -1,29 +1,60 @@
 "use client"
-
 import Link from "next/link"
 
 import {cn} from "@/lib/utils"
 import {buttonVariants} from "@/components/ui/button"
 import React from "react"
 
 interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
-  items: {
-    buttonVariant: any
-    href: string
-    title: string
-  }[]
 }
 
-export function SidebarNav({className, items, ...props}: SidebarNavProps) {
+type ButtonType =
+  "link"
+  | "default"
+  | "destructive"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "tertiary"
+  | null
+  | undefined;
+
+const sidebarNavItems: {
+  title: string,
+  href: string,
+  buttonVariant: ButtonType,
+}[] = [
+  {
+    title: "Log out",
+    href: "/logout",
+    buttonVariant: "outline",
+  },
+  {
+    title: "Change profile",
+    href: "/change-profile",
+    buttonVariant: "outline",
+  }, {
+    title: "Switch theme",
+    href: "/switch-mode",
+    buttonVariant: "outline",
+  },
+  {
+    title: "Settings",
+    href: "/settings",
+    buttonVariant: "outline",
+  },
+]
+
+export function SidebarNav({className, ...props}: SidebarNavProps) {
   return (
     <nav
       className={cn(
-        "flex flex-col space-x-0 space-y-1",
+        "flex flex-col",
         className
       )}
       {...props}
     >
-      {items.map((item) => (
+      {sidebarNavItems.map((item) => (
         <Link
           key={item.href}
           href={item.href}

app/settings/page.tsx

@@ -1,44 +1,16 @@
+"use client"
+
 import React from "react"
 import {SidebarNav} from "./components/sidebar-nav"
 
 
-const sidebarNavItems = [
-  {
-    title: "TEA BAGs list",
-    href: "/tea-bags",
-    buttonVariant: "secondary",
-  },
-  {
-    title: "Reset password",
-    href: "/forgot-password",
-    buttonVariant: "secondary",
-  },
-  {
-    title: "Reset email",
-    href: "/reset-email",
-    buttonVariant: "secondary",
-  },
-  {
-    title: "Log out",
-    href: "/logout",
-    buttonVariant: "secondary",
-  },
-  {
-    title: "Edite profile",
-    href: "/settings/profile",
-    buttonVariant: "outline",
-  }, {
-    title: "Delete account",
-    href: "/delete-account",
-    buttonVariant: "destructive",
-  },
-]
-
-
-export default async function SettingsProfilePage() {
+export default function SettingsProfilePage() {
   return (
     <aside className="w-full">
-      <SidebarNav items={sidebarNavItems}/>
+      <SidebarNav className="gap-1"/>
     </aside>
   )
 }
+
+
+

src/components/section/SettingsPopover.tsx

@@ -0,0 +1,27 @@
+"use client"
+import React from "react"
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover"
+import {PopoverArrow, PopoverPortal} from "@radix-ui/react-popover"
+import {SidebarNav} from "../../../app/settings/components/sidebar-nav"
+import {MenuIcon} from "lucide-react"
+
+
+export function SettingsPopover() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button className="IconButton p-5" aria-label="Update dimensions">
+          <MenuIcon/>
+        </button>
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverContent className="PopoverContent" sideOffset={5}>
+          <div style={{display: "flex", flexDirection: "column", gap: 1}}>
+            <SidebarNav className="gap-1"/>
+          </div>
+          <PopoverArrow className="PopoverArrow"/>
+        </PopoverContent>
+      </PopoverPortal>
+    </Popover>
+  )
+}

src/components/section/navigation/navigation-footer.tsx

@@ -1,49 +1,45 @@
 import {Separator} from "@/components/ui/separator"
-import {HomeIcon, MenuIcon, PlusIcon, SearchIcon, SendIcon, UserIcon} from "lucide-react"
+import {HomeIcon, PlusIcon, SearchIcon, SendIcon, UserIcon} from "lucide-react"
 import React from "react"
 import {SelectedNavigation} from "@/components/section/navigation/index"
 import Link from "next/link"
 import {cn} from "@/lib/utils"
 
 interface NavigationFooterProps {
-    className?: string,
-    selectedNavigation: SelectedNavigation,
+  className?: string,
+  selectedNavigation: SelectedNavigation,
   username: string,
   avatarUrl: string,
 }
 
 export function NavigationFooter({className, selectedNavigation, username, avatarUrl}: NavigationFooterProps) {
-    return (
-        <section className={className}>
-            <Separator/>
-            <footer className="h-12 flex justify-evenly items-center">
-                <Link href="/home">
-                    <HomeIcon className={cn(selectedNavigation === "home" && "text-primary")} size={26}/>
-                </Link>
-                <Link href="/search">
-                    <SearchIcon className={cn(selectedNavigation === "search" && "text-primary")} size={26}/>
-                </Link>
-                <Link href="/new">
-                    <PlusIcon className={cn(selectedNavigation === "new" && "text-primary")} size={30}/>
-                </Link>
-                <Link href="/messages">
-                    <SendIcon className={cn(selectedNavigation === "messages" && "text-primary")} size={24}/>
-                </Link>
-                <Link className="grid items-center" href="/me">
+  return (
+    <section className={className}>
+      <Separator/>
+      <footer className="h-12 flex justify-evenly items-center">
+        <Link href="/home">
+          <HomeIcon className={cn(selectedNavigation === "home" && "text-primary")} size={26}/>
+        </Link>
+        <Link href="/search">
+          <SearchIcon className={cn(selectedNavigation === "search" && "text-primary")} size={26}/>
+        </Link>
+        <Link href="/new">
+          <PlusIcon className={cn(selectedNavigation === "new" && "text-primary")} size={30}/>
+        </Link>
+        <Link href="/messages">
+          <SendIcon className={cn(selectedNavigation === "messages" && "text-primary")} size={24}/>
+        </Link>
+        <Link className="grid items-center" href="/me">
           <img
             className={cn("rounded-full border-2 absolute size-8", selectedNavigation === "own_profile" && "border-primary")}
             crossOrigin="anonymous"
             draggable={false}
             src={avatarUrl}
             alt={`profile avatar of ${username}`}
           />
-                    <UserIcon className={selectedNavigation === "own_profile" ? "text-primary" : ""} size={26}/>
-                </Link>
-                <Link href="/settings">
-                    <MenuIcon className={selectedNavigation === "settings" ? "text-primary": ""} size={26}/>
-                </Link>
-
-            </footer>
-        </section>
-    )
+          <UserIcon className={selectedNavigation === "own_profile" ? "text-primary" : ""} size={26}/>
+        </Link>
+      </footer>
+    </section>
+  )
 }