Add a Beag logout button to this SaaS application:

1. Find the appropriate location for a logout button based on the existing UI:
   - Header/navbar component (preferred)
   - App layout/shell component
   - Sidebar (if no header exists)
   - Position: top right or wherever fits the current design

2. Create the logout functionality that:
   - Clears these specific localStorage items:
     localStorage.removeItem("x_access_token");
     localStorage.removeItem("x_email");
     localStorage.removeItem("x_plan_id");
     localStorage.removeItem("x_start_date");
     localStorage.removeItem("x_end_date");
     localStorage.removeItem("x_status");
   - Then performs a hard page reload:
     window.location.reload();

3. Framework-specific implementation:
   - Static HTML: Add inline onclick or separate function
   - React: Create a LogoutButton component or add to existing header component
   - Next.js: Use a client component ('use client') for the logout button/header
   - Vue: Add method to existing header or create LogoutButton component
   - Nuxt: Ensure client-side only execution
   - Svelte/SvelteKit: Add to header with on:click handler
   - Angular: Add click handler method to header component

4. Hide the logout button on the login page:
   - React/Next.js: Conditionally render based on route (usePathname or useRouter)
   - Vue/Nuxt: Use v-if with route check
   - SvelteKit: Use $page.url.pathname check
   - Static HTML: Don't include it on login.html

5. Style the logout button to match the existing app theme and design.

6. Show me the created/modified files.