Packages
phoenix_kit
1.7.21
1.7.209
1.7.208
1.7.207
1.7.206
1.7.205
1.7.204
1.7.203
1.7.202
1.7.201
1.7.200
1.7.199
1.7.198
1.7.197
1.7.196
1.7.194
1.7.193
1.7.192
1.7.191
1.7.190
1.7.189
1.7.187
1.7.186
1.7.185
1.7.184
1.7.183
1.7.182
1.7.181
1.7.180
1.7.179
1.7.178
1.7.177
1.7.176
1.7.175
1.7.174
1.7.173
1.7.172
1.7.171
1.7.170
1.7.169
1.7.168
1.7.167
1.7.166
1.7.165
1.7.164
1.7.162
1.7.161
1.7.160
1.7.159
1.7.157
1.7.156
1.7.155
1.7.154
1.7.153
1.7.152
1.7.151
1.7.150
1.7.149
1.7.146
1.7.145
1.7.144
1.7.143
1.7.138
1.7.133
1.7.132
1.7.131
1.7.130
1.7.128
1.7.126
1.7.125
1.7.121
1.7.120
1.7.119
1.7.118
1.7.117
1.7.116
1.7.115
1.7.114
1.7.113
1.7.112
1.7.111
1.7.110
1.7.109
1.7.108
1.7.107
1.7.106
1.7.105
1.7.104
1.7.103
1.7.102
1.7.101
1.7.100
1.7.99
1.7.98
1.7.97
1.7.96
1.7.95
1.7.94
1.7.93
1.7.92
1.7.91
1.7.90
1.7.89
1.7.88
1.7.87
1.7.86
1.7.85
1.7.84
1.7.83
1.7.82
1.7.81
1.7.80
1.7.79
1.7.78
1.7.77
1.7.76
1.7.75
1.7.74
1.7.71
1.7.70
1.7.69
1.7.66
1.7.65
1.7.64
1.7.63
1.7.62
1.7.61
1.7.59
1.7.58
1.7.57
1.7.56
1.7.55
1.7.54
1.7.53
1.7.52
1.7.51
1.7.49
1.7.44
1.7.43
1.7.42
1.7.41
1.7.39
1.7.38
1.7.37
1.7.36
1.7.34
1.7.33
1.7.31
1.7.30
1.7.29
1.7.28
1.7.27
1.7.26
1.7.25
1.7.24
1.7.23
1.7.22
1.7.21
1.7.20
1.7.19
1.7.18
1.7.17
1.7.16
1.7.15
1.7.14
1.7.13
1.7.12
1.7.11
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
1.7.0
1.6.20
1.6.19
1.6.18
1.6.17
1.6.16
1.6.15
1.6.14
1.6.13
1.6.12
1.6.11
1.6.10
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.2
1.3.1
1.3.0
1.2.10
1.2.9
1.2.8
1.2.7
1.2.5
1.2.4
1.2.2
1.2.1
1.2.0
1.1.0
1.0.0
A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more
Current section
Files
Jump to
Current section
Files
lib/phoenix_kit_web/components/layouts/dashboard.html.heex
<%!--
PhoenixKit User Dashboard Layout
This layout is specifically designed for authenticated user dashboard pages.
It provides a clean interface for regular users to view their profile and activities.
Note: This layout does NOT use LayoutWrapper.app_layout as that's for admin pages only.
--%>
<% project_title = assigns[:project_title] || PhoenixKit.Config.get(:project_title, "PhoenixKit") %> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} />
<meta name="phoenix-kit-prefix" content={PhoenixKit.Utils.Routes.url_prefix()} />
<.live_title default={"#{project_title} Dashboard"}>
{assigns[:page_title] || "Dashboard"}
</.live_title>
<link phx-track-static rel="stylesheet" href="/assets/css/app.css" />
</head>
<body class="bg-base-100 antialiased">
<div class="min-h-screen bg-base-100">
<%!-- User Dashboard Header (matching admin style) --%>
<header class="bg-base-100 shadow-sm border-b border-base-300 fixed top-0 left-0 right-0 z-50">
<div class="flex items-center justify-between h-16 px-4">
<%!-- Left: Logo and Title --%>
<div class="flex items-center gap-3">
<!-- Logo and Title Link to Main Page -->
<.link
navigate="/"
class="flex items-center gap-3 hover:opacity-80 transition-opacity"
>
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<.icon name="hero-home" class="w-5 h-5 text-primary-content" />
</div>
<!-- Title -->
<span class="font-bold text-base-content">
{gettext("%{project_title} Dashboard", project_title: project_title)}
</span>
</.link>
</div>
<!-- Right: User Dropdown -->
<div class="flex items-center gap-3">
<!-- User Dropdown -->
<PhoenixKitWeb.Components.UserDashboardNav.user_dropdown
scope={assigns[:phoenix_kit_current_scope]}
current_path={assigns[:url_path] || "/dashboard"}
current_locale={assigns[:current_locale]}
/>
</div>
</div>
</header>
<!-- Main Content Area with top padding for fixed header -->
<div class="pt-16">
<div class="flex">
<!-- Left Sidebar Navigation -->
<aside class="w-64 min-h-screen bg-base-100 border-r border-base-300 hidden lg:block">
<div class="p-4">
<nav class="space-y-2">
<!-- Dashboard Link -->
<%= if String.ends_with?(assigns[:url_path] || "/dashboard", "/dashboard") do %>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/dashboard",
locale: assigns[:current_locale_base]
)
}
class="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors bg-primary text-primary-content"
>
<.icon name="hero-home" class="w-5 h-5 mr-3" /> {gettext("Dashboard")}
</.link>
<% else %>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/dashboard",
locale: assigns[:current_locale_base]
)
}
class="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors text-base-content hover:bg-base-200"
>
<.icon name="hero-home" class="w-5 h-5 mr-3" /> {gettext("Dashboard")}
</.link>
<% end %>
<%!-- Settings Link --%>
<%= if String.contains?(assigns[:url_path] || "", "/dashboard/settings") do %>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/dashboard/settings",
locale: assigns[:current_locale_base]
)
}
class="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors bg-primary text-primary-content"
>
<.icon name="hero-cog-6-tooth" class="w-5 h-5 mr-3" /> {gettext("Settings")}
</.link>
<% else %>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/dashboard/settings",
locale: assigns[:current_locale_base]
)
}
class="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors text-base-content hover:bg-base-200"
>
<.icon name="hero-cog-6-tooth" class="w-5 h-5 mr-3" /> {gettext("Settings")}
</.link>
<% end %>
<%!-- My Tickets Link --%>
<%= if PhoenixKit.Modules.Tickets.enabled?() do %>
<%= if String.contains?(assigns[:url_path] || "", "/dashboard/tickets") do %>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/dashboard/tickets",
locale: assigns[:current_locale_base]
)
}
class="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors bg-primary text-primary-content"
>
<.icon name="hero-ticket" class="w-5 h-5 mr-3" /> {gettext("My Tickets")}
</.link>
<% else %>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/dashboard/tickets",
locale: assigns[:current_locale_base]
)
}
class="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors text-base-content hover:bg-base-200"
>
<.icon name="hero-ticket" class="w-5 h-5 mr-3" /> {gettext("My Tickets")}
</.link>
<% end %>
<% end %>
</nav>
</div>
</aside>
<!-- Mobile Menu Button -->
<div class="lg:hidden fixed bottom-4 right-4 z-50">
<div class="dropdown dropdown-top dropdown-end">
<label tabindex="0" class="btn btn-primary btn-circle">
<.icon name="hero-bars-3" class="w-5 h-5" />
</label>
<ul
tabindex="0"
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
>
<li>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/dashboard",
locale: assigns[:current_locale_base]
)
}
class="flex items-center gap-2"
>
<.icon name="hero-home" class="w-4 h-4" /> {gettext("Dashboard")}
</.link>
</li>
<li>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/dashboard/settings",
locale: assigns[:current_locale_base]
)
}
class="flex items-center gap-2"
>
<.icon name="hero-cog-6-tooth" class="w-4 h-4" /> {gettext("Settings")}
</.link>
</li>
<%= if PhoenixKit.Modules.Tickets.enabled?() do %>
<li>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/dashboard/tickets",
locale: assigns[:current_locale_base]
)
}
class="flex items-center gap-2"
>
<.icon name="hero-ticket" class="w-4 h-4" /> {gettext("My Tickets")}
</.link>
</li>
<% end %>
</ul>
</div>
</div>
<!-- Main Content -->
<main class="flex-1 px-4 py-8">
<div class="max-w-6xl mx-auto">
{render_slot(@inner_block)}
</div>
</main>
</div>
</div>
</div>
</body>
</html>