refactor(App): update layout and styling for vertical sidebar navigation and page header, enhancing user experience and accessibility

frontend/src/App.css

@@ -1,5 +1,44 @@
 /* Custom styles for S3 Lists Manager */
-/* Most styles are now provided by @tabler/core */
+/* Layout: Tabler Fluid Vertical (https://preview.tabler.io/layout-fluid-vertical.html) */
+
+/* --- Fluid Vertical: page structure --- */
+.page {
+  min-height: 100vh;
+}
+
+/* Sidebar: nav-link with icon (Tabler vertical) */
+.navbar-vertical .nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.navbar-vertical .nav-link-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+.navbar-vertical .nav-link-icon .icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+/* Sidebar dropdown: inline submenu (no popup) */
+.navbar-vertical .nav-item.dropdown .dropdown-menu {
+  position: static;
+  float: none;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  padding: 0 0 0.5rem 0;
+  margin: 0;
+}
+.navbar-vertical .nav-item.dropdown .dropdown-item {
+  padding-left: calc(0.5rem + 1.25rem + 0.5rem);
+  padding-top: 0.35rem;
+  padding-bottom: 0.35rem;
+}
 
 /* Custom avatar background */
 .avatar {