Init SnortDeck

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

@@ -0,0 +1,42 @@
+import { useUserProfile } from "@snort/system-react";
+import Avatar from "Element/Avatar";
+import useLogin from "Hooks/useLogin";
+import "./Nav.css";
+import Icon from "Icons/Icon";
+import { Link } from "react-router-dom";
+import { profileLink } from "SnortUtils";
+
+export function DeckNav() {
+    const { publicKey } = useLogin();
+    const profile = useUserProfile(publicKey);
+
+    const unreadDms = 0;
+    const hasNotifications = false;
+
+    return <nav className="deck flex-column f-space">
+        <div className="flex-column f-center g24">
+            <Link className="btn" to="/messages">
+                <Icon name="mail" size={24} />
+                {unreadDms > 0 && <span className="has-unread"></span>}
+            </Link>
+            <Link className="btn" to="/notifications">
+                <Icon name="bell-02" size={24} />
+                {hasNotifications && <span className="has-unread"></span>}
+            </Link>
+        </div>
+        <div className="flex-column f-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>
+            <Link to={profileLink(publicKey ?? "")}>
+                <Avatar
+                    pubkey={publicKey ?? ""}
+                    user={profile}
+                />
+            </Link>
+        </div>
+    </nav>
+}