From 51f459c230ce93eba7c468baacf0646e7bf6449b Mon Sep 17 00:00:00 2001
From: houseassassin <houseassassin@gmail.com>
Date: Wed, 20 May 2026 12:19:14 +0300
Subject: [PATCH] feat: Navbar, Sidebar, Footer layout components

---
 src/components/layout/Footer.tsx  | 22 ++++++++++++++++
 src/components/layout/Navbar.tsx  | 44 +++++++++++++++++++++++++++++++
 src/components/layout/Sidebar.tsx | 32 ++++++++++++++++++++++
 3 files changed, 98 insertions(+)
 create mode 100644 src/components/layout/Footer.tsx
 create mode 100644 src/components/layout/Navbar.tsx
 create mode 100644 src/components/layout/Sidebar.tsx

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..d83b0df
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,22 @@
+import { Shield } from "lucide-react";
+
+export function Footer() {
+  return (
+    <footer className="border-t border-white/[0.08] mt-24 py-12">
+      <div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6">
+        <div className="flex items-center gap-2">
+          <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center">
+            <Shield size={14} />
+          </div>
+          <span className="font-semibold text-white/80">Aura Store</span>
+        </div>
+        <div className="flex gap-6 text-sm text-white/40">
+          <a href="https://t.me/cricket_vpn_bot" className="hover:text-white transition-colors">Telegram</a>
+          <a href="#faq" className="hover:text-white transition-colors">FAQ</a>
+          <a href="#pricing" className="hover:text-white transition-colors">Тарифы</a>
+        </div>
+        <span className="text-xs text-white/20">© 2026 Aura Store. Все права защищены.</span>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
new file mode 100644
index 0000000..c0604ed
--- /dev/null
+++ b/src/components/layout/Navbar.tsx
@@ -0,0 +1,44 @@
+import { Link, useNavigate } from "react-router-dom";
+import { Shield, LogOut, LayoutDashboard } from "lucide-react";
+import { useAuthStore } from "../../store/auth";
+import { Button } from "../ui/Button";
+
+export function Navbar() {
+  const { isLoggedIn, logout } = useAuthStore();
+  const navigate = useNavigate();
+  const loggedIn = isLoggedIn();
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-40 border-b border-white/[0.08] bg-[#0d0b1e]/80 backdrop-blur-md">
+      <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
+        <Link to="/" className="flex items-center gap-2 font-bold text-lg">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center">
+            <Shield size={16} />
+          </div>
+          <span className="bg-gradient-to-r from-purple-300 to-indigo-300 bg-clip-text text-transparent">
+            Aura Store
+          </span>
+        </Link>
+        <div className="flex items-center gap-3">
+          {loggedIn ? (
+            <>
+              <Link to="/dashboard">
+                <Button variant="secondary" className="flex items-center gap-2">
+                  <LayoutDashboard size={16} /> Кабинет
+                </Button>
+              </Link>
+              <Button variant="secondary" onClick={() => { logout(); navigate("/"); }}>
+                <LogOut size={16} />
+              </Button>
+            </>
+          ) : (
+            <>
+              <Link to="/login"><Button variant="secondary">Войти</Button></Link>
+              <Link to="/register"><Button>Подключиться</Button></Link>
+            </>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..d32a9c3
--- /dev/null
+++ b/src/components/layout/Sidebar.tsx
@@ -0,0 +1,32 @@
+import { NavLink } from "react-router-dom";
+import { LayoutDashboard, Key, Smartphone, CreditCard, Globe, User } from "lucide-react";
+
+const links = [
+  { to: "/dashboard", icon: LayoutDashboard, label: "Обзор" },
+  { to: "/dashboard/keys", icon: Key, label: "Мои ключи" },
+  { to: "/dashboard/devices", icon: Smartphone, label: "Устройства" },
+  { to: "/dashboard/payments", icon: CreditCard, label: "Платежи" },
+  { to: "/dashboard/servers", icon: Globe, label: "Серверы" },
+  { to: "/profile", icon: User, label: "Профиль" },
+];
+
+export function Sidebar() {
+  return (
+    <aside className="w-56 shrink-0 hidden md:flex flex-col gap-1 pt-4">
+      {links.map(({ to, icon: Icon, label }) => (
+        <NavLink
+          key={to}
+          to={to}
+          end={to === "/dashboard"}
+          className={({ isActive }) =>
+            `flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors
+             ${isActive ? "bg-accent/20 text-white" : "text-white/50 hover:text-white hover:bg-white/5"}`
+          }
+        >
+          <Icon size={18} />
+          {label}
+        </NavLink>
+      ))}
+    </aside>
+  );
+}