feat(frontend,backend): simple navigation bar added

templates/base.html

@@ -3,20 +3,47 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Disk Checker</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
-          rel="stylesheet">
+    <title>Disk Checker - {% block title %}Home{% endblock %}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
     <script src="https://unpkg.com/htmx.org@1.9.10"></script>
     <link rel="stylesheet" href="/static/css/style.css">
+    {% block extra_css %}{% endblock %}
 </head>
 <body>
+    <!-- Navigation Bar -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <div class="container">
-            <a class="navbar-brand" href="/">Disk Checker</a>
+            <!-- Logo / Brand -->
+            <a class="navbar-brand" href="/">
+                <i class="bi bi-hdd-stack"></i>
+                Disk Checker
+            </a>
+            
+            <!-- Mobile toggle -->
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            <!-- Navigation Tabs -->
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    {% for nav_item in navigation %}
+                    <li class="nav-item">
+                        <a class="nav-link {% if active_tab == nav_item.name %}active{% endif %}" 
+                           href="{{ nav_item.url }}">
+                            <i class="bi {{ nav_item.icon }}"></i>
+                            {{ nav_item.label }}
+                        </a>
+                    </li>
+                    {% endfor %}
+                </ul>
+            </div>
         </div>
     </nav>
    
-    <div class="container">
+    <!-- Page Content -->
+    <div class="container mt-4">
         {% block content %}{% endblock %}
     </div>