PLEDIPO/msme-manager-pro
0
1class CustomNavbar extends HTMLElement {2 connectedCallback() {3 this.attachShadow({ mode: 'open' });4 this.shadowRoot.innerHTML = `5 <style>6 nav {7 background-color: #1e40af;8 color: white;9 padding: 1rem 2rem;10 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);11 }12 13 .container {14 display: flex;15 justify-content: space-between;16 align-items: center;17 max-width: 1200px;18 margin: 0 auto;19 }20 21 .logo {22 display: flex;23 align-items: center;24 font-weight: bold;25 font-size: 1.25rem;26 }27 28 .logo svg {29 margin-right: 0.5rem;30 }31 32 .nav-links {33 display: flex;34 align-items: center;35 }36 37 .nav-link {38 margin-left: 1.5rem;39 color: white;40 text-decoration: none;41 font-weight: 500;42 display: flex;43 align-items: center;44 transition: opacity 0.2s;45 }46 47 .nav-link:hover {48 opacity: 0.8;49 }50 51 .nav-link svg {52 margin-right: 0.25rem;53 }54 55 @media (max-width: 768px) {56 nav {57 padding: 0.75rem 1rem;58 }59 60 .container {61 flex-direction: column;62 align-items: flex-start;63 }64 65 .nav-links {66 margin-top: 1rem;67 width: 100%;68 justify-content: space-between;69 }70 71 .nav-link {72 margin-left: 0;73 font-size: 0.875rem;74 }75 }76 </style>77 78 <nav>79 <div class="container">80 <div class="logo">81 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">82 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>83 <polyline points="9 22 9 12 15 12 15 22"></polyline>84 </svg>85 Aurora MSME Database86</div>87 <div class="nav-links">88 <a href="#" class="nav-link">89<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">90 <path d="M12 20h9"></path>91 <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>92 </svg>93 Settings94 </a>95 <a href="#" class="nav-link">96 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">97 <path d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9"></path>98 </svg>99 Logout100 </a>101 </div>102 </div>103 </nav>104 `;105 }106}107 108customElements.define('custom-navbar', CustomNavbar);