🧭 Add navigation sidebar and 📏 enforce minimum window dimensions

- Add sidebar component to enhance site navigation and improve user experience
- Implement window size constraints (min 1366x768) to ensure proper display across devices

src/routes/Home.ts

@@ -193,7 +193,7 @@ export class Home extends LitElement {
         <arx-card class="home-container">
           <arx-card class="welcome-section">
             <arx-nostr-avatar
-              .profile=${this.profile}
+              .profile=${this.profile as NDKUserProfile}
               size="huge"
             ></arx-nostr-avatar>
             <div class="welcome-text">

src/routes/Settings.ts

@@ -1,5 +1,5 @@
-import defaultAvatar from '@/default-avatar.png';
 import { getSigner, getUserProfile, ndk } from '@/ndk';
+import defaultAvatar from '@assets/default-avatar.png';
 import type { ArxInputChangeEvent } from '@components/General/Input';
 import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit';

src/routes/router.ts

@@ -1,4 +1,5 @@
 import '@components/InitialSetup';
+import '@components/Sidebar';
 import '@routes/404Page';
 import '@routes/Arbor/Home';
 import '@routes/Arbor/NewPost';
@@ -10,6 +11,8 @@ import '@routes/Profile';
 import '@routes/Settings';
 import '@routes/Wallet';
 
+import { getNpub, getUserProfile } from '@/ndk';
+import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
 import { spread } from '@open-wc/lit-helpers';
 import { LitElement, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -103,11 +106,22 @@ export default class EveRouter extends LitElement {
   private beforeEachGuards: ((to: Route, from: Route | null) => boolean)[] = [];
   private afterEachHooks: ((to: Route, from: Route | null) => void)[] = [];
 
+  @state()
+  private userProfile: NDKUserProfile | undefined = undefined;
+
+  @state()
+  private userNpub = '';
+
   static override styles = css`
     :host {
-      height: 100vh;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
       display: grid;
       grid-template-rows: auto 1fr;
+      grid-template-columns: 100px 1fr;
       overflow: hidden;
     }
 
@@ -131,9 +145,34 @@ export default class EveRouter extends LitElement {
     ::-webkit-scrollbar-thumb:hover {
       background: var(--color-neutral);
     }
-
+    
     .window {
       overflow: auto;
+      grid-column: 2;
+      grid-row: 2;
+      position: relative;
+    }
+    
+    .window::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 10px;
+      height: 100%;
+      opacity: 0;
+      pointer-events: none;
+      background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.03));
+      transition: opacity 0.3s ease;
+    }
+    
+    .window:hover::after {
+      opacity: 1;
+    }
+
+    arx-sidebar {
+      grid-column: 1;
+      grid-row: 1 / span 2;
     }
 
     .window-content {
@@ -174,6 +213,11 @@ export default class EveRouter extends LitElement {
     .hide-overflow {
       overflow: hidden;
     }
+
+    arx-header {
+      grid-column: 2;
+      grid-row: 1;
+    }
   `;
 
   constructor() {
@@ -186,6 +230,9 @@ export default class EveRouter extends LitElement {
   override connectedCallback(): void {
     super.connectedCallback();
     this.setupEventListeners();
+    if (this.ccnSetup) {
+      this.loadUserProfile();
+    }
   }
 
   override disconnectedCallback(): void {
@@ -337,7 +384,7 @@ export default class EveRouter extends LitElement {
 
   renderSetup() {
     return html`
-      <div class="window">
+      <div class="window" style="grid-column: 1 / span 2;">
         <div class="window-content">
           <arx-initial-setup
             @finish=${() => this.finishSetup()}
@@ -347,9 +394,25 @@ export default class EveRouter extends LitElement {
     `;
   }
 
+  async loadUserProfile() {
+    try {
+      this.userNpub = await getNpub();
+      this.userProfile = await getUserProfile();
+    } catch (error) {
+      console.error('Failed to load user profile:', error);
+    }
+  }
+
   override render() {
     if (!this.ccnSetup) return this.renderSetup();
+
     return html`
+      <arx-sidebar 
+        .currentPath=${this.currentPath}
+        .userNpub=${this.userNpub}
+        .userProfile=${this.userProfile}
+        @navigate=${(e: CustomEvent) => this.navigate(e.detail)}
+      ></arx-sidebar>
       <arx-header
         ?canGoBack=${this.currentIndex > 0}
         ?canGoForward=${this.currentIndex < this.history.length - 1}