frontend update

src/lib/components/Navbar.svelte

@@ -0,0 +1,141 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<nav class="navbar">
+	<div class="navbar-content">
+		<div class="navbar-brand">
+			<span class="brand-text">YTP</span>
+			<img src="/logo.png" alt="YTP Logo" class="brand-logo" />
+		</div>
+
+		<div class="navbar-menu">
+			<a href="/" class="nav-link {$page.url.pathname === '/' ? 'active' : ''}">
+				Ana Sayfa
+			</a>
+			<a href="/dashboard" class="nav-link {$page.url.pathname.startsWith('/dashboard') ? 'active' : ''}">
+				Dashboard
+			</a>
+			<a href="/goods-manager" class="nav-link {$page.url.pathname === '/goods-manager' ? 'active' : ''}">
+				Mal Yönetimi
+			</a>
+			<a href="/fuel-slips" class="nav-link {$page.url.pathname === '/fuel-slips' ? 'active' : ''}">
+				Yakıt Fişleri
+			</a>
+		</div>
+	</div>
+</nav>
+
+<style>
+	.navbar {
+		background-color: #2c3e50;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		position: sticky;
+		top: 0;
+		z-index: 1000;
+		width: 100%;
+	}
+
+	.navbar-content {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 0 20px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 70px;
+	}
+
+	.navbar-brand {
+		display: flex;
+		align-items: center;
+		gap: 15px;
+	}
+
+	.brand-text {
+		font-size: 24px;
+		font-weight: bold;
+		color: #ffffff;
+		text-decoration: none;
+	}
+
+	.brand-logo {
+		height: 40px;
+		width: auto;
+		object-fit: contain;
+	}
+
+	.navbar-menu {
+		display: flex;
+		align-items: center;
+		gap: 30px;
+	}
+
+	.nav-link {
+		color: #ecf0f1;
+		text-decoration: none;
+		font-weight: 500;
+		padding: 8px 16px;
+		border-radius: 6px;
+		transition: all 0.3s ease;
+	}
+
+	.nav-link:hover {
+		background-color: #34495e;
+		color: #ffffff;
+	}
+
+	.nav-link.active {
+		background-color: #3498db;
+		color: #ffffff;
+	}
+
+	@media (max-width: 768px) {
+		.navbar-content {
+			padding: 0 15px;
+			height: 60px;
+		}
+
+		.navbar-brand {
+			gap: 10px;
+		}
+
+		.brand-text {
+			font-size: 20px;
+		}
+
+		.brand-logo {
+			height: 30px;
+		}
+
+		.navbar-menu {
+			gap: 15px;
+		}
+
+		.nav-link {
+			padding: 6px 12px;
+			font-size: 14px;
+		}
+	}
+
+	@media (max-width: 480px) {
+		.navbar-content {
+			flex-direction: column;
+			height: auto;
+			padding: 10px 15px;
+		}
+
+		.navbar-brand {
+			margin-bottom: 10px;
+		}
+
+		.navbar-menu {
+			gap: 10px;
+		}
+
+		.nav-link {
+			padding: 4px 8px;
+			font-size: 12px;
+		}
+	}
+</style>

src/routes/+layout.svelte

@@ -2,6 +2,32 @@
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
+	import Navbar from '$lib/components/Navbar.svelte';
+	import { browser } from '$app/environment';
+
+	let isAuthenticated = false;
+	let isLoginPage = false;
+
+	// Authentication state'ini kontrol et
+	function checkAuth() {
+		if (browser) {
+			const user = localStorage.getItem('user');
+			isAuthenticated = !!user;
+			isLoginPage = $page.url.pathname === '/';
+		}
+	}
+
+	// Page değiştiğinde ve component mount olduğında kontrol et
+	onMount(() => {
+		checkAuth();
+	});
+
+	$: {
+		checkAuth();
+	}
+
+	// Navbar'ı gösterme kararı
+	$: shouldShowNavbar = isAuthenticated && !isLoginPage;
 </script>
 
 <svelte:head>
@@ -9,7 +35,11 @@
 	<meta name="description" content="Akaryakıt İstasyonu Yönetim Sistemi" />
 </svelte:head>
 
-<main>
+{#if shouldShowNavbar}
+	<Navbar />
+{/if}
+
+<main class:navbar-visible={shouldShowNavbar}>
 	<slot />
 </main>
 
@@ -17,5 +47,23 @@
 	main {
 		min-height: 100vh;
 		width: 100%;
+		padding-top: 0;
+	}
+
+	main.navbar-visible {
+		min-height: calc(100vh - 70px);
+		padding-top: 0;
+	}
+
+	@media (max-width: 768px) {
+		main.navbar-visible {
+			min-height: calc(100vh - 60px);
+		}
+	}
+
+	@media (max-width: 480px) {
+		main.navbar-visible {
+			min-height: calc(100vh - 70px);
+		}
 	}
 </style>