forked from Kieran/snort
use same navbar in deck view
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 { orderDescending } from "@/SnortUtils";
|
||||
import Note from "../Event/Note";
|
||||
import Note from "./Event/Note";
|
||||
import { useContext } from "react";
|
||||
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 && (
|
||||
<button
|
||||
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={() =>
|
||||
update(v => {
|
||||
v.replyTo = undefined;
|
||||
|
@ -4,11 +4,10 @@ import { Outlet, useNavigate } from "react-router-dom";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
||||
|
||||
import { DeckNav } from "@/Element/Deck/Nav";
|
||||
import useLoginFeed from "@/Feed/LoginFeed";
|
||||
import { useLoginRelays } from "@/Hooks/useLoginRelays";
|
||||
import { useTheme } from "@/Hooks/useTheme";
|
||||
import Articles from "@/Element/Deck/Articles";
|
||||
import Articles from "@/Element/Articles";
|
||||
import TimelineFollows from "@/Element/Feed/TimelineFollows";
|
||||
import { transformTextCached } from "@/Hooks/useTextTransformCache";
|
||||
import Icon from "@/Icons/Icon";
|
||||
@ -22,6 +21,7 @@ import { ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext";
|
||||
import Toaster from "@/Toaster";
|
||||
import useLogin from "@/Hooks/useLogin";
|
||||
import { LongFormText } from "@/Element/Event/LongFormText";
|
||||
import NavSidebar from "@/Pages/Layout/NavSidebar";
|
||||
|
||||
type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
|
||||
|
||||
@ -67,7 +67,7 @@ export function SnortDeckLayout() {
|
||||
setArticle: (e?: TaggedNostrEvent) => setDeckState({ article: e }),
|
||||
reset: () => setDeckState({}),
|
||||
}}>
|
||||
<DeckNav />
|
||||
<NavSidebar />
|
||||
<div className="deck-cols">
|
||||
{cols.map(c => {
|
||||
switch (c) {
|
||||
|
@ -43,9 +43,9 @@ const MENU_ITEMS = [
|
||||
];
|
||||
|
||||
const getNavLinkClass = (isActive: boolean) => {
|
||||
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 hover:text-nostr-purple flex flex-row items-center";
|
||||
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 hover:text-nostr-purple flex flex-row items-center";
|
||||
};
|
||||
|
||||
export default function NavSidebar() {
|
||||
@ -68,10 +68,7 @@ export default function NavSidebar() {
|
||||
return "";
|
||||
}
|
||||
return (
|
||||
<NavLink
|
||||
key={item.link}
|
||||
to={item.link}
|
||||
className={({ isActive }) => getNavLinkClass(isActive)}>
|
||||
<NavLink key={item.link} to={item.link} className={({ isActive }) => getNavLinkClass(isActive)}>
|
||||
<Icon name={item.icon} size={24} />
|
||||
<span className="hidden xl:inline ml-3">{item.label}</span>
|
||||
</NavLink>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import "./Root.css";
|
||||
import { useCallback, useEffect } from "react";
|
||||
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 { LoginStore, logout } from "@/Login";
|
||||
import useLogin from "@/Hooks/useLogin";
|
||||
@ -66,12 +66,7 @@ const SettingsIndex = () => {
|
||||
{!hideMenu && (
|
||||
<div>
|
||||
{menuItems.map(({ icon, message, id, path }) => (
|
||||
<NavLink
|
||||
to={path}
|
||||
key={path}
|
||||
className={getNavLinkClass}
|
||||
end
|
||||
>
|
||||
<NavLink to={path} key={path} className={getNavLinkClass} end>
|
||||
<Icon name={icon} size={24} />
|
||||
<FormattedMessage {...(id ? { defaultMessage: message, id } : message)} />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
|
Loading…
Reference in New Issue
Block a user