sidebar items for non-logged-in user

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

@@ -1,17 +1,19 @@
 import { LogoHeader } from "./LogoHeader";
-import { Link } from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import Icon from "@/Icons/Icon";
 import {ProfileLink} from "../../Element/User/ProfileLink";
 import Avatar from "../../Element/User/Avatar";
 import useLogin from "../../Hooks/useLogin";
 import {useUserProfile} from "@snort/system-react";
 import {NoteCreatorButton} from "../../Element/Event/NoteCreatorButton";
+import {FormattedMessage} from "react-intl";
 
 const MENU_ITEMS = [
   {
     label: "Home",
     icon: "home",
     link: "/",
+    nonLoggedIn: true,
   },
   {
     label: "Messages",
@@ -38,25 +40,42 @@ export default function NavSidebar() {
     readonly: s.readonly,
   }));
   const profile = useUserProfile(publicKey);
+  const navigate = useNavigate();
 
   return (
     <div className="sticky items-center xl:items-start 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-4">
       <LogoHeader />
       <div className="flex-grow flex flex-col justify-between">
         <div className="flex flex-col items-center xl:items-start font-bold text-lg">
-          {MENU_ITEMS.map(item => (
-            <NavLink
-              key={item.link}
-              to={item.link}
-              className="py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center"
-              activeClassName="bg-neutral-800 text-neutral-200">
-              <Icon name={item.icon} size={24} />
-              <span className="hidden xl:inline ml-2">{item.label}</span>
-            </NavLink>
-          ))}
-          <div className="mt-2">
-            <NoteCreatorButton alwaysShow={true} />
-          </div>
+          {MENU_ITEMS.map(item => {
+            if (!item.nonLoggedIn && !publicKey) {
+              return '';
+            }
+            return (
+              <NavLink
+                key={item.link}
+                to={item.link}
+                className="py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center"
+                activeClassName="bg-neutral-800 text-neutral-200">
+                <Icon name={item.icon} size={24} />
+                <span className="hidden xl:inline ml-2">{item.label}</span>
+              </NavLink>
+            );
+          })}
+          {publicKey ? (
+            <div className="mt-2">
+              <NoteCreatorButton alwaysShow={true} />
+            </div>
+          ) : (
+            <div className="mt-2">
+              <button onClick={() => navigate("/login/sign-up")} className="flex flex-row items-center primary">
+                <Icon name="sign-in" size={24} />
+                <span className="hidden xl:inline ml-2">
+                  <FormattedMessage defaultMessage="Sign up" id="8HJxXG" />
+                </span>
+              </button>
+            </div>
+          )}
         </div>
       </div>
       {publicKey ? (

packages/app/src/icons.svg

@@ -392,5 +392,8 @@
     <symbol id="home" fill="currentColor" viewBox="0 0 495.398 495.398">
       <g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <g> <g> <g> <path d="M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391 v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158 c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747 c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z"></path> <path d="M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401 c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79 c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z"></path> </g> </g> </g> </g>
     </symbol>
+    <symbol id="sign-in" viewBox="0 0 24 24" fill="none">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C6.44772 3 6 3.44772 6 4C6 4.55228 6.44772 5 7 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H7C6.44772 19 6 19.4477 6 20C6 20.5523 6.44772 21 7 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H7ZM12.7071 7.29289C12.3166 6.90237 11.6834 6.90237 11.2929 7.29289C10.9024 7.68342 10.9024 8.31658 11.2929 8.70711L13.5858 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H13.5858L11.2929 15.2929C10.9024 15.6834 10.9024 16.3166 11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L16.7071 12.7071C17.0976 12.3166 17.0976 11.6834 16.7071 11.2929L12.7071 7.29289Z" fill="currentColor"/>
+    </symbol>
   </defs>
 </svg>