| 1 |
:-( |
defmodule DaProductAppWeb.NavbarComponent do |
| 2 |
|
@moduledoc """ |
| 3 |
|
Navbar function component for top navigation bar |
| 4 |
|
""" |
| 5 |
|
use DaProductAppWeb, :html |
| 6 |
|
|
| 7 |
|
attr :current_user, :map, required: true |
| 8 |
|
attr :page_title, :string, default: "Dashboard" |
| 9 |
|
|
| 10 |
|
def navbar(assigns) do |
| 11 |
:-( |
~H""" |
| 12 |
|
<div class="navbar bg-base-100 border-b border-base-300 shadow-sm"> |
| 13 |
|
<!-- Mobile menu button --> |
| 14 |
|
<div class="navbar-start"> |
| 15 |
|
<label for="main-drawer" class="btn btn-square btn-ghost lg:hidden"> |
| 16 |
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 17 |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
| 18 |
|
</svg> |
| 19 |
|
</label> |
| 20 |
|
|
| 21 |
|
<!-- Page Title --> |
| 22 |
|
<div class="hidden lg:flex"> |
| 23 |
|
<h1 class="text-xl font-semibold text-base-content"> |
| 24 |
:-( |
<%= @page_title %> |
| 25 |
|
</h1> |
| 26 |
|
</div> |
| 27 |
|
</div> |
| 28 |
|
|
| 29 |
|
<!-- Center Search (optional) --> |
| 30 |
|
<div class="navbar-center hidden lg:flex"> |
| 31 |
|
<div class="form-control"> |
| 32 |
|
<input |
| 33 |
|
type="text" |
| 34 |
|
placeholder="Search..." |
| 35 |
|
class="input input-bordered input-sm w-80" |
| 36 |
|
/> |
| 37 |
|
</div> |
| 38 |
|
</div> |
| 39 |
|
|
| 40 |
|
<!-- Right side actions --> |
| 41 |
|
<div class="navbar-end gap-2"> |
| 42 |
|
<!-- Theme Toggle --> |
| 43 |
|
<div class="dropdown dropdown-end"> |
| 44 |
|
<label tabindex="0" class="btn btn-ghost btn-circle"> |
| 45 |
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 46 |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> |
| 47 |
|
</svg> |
| 48 |
|
</label> |
| 49 |
|
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-lg bg-base-100 rounded-box w-40 border border-base-300"> |
| 50 |
|
<li><button type="button" onclick="setTheme('light')" class="theme-option gap-2"> |
| 51 |
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> |
| 52 |
|
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path> |
| 53 |
|
</svg> |
| 54 |
|
Light |
| 55 |
|
</button></li> |
| 56 |
|
<li><button type="button" onclick="setTheme('dark')" class="theme-option gap-2"> |
| 57 |
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> |
| 58 |
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> |
| 59 |
|
</svg> |
| 60 |
|
Dark |
| 61 |
|
</button></li> |
| 62 |
|
<li><button type="button" onclick="setTheme('corporate')" class="theme-option gap-2"> |
| 63 |
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> |
| 64 |
|
<path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4zM3 15a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1zm7-11a1 1 0 000 2h5a1 1 0 000-2h-5z" clip-rule="evenodd"></path> |
| 65 |
|
</svg> |
| 66 |
|
Corporate |
| 67 |
|
</button></li> |
| 68 |
|
</ul> |
| 69 |
|
</div> |
| 70 |
|
|
| 71 |
|
<!-- Notifications --> |
| 72 |
|
<button class="btn btn-ghost btn-circle"> |
| 73 |
|
<div class="indicator"> |
| 74 |
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 75 |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path> |
| 76 |
|
</svg> |
| 77 |
|
<span class="badge badge-xs badge-primary indicator-item"></span> |
| 78 |
|
</div> |
| 79 |
|
</button> |
| 80 |
|
|
| 81 |
|
<!-- User Menu --> |
| 82 |
|
<div class="dropdown dropdown-end"> |
| 83 |
|
<label tabindex="0" class="btn btn-ghost btn-circle avatar"> |
| 84 |
|
<div class="w-10 rounded-full bg-primary/10 flex items-center justify-center"> |
| 85 |
|
<span class="text-sm font-medium text-primary"> |
| 86 |
:-( |
<%= String.first(@current_user.name || "U") %> |
| 87 |
|
</span> |
| 88 |
|
</div> |
| 89 |
|
</label> |
| 90 |
|
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-lg bg-base-100 rounded-box w-52 border border-base-300"> |
| 91 |
|
<li class="menu-title"> |
| 92 |
:-( |
<span><%= @current_user.name || "User" %></span> |
| 93 |
:-( |
<span class="text-xs opacity-60"><%= @current_user.email %></span> |
| 94 |
|
</li> |
| 95 |
|
<li><a> |
| 96 |
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 97 |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> |
| 98 |
|
</svg> |
| 99 |
|
Profile |
| 100 |
|
</a></li> |
| 101 |
|
<li><a> |
| 102 |
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 103 |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> |
| 104 |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> |
| 105 |
|
</svg> |
| 106 |
|
Settings |
| 107 |
|
</a></li> |
| 108 |
|
<div class="divider my-0"></div> |
| 109 |
:-( |
<li><a href={~p"/logout"} data-method="delete"> |
| 110 |
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 111 |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path> |
| 112 |
|
</svg> |
| 113 |
|
Logout |
| 114 |
|
</a></li> |
| 115 |
|
</ul> |
| 116 |
|
</div> |
| 117 |
|
</div> |
| 118 |
|
</div> |
| 119 |
|
""" |
| 120 |
|
end |
| 121 |
|
end |