simplify settings page
This commit is contained in:
parent
dd941ae70e
commit
4dfa610c87
@ -30,15 +30,15 @@ export default function NavSidebar() {
|
||||
<div className="sticky border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex xl:w-56 flex-col px-2 py-4 flex-shrink-0 gap-2">
|
||||
<LogoHeader />
|
||||
<div className="flex-grow flex flex-col justify-between">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col">
|
||||
{MENU_ITEMS.map(item => (
|
||||
<NavLink
|
||||
key={item.link}
|
||||
to={item.link}
|
||||
className="flex items-center py-2 px-4 rounded-full text-neutral-100 hover:bg-neutral-800 hover:text-neutral-200 hover:no-underline"
|
||||
className="settings-row hover:no-underline"
|
||||
activeClassName="bg-neutral-800 text-neutral-200">
|
||||
<Icon name={item.icon} size={24} className="mr-2" />
|
||||
<span className="hidden xl:inline">{item.label}</span>
|
||||
<Icon name={item.icon} size={24} />
|
||||
<span className="hidden xl:inline ml-2">{item.label}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import "./Root.css";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
||||
import Icon from "@/Icons/Icon";
|
||||
@ -7,7 +7,6 @@ import { LoginStore, logout } from "@/Login";
|
||||
import useLogin from "@/Hooks/useLogin";
|
||||
import { getCurrentSubscription } from "@/Subscription";
|
||||
import usePageWidth from "@/Hooks/usePageWidth";
|
||||
|
||||
import messages from "./messages";
|
||||
|
||||
const SettingsIndex = () => {
|
||||
@ -17,98 +16,59 @@ const SettingsIndex = () => {
|
||||
const pageWidth = usePageWidth();
|
||||
const sub = getCurrentSubscription(LoginStore.allSubscriptions());
|
||||
|
||||
function handleLogout() {
|
||||
const handleNavigate = useCallback((path) => {
|
||||
navigate(path);
|
||||
}, [navigate]);
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
logout(login.id);
|
||||
navigate("/");
|
||||
}
|
||||
}, [login.id, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (location.pathname === "/settings" && pageWidth >= 768) {
|
||||
navigate("/settings/profile", { replace: true });
|
||||
}
|
||||
}, [location, pageWidth]);
|
||||
}, [location, navigate, pageWidth]);
|
||||
|
||||
const [hideMenu, hideContent] = useMemo(() => {
|
||||
return [location.pathname !== "/settings" && pageWidth < 768, location.pathname === "/settings" && pageWidth < 768];
|
||||
}, [location, pageWidth]);
|
||||
const [hideMenu, hideContent] = [location.pathname !== "/settings" && pageWidth < 768, location.pathname === "/settings" && pageWidth < 768];
|
||||
|
||||
const menuItems = [
|
||||
{ icon: "profile", message: messages.Profile, path: "profile" },
|
||||
{ icon: "relay", message: messages.Relays, path: "relays" },
|
||||
{ icon: "key", message: "Export Keys", id: "08zn6O", path: "keys" },
|
||||
{ icon: "shield-tick", message: "Moderation", id: "wofVHy", path: "moderation" },
|
||||
{ icon: "badge", message: "Nostr Address", id: "9pMqYs", path: "handle" },
|
||||
{ icon: "gear", message: messages.Preferences, path: "preferences" },
|
||||
{ icon: "wallet", message: "Wallet", id: "3yk8fB", path: "wallet" },
|
||||
{ icon: "heart", message: messages.Donate, path: "/donate" },
|
||||
{ icon: "hard-drive", message: "Cache", id: "DBiVK1", path: "cache" },
|
||||
{ icon: "profile", message: messages.SocialGraph, path: "/graph" }
|
||||
];
|
||||
|
||||
if (CONFIG.features.subscriptions) {
|
||||
menuItems.push({ icon: "diamond", message: "Subscription", id: "R/6nsx", path: "/subscribe/manage" });
|
||||
}
|
||||
|
||||
if (CONFIG.features.zapPool) {
|
||||
menuItems.push({ icon: "piggy-bank", message: "Zap Pool", id: "i/dBAR", path: "/zap-pool" });
|
||||
}
|
||||
|
||||
if (sub) {
|
||||
menuItems.push({ icon: "code-circle", message: "Account Switcher", id: "7BX/yC", path: "accounts" });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="settings-nav">
|
||||
{!hideMenu && (
|
||||
<div>
|
||||
<div className="settings-row" onClick={() => navigate("profile")}>
|
||||
<Icon name="profile" size={24} />
|
||||
<FormattedMessage {...messages.Profile} />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
<div className="settings-row" onClick={() => navigate("relays")}>
|
||||
<Icon name="relay" size={24} />
|
||||
<FormattedMessage {...messages.Relays} />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
<div className="settings-row" onClick={() => navigate("keys")}>
|
||||
<Icon name="key" size={24} />
|
||||
<FormattedMessage defaultMessage="Export Keys" id="08zn6O" />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
<div className="settings-row" onClick={() => navigate("moderation")}>
|
||||
<Icon name="shield-tick" size={24} />
|
||||
<FormattedMessage defaultMessage="Moderation" id="wofVHy" />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
<div className="settings-row" onClick={() => navigate("handle")}>
|
||||
<Icon name="badge" size={24} />
|
||||
<FormattedMessage defaultMessage="Nostr Address" id="9pMqYs" />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
{CONFIG.features.subscriptions && (
|
||||
<div className="settings-row" onClick={() => navigate("/subscribe/manage")}>
|
||||
<Icon name="diamond" size={24} />
|
||||
<FormattedMessage defaultMessage="Subscription" id="R/6nsx" />
|
||||
{menuItems.map(({ icon, message, id, path }) => (
|
||||
<div className="settings-row" onClick={() => handleNavigate(path)} key={path}>
|
||||
<Icon name={icon} size={24} />
|
||||
<FormattedMessage {...(id ? { defaultMessage: message, id } : message)} />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
)}
|
||||
{sub && (
|
||||
<div className="settings-row" onClick={() => navigate("accounts")}>
|
||||
<Icon name="code-circle" size={24} />
|
||||
<FormattedMessage defaultMessage="Account Switcher" id="7BX/yC" />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="settings-row" onClick={() => navigate("preferences")}>
|
||||
<Icon name="gear" size={24} />
|
||||
<FormattedMessage {...messages.Preferences} />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
|
||||
<div className="settings-row" onClick={() => navigate("wallet")}>
|
||||
<Icon name="wallet" size={24} />
|
||||
<FormattedMessage defaultMessage="Wallet" id="3yk8fB" />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
<div className="settings-row" onClick={() => navigate("/donate")}>
|
||||
<Icon name="heart" size={24} />
|
||||
<FormattedMessage {...messages.Donate} />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
{CONFIG.features.zapPool && (
|
||||
<div className="settings-row" onClick={() => navigate("/zap-pool")}>
|
||||
<Icon name="piggy-bank" size={24} />
|
||||
<FormattedMessage defaultMessage="Zap Pool" id="i/dBAR" />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
)}
|
||||
<div className="settings-row" onClick={() => navigate("cache")}>
|
||||
<Icon name="hard-drive" size={24} />
|
||||
<FormattedMessage defaultMessage="Cache" id="DBiVK1" />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
<div className="settings-row" onClick={() => navigate("/graph")}>
|
||||
<Icon name="profile" size={24} />
|
||||
<FormattedMessage {...messages.SocialGraph} />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
))}
|
||||
<div className="settings-row" onClick={handleLogout}>
|
||||
<Icon name="logout" size={24} />
|
||||
<FormattedMessage {...messages.LogOut} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user