🎨 Fix Logo Centering & Navbar Layout

puikinsh · puikinsh · commit aa1e0fce5668 · 2025-06-24T13:25:21.000+03:00
✅ Logo Improvements:
- Centered 'M' icon properly in the circular background
- Removed all text (Modern, Admin) - now just clean M icon
- Fixed SVG coordinates for perfect center alignment
- Optimized for 32x32 size with better proportions

🔄 Navbar Layout Changes:
- Moved logo to far left (better UX pattern)
- Positioned hamburger menu after logo
- Removed redundant text from brand
- Applied consistent layout to both index and forms pages
- Fixed forms page navbar styling to match main design

🎯 User Experience:
- Logo now follows standard web convention (top-left)
- Cleaner, more professional appearance
- Better visual hierarchy and navigation flow
- Consistent branding across all pages
diff --git a/src-modern/assets/images/logo.svg b/src-modern/assets/images/logo.svg
@@ -1,19 +1,9 @@
-<svg width="120" height="32" viewBox="0 0 120 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <!-- Background circle for the M -->
-  <circle cx="16" cy="16" r="15" fill="url(#logoGradient)" stroke="#ffffff" stroke-width="2"/>
+  <circle cx="16" cy="16" r="16" fill="url(#logoGradient)"/>
   
-  <!-- Letter M -->
-  <path d="M8 24V8h3.5l2.5 8.5L16.5 8H20v16h-2.5V12.5L15 21h-1L11.5 12.5V24H8z" fill="white" font-weight="600"/>
-  
-  <!-- Text "Modern" -->
-  <text x="40" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="currentColor">
-    Modern
-  </text>
-  
-  <!-- Subtle "Admin" text -->
-  <text x="40" y="11" font-family="system-ui, -apple-system, sans-serif" font-size="9" font-weight="500" fill="currentColor" opacity="0.7">
-    ADMIN
-  </text>
+  <!-- Centered Letter M -->
+  <path d="M10 24V8h2.5l2.5 6.5L17.5 8H20v16h-2V12.5L16.5 20h-1L14 12.5V24H10z" fill="white" font-weight="700"/>
   
   <!-- Gradient definition -->
   <defs>
diff --git a/src-modern/forms.html b/src-modern/forms.html
@@ -21,12 +21,20 @@
 </head>
 <body data-page="forms">
     <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom fixed-top">
         <div class="container-fluid">
-            <a class="navbar-brand" href="/index.html">
+            <!-- Logo/Brand - First on the left -->
+            <a class="navbar-brand me-3" href="/index.html">
                 <img src="/assets/images/logo.svg" alt="Logo" height="32" class="d-inline-block align-text-top">
-                <span class="fw-bold text-primary ms-2">Modern Admin</span>
             </a>
+            
+            <!-- Sidebar Toggle Button -->
+            <button class="btn btn-outline-secondary me-3" 
+                    type="button" 
+                    data-sidebar-toggle
+                    aria-label="Toggle sidebar">
+                <i class="bi bi-list"></i>
+            </button>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
diff --git a/src-modern/index.html b/src-modern/index.html
@@ -51,20 +51,19 @@
         <header class="admin-header">
             <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
                 <div class="container-fluid">
-                    <!-- Sidebar Toggle -->
+                    <!-- Logo/Brand - Now first on the left -->
+                    <a class="navbar-brand me-3" href="/">
+                        <img src="/assets/images/logo.svg" alt="Logo" height="32" class="d-inline-block align-text-top">
+                    </a>
+
+                    <!-- Sidebar Toggle - Now after logo -->
                     <button class="btn btn-outline-secondary me-3" 
                             type="button" 
                             data-sidebar-toggle
                             aria-label="Toggle sidebar">
                         <i class="bi bi-list"></i>
                     </button>
 
-                    <!-- Logo/Brand -->
-                    <a class="navbar-brand" href="/">
-                        <img src="/assets/images/logo.svg" alt="Logo" height="32" class="d-inline-block align-text-top">
-                        <span class="fw-bold text-primary">Modern Admin</span>
-                    </a>
-
                     <!-- Search Bar with Alpine.js -->
                     <div class="search-container flex-grow-1 mx-4" x-data="searchComponent">
                         <div class="position-relative">
