dropdown menu on url bar for profile actions

Author: CADawg

ui/src/components/navbar/NavAuthLinks.tsx

@@ -3,20 +3,34 @@ import URLS from "../../helpers/URLS";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faUserCircle} from "@fortawesome/free-solid-svg-icons/faUserCircle";
 import pocketbase from "../../libraries/Pocketbase";
-import React from "preact/compat";
 import NavBarLink from "./NavBarLink";
+import NavBarDropdownLink, {
+    NavBarDropdownItem,
+    NavBarDropdownItemContainer,
+    NavBarDropdownLinkText
+} from "./NavBarDropdownLink";
 
 export default function NavAuthLinks() {
     const authValid = useAuthValid();
 
     if (authValid) {
-        return <>
-            <NavBarLink href={URLS.DASHBOARD}>
+        return <NavBarDropdownLink>
+            <NavBarDropdownLinkText>
                 <FontAwesomeIcon
                     icon={faUserCircle}/>&nbsp;{pocketbase.authStore?.model?.username}
-            </NavBarLink>
-            <NavBarLink href={URLS.LOGOUT}>Logout</NavBarLink>
-        </>;
+            </NavBarDropdownLinkText>
+            <NavBarDropdownItemContainer>
+                <NavBarDropdownItem>
+                    <NavBarLink href={URLS.DASHBOARD}>Dashboard</NavBarLink>
+                </NavBarDropdownItem>
+                <NavBarDropdownItem>
+                    <NavBarLink href={URLS.USER_SETTINGS}>Account</NavBarLink>
+                </NavBarDropdownItem>
+                <NavBarDropdownItem>
+                    <NavBarLink href={URLS.LOGOUT}>Logout</NavBarLink>
+                </NavBarDropdownItem>
+            </NavBarDropdownItemContainer>
+        </NavBarDropdownLink>;
     }
 
     return <>

ui/src/components/navbar/NavBarDropdownLink.tsx

@@ -0,0 +1,26 @@
+import {ComponentChildren} from "preact";
+import {PropsWithChildren, useState} from "preact/compat";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faCaretDown} from "@fortawesome/free-solid-svg-icons/faCaretDown";
+
+export default function NavBarDropdownLink(props: { children: ComponentChildren }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return <button onClick={() => setIsOpen(!isOpen)}
+                   className={`navbar-link navbar-link-dropdown navbar-link__animated ${isOpen ? 'navbar-link-dropdown__active' : ''}`}>
+        {props.children}
+    </button>
+}
+
+export function NavBarDropdownLinkText(props: PropsWithChildren) {
+    return <span className="navbar-link__text">{props.children} <FontAwesomeIcon icon={faCaretDown} />
+    </span>
+}
+
+export function NavBarDropdownItemContainer(props: PropsWithChildren) {
+    return <span className={"navbar-link-dropdown-items"}>{props.children}</span>
+}
+
+export function NavBarDropdownItem(props: PropsWithChildren) {
+    return <span className={"navbar-link-dropdown-items-item"}>{props.children}</span>
+}

ui/src/helpers/URLS.ts

@@ -8,6 +8,7 @@ const URLS: { [key: string]: string } = {
     FORGOT_PASSWORD: "/auth/forgot-password",
     RESET_PASSWORD: "/auth/reset-password/:token",
     CHANGE_PASSWORD: "/auth/change-password",
+    USER_SETTINGS: "/dashboard/user",
 }
 
 export default URLS;

ui/src/styles/style.scss

@@ -253,6 +253,62 @@ nav.navbar {
             }
         }
 
+        .navbar-link.navbar-link-dropdown {
+            background: none;
+            border: none;
+            position: relative;
+            overflow: visible;
+
+            .navbar-link__text {
+                margin-top: auto;
+                margin-bottom: auto;
+            }
+
+            &:hover, & {
+                >.navbar-link__text, >.navbar-link__text:hover {
+                    margin-top: auto;
+                    margin-bottom: auto;
+                }
+            }
+
+            .navbar-link-dropdown-items {
+                position: absolute;
+                top: calc(100% - 10px);
+                padding-top: 10px;
+                width: 100%;
+                height: auto;
+                display: none;
+
+                background-color: $celadon-blue;
+
+                border-bottom-left-radius: 5px;
+                border-bottom-right-radius: 5px;
+            }
+
+            &.navbar-link-dropdown__active, &:hover {
+                .navbar-link-dropdown-items {
+                    display: block;
+                }
+
+                .navbar-link {
+                    height: calc($nav-height - 20px);
+
+                    border-top: 1px solid white;
+
+                    .navbar-link__text {
+                        margin-top: 32px;
+                        margin-bottom: 0;
+                    }
+
+                    &:hover {
+                        .navbar-link__text {
+                            margin-top: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
         .navbar-link {
             height: 100%;
             padding: 7px 10px;
@@ -303,11 +359,11 @@ nav.navbar {
             }
 
             &:hover {
-                .navbar-link__text {
+                >.navbar-link__text {
                     margin-top: 0;
                 }
 
-                .navbar-link__decoration {
+                >.navbar-link__decoration {
                     margin-top: 0;
                     opacity: 1;
                 }