This commit is contained in:
parent
ef77606427
commit
4eb0408c27
@ -3,7 +3,7 @@ import { useReactions } from "@snort/system-react";
|
|||||||
|
|
||||||
import { useArticles } from "@/Feed/ArticlesFeed";
|
import { useArticles } from "@/Feed/ArticlesFeed";
|
||||||
import { orderDescending } from "@/SnortUtils";
|
import { orderDescending } from "@/SnortUtils";
|
||||||
import Note from "../Event/Note";
|
import Note from "./Event/Note";
|
||||||
import { useContext } from "react";
|
import { useContext } from "react";
|
||||||
import { DeckContext } from "@/Pages/DeckLayout";
|
import { DeckContext } from "@/Pages/DeckLayout";
|
||||||
|
|
@ -1,12 +0,0 @@
|
|||||||
nav.deck {
|
|
||||||
width: 48px;
|
|
||||||
height: calc(100vh - 20px);
|
|
||||||
padding: 10px 8px;
|
|
||||||
border-right: 1px solid var(--border-color);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.deck .avatar {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
@ -1,38 +0,0 @@
|
|||||||
import { useUserProfile } from "@snort/system-react";
|
|
||||||
import Avatar from "@/Element/User/Avatar";
|
|
||||||
import useLogin from "@/Hooks/useLogin";
|
|
||||||
import "./Nav.css";
|
|
||||||
import Icon from "@/Icons/Icon";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { NoteCreatorButton } from "@/Element/Event/NoteCreatorButton";
|
|
||||||
import { ProfileLink } from "@/Element/User/ProfileLink";
|
|
||||||
|
|
||||||
export function DeckNav() {
|
|
||||||
const { publicKey } = useLogin();
|
|
||||||
const profile = useUserProfile(publicKey);
|
|
||||||
|
|
||||||
const unreadDms = 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav className="deck flex flex-col justify-between">
|
|
||||||
<div className="flex flex-col items-center g24">
|
|
||||||
<Link className="btn" to="/messages">
|
|
||||||
<Icon name="mail" size={24} />
|
|
||||||
{unreadDms > 0 && <span className="has-unread"></span>}
|
|
||||||
</Link>
|
|
||||||
<NoteCreatorButton />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center g16">
|
|
||||||
{/*<Link className="btn" to="/">
|
|
||||||
<Icon name="grid-01" size={24} />
|
|
||||||
</Link>*/}
|
|
||||||
<Link className="btn" to="/settings">
|
|
||||||
<Icon name="settings-02" size={24} />
|
|
||||||
</Link>
|
|
||||||
<ProfileLink pubkey={publicKey ?? ""} user={profile}>
|
|
||||||
<Avatar pubkey={publicKey ?? ""} user={profile} />
|
|
||||||
</ProfileLink>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
@ -60,7 +60,7 @@ export const NoteCreatorButton = ({
|
|||||||
{!shouldHideNoteCreator && (
|
{!shouldHideNoteCreator && (
|
||||||
<button
|
<button
|
||||||
ref={buttonRef}
|
ref={buttonRef}
|
||||||
className={classNames("flex flex-row items-center primary rounded-full", { "circle": !showText }, className)}
|
className={classNames("flex flex-row items-center primary rounded-full", { circle: !showText }, className)}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
update(v => {
|
update(v => {
|
||||||
v.replyTo = undefined;
|
v.replyTo = undefined;
|
||||||
|
@ -4,11 +4,10 @@ import { Outlet, useNavigate } from "react-router-dom";
|
|||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
||||||
|
|
||||||
import { DeckNav } from "@/Element/Deck/Nav";
|
|
||||||
import useLoginFeed from "@/Feed/LoginFeed";
|
import useLoginFeed from "@/Feed/LoginFeed";
|
||||||
import { useLoginRelays } from "@/Hooks/useLoginRelays";
|
import { useLoginRelays } from "@/Hooks/useLoginRelays";
|
||||||
import { useTheme } from "@/Hooks/useTheme";
|
import { useTheme } from "@/Hooks/useTheme";
|
||||||
import Articles from "@/Element/Deck/Articles";
|
import Articles from "@/Element/Articles";
|
||||||
import TimelineFollows from "@/Element/Feed/TimelineFollows";
|
import TimelineFollows from "@/Element/Feed/TimelineFollows";
|
||||||
import { transformTextCached } from "@/Hooks/useTextTransformCache";
|
import { transformTextCached } from "@/Hooks/useTextTransformCache";
|
||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
@ -22,6 +21,7 @@ import { ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext";
|
|||||||
import Toaster from "@/Toaster";
|
import Toaster from "@/Toaster";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import { LongFormText } from "@/Element/Event/LongFormText";
|
import { LongFormText } from "@/Element/Event/LongFormText";
|
||||||
|
import NavSidebar from "@/Pages/Layout/NavSidebar";
|
||||||
|
|
||||||
type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
|
type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
|
||||||
|
|
||||||
@ -67,7 +67,7 @@ export function SnortDeckLayout() {
|
|||||||
setArticle: (e?: TaggedNostrEvent) => setDeckState({ article: e }),
|
setArticle: (e?: TaggedNostrEvent) => setDeckState({ article: e }),
|
||||||
reset: () => setDeckState({}),
|
reset: () => setDeckState({}),
|
||||||
}}>
|
}}>
|
||||||
<DeckNav />
|
<NavSidebar />
|
||||||
<div className="deck-cols">
|
<div className="deck-cols">
|
||||||
{cols.map(c => {
|
{cols.map(c => {
|
||||||
switch (c) {
|
switch (c) {
|
||||||
|
@ -43,9 +43,9 @@ const MENU_ITEMS = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const getNavLinkClass = (isActive: boolean) => {
|
const getNavLinkClass = (isActive: boolean) => {
|
||||||
return isActive ?
|
return isActive
|
||||||
"xl:ml-1 py-4 hover:no-underline flex flex-row items-center text-nostr-purple" :
|
? "xl:ml-1 py-4 hover:no-underline flex flex-row items-center text-nostr-purple"
|
||||||
"xl:ml-1 py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center";
|
: "xl:ml-1 py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center";
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function NavSidebar() {
|
export default function NavSidebar() {
|
||||||
@ -68,10 +68,7 @@ export default function NavSidebar() {
|
|||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<NavLink
|
<NavLink key={item.link} to={item.link} className={({ isActive }) => getNavLinkClass(isActive)}>
|
||||||
key={item.link}
|
|
||||||
to={item.link}
|
|
||||||
className={({ isActive }) => getNavLinkClass(isActive)}>
|
|
||||||
<Icon name={item.icon} size={24} />
|
<Icon name={item.icon} size={24} />
|
||||||
<span className="hidden xl:inline ml-3">{item.label}</span>
|
<span className="hidden xl:inline ml-3">{item.label}</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import "./Root.css";
|
import "./Root.css";
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import {Outlet, NavLink, useNavigate, useLocation} from "react-router-dom";
|
import { Outlet, NavLink, useNavigate, useLocation } from "react-router-dom";
|
||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
import { LoginStore, logout } from "@/Login";
|
import { LoginStore, logout } from "@/Login";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
@ -66,12 +66,7 @@ const SettingsIndex = () => {
|
|||||||
{!hideMenu && (
|
{!hideMenu && (
|
||||||
<div>
|
<div>
|
||||||
{menuItems.map(({ icon, message, id, path }) => (
|
{menuItems.map(({ icon, message, id, path }) => (
|
||||||
<NavLink
|
<NavLink to={path} key={path} className={getNavLinkClass} end>
|
||||||
to={path}
|
|
||||||
key={path}
|
|
||||||
className={getNavLinkClass}
|
|
||||||
end
|
|
||||||
>
|
|
||||||
<Icon name={icon} size={24} />
|
<Icon name={icon} size={24} />
|
||||||
<FormattedMessage {...(id ? { defaultMessage: message, id } : message)} />
|
<FormattedMessage {...(id ? { defaultMessage: message, id } : message)} />
|
||||||
<Icon name="arrowFront" size={16} />
|
<Icon name="arrowFront" size={16} />
|
||||||
|
@ -943,5 +943,5 @@ svg.zap-solid {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hide-scrollbar::-webkit-scrollbar {
|
.hide-scrollbar::-webkit-scrollbar {
|
||||||
display: none; /* Safari and Chrome */
|
display: none; /* Safari and Chrome */
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user