<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Operator Dashboard | Container Depot</title>
    <script src="https://cdn.tailwindcss.com"></script>

<style>
.sidebar {
	width: 220px;
}
.section-title {
    padding: 8px 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #93c5fd; /* light blue */
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    text-decoration: none;
    color: white;
    background-color: #1f2937; /* dark bg for example */
    transition: background-color 0.2s ease;
}

.nav-item:hover {
    background-color: #374151;
}

.nav-item.active {
    background-color: #2563eb; /* active item bg */
}

.nav-item .icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    stroke: currentColor;
}
</style>
</head>
<body> 
	<div class="sidebar">
		<div class="section-title">Main</div>
		<a href="dashboard.html" class="nav-item active">
			<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
					  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 
						 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
			</svg>
			Dashboard
		</a>
		<a href="dashboard.html" class="nav-item active">
			 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
			Container Preinfo
		</a>
		<a href="dashboard.html" class="nav-item active">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                </svg>
			Bookings
		</a>
	</div>
</body>