use same navbar in deck view

packages/app/src/Element/Articles.tsx

@@ -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";
 

packages/app/src/Element/Deck/Nav.css

@@ -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;
-}

packages/app/src/Element/Deck/Nav.tsx

@@ -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>
-  );
-}

packages/app/src/Element/Event/NoteCreatorButton.tsx

@@ -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;

packages/app/src/Pages/DeckLayout.tsx

@@ -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) {

packages/app/src/Pages/Layout/NavSidebar.tsx

@@ -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>

packages/app/src/Pages/settings/Root.tsx

@@ -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} />

packages/app/src/index.css

@@ -943,5 +943,5 @@ svg.zap-solid {
 }
 
 .hide-scrollbar::-webkit-scrollbar {
-    display: none;  /* Safari and Chrome */
-}
+  display: none; /* Safari and Chrome */
+}