iron-cms 0.3.0 → 0.4.0

data/app/views/iron/entries/fields/_block.html.erb

@@ -11,8 +11,7 @@
     <%= builder.check_box :_destroy, class: "destroy hidden", data: { destroy: "" } %>
     <button
       type="button"
-      class="handle btn rounded-sm"
-      data-variant="plain"
+      class="handle button-ghost button-sm"
       data-sortable-list-target="handle"
     >
       <%= icon "grip-vertical" %>
@@ -28,7 +27,7 @@
           <%= block.definition.name %>
         </span>
         <div class="flex items-center gap-2">
-          <%= builder.label :_destroy, class: "btn", data: { variant: "plain", color: "destructive" } do %>
+          <%= builder.label :_destroy, class: "button-secondary button-sm" do %>
             <%= icon "trash" %>
           <% end %>
           <%= icon "chevron-down", class: "transition-transform group-open:rotate-180" %>
@@ -84,7 +83,7 @@
         <p class="text-red-400">Missing block definition!</p>
         <%= link_to "Edit field definition",
         edit_field_definition_path(block.definition),
-        class: "btn" %>
+        class: "button-primary" %>
       </div>
     <% end %>
   </fieldset>

data/app/views/iron/entries/fields/_block_list.html.erb

@@ -24,22 +24,31 @@
     <% end %>
   </div>
 
-  <ul class="flex gap-2 mt-4">
-    <% block_list.definition.supported_block_definitions.each do |block_definition| %>
-      <li>
-        <%= link_to "+ #{block_definition.name}",
-        new_block_path(
-          block_list_field_definition_id: block_list.definition.id,
-          block_definition_id: block_definition.id,
-          locale_id: block_list.locale.id,
-          form_field_name: builder.field_name(:blocks_attributes),
-        ),
-        data: {
-          turbo_stream: true,
-        },
-        class: "btn" %>
-      </li>
-    <% end %>
-  </ul>
+  <el-dropdown class="inline-block mt-4">
+    <button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-stone-900 shadow-xs inset-ring-1 inset-ring-stone-300 hover:bg-stone-50 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20">
+      Add Block
+      <%= icon "chevron-down", class: "-mr-1 size-5 text-stone-400 dark:text-stone-500" %>
+    </button>
+
+    <el-menu anchor="bottom start" popover class="w-56 origin-top-left rounded-md bg-white shadow-lg outline-1 outline-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-stone-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
+      <div class="py-1">
+        <% block_list.definition.supported_block_definitions.each do |block_definition| %>
+          <%= link_to new_block_path(
+            block_list_field_definition_id: block_list.definition.id,
+            block_definition_id: block_definition.id,
+            locale_id: block_list.locale.id,
+            form_field_name: builder.field_name(:blocks_attributes),
+          ),
+          data: {
+            turbo_stream: true,
+          },
+          class: "group/item flex items-center px-4 py-2 text-sm text-stone-700 focus:bg-sky-100 focus:text-stone-900 focus:outline-hidden dark:text-stone-300 dark:focus:bg-sky-500/20 dark:focus:text-white" do %>
+            <%= icon "plus", class: "mr-3 size-5 text-stone-400 group-focus/item:text-sky-600 dark:text-stone-500 dark:group-focus/item:text-sky-400" %>
+            <%= block_definition.name %>
+          <% end %>
+        <% end %>
+      </div>
+    </el-menu>
+  </el-dropdown>
 
 </fieldset>

data/app/views/iron/entries/fields/_reference_item.html.erb

@@ -7,8 +7,7 @@
   <%= builder.check_box :_destroy, class: "destroy hidden", data: { destroy: "" } %>
   <button
     type="button"
-    class="handle btn"
-    data-variant="plain"
+    class="handle button-ghost button-sm"
     data-sortable-list-target="handle"
   >
     <%= icon "grip-vertical" %>
@@ -20,7 +19,7 @@
     <p><%= reference.entry.title %></p>
 
     <div class="">
-      <%= builder.label :_destroy, class: "btn", data: { variant: "plain", color: "destructive" } do %>
+      <%= builder.label :_destroy, class: "button-secondary button-sm" do %>
         <%= icon "trash" %>
       <% end %>
     </div>

data/app/views/iron/entries/fields/_text_field.html.erb

@@ -15,7 +15,7 @@
   <% if field.definition.allowed_values.present? %>
     <%= builder.select :value_string,
                    field.definition.allowed_values,
-                   { include_blank: true },
+                   { include_blank: "Select #{field.definition.name}" },
                    { class: "select" } %>
   <% else %>
     <%= builder.text_field :value_string %>

data/app/views/iron/entries/index.html.erb

@@ -6,7 +6,7 @@
       entries</h1>
     <%= link_to "New #{@content_type.name}",
     new_content_type_entry_path,
-    class: "btn" %>
+    class: "button-primary" %>
   </div>
 
   <div

data/app/views/iron/field_definitions/_field_definition.html.erb

@@ -9,8 +9,7 @@
     <%= form.hidden_field :rank, data: { sortable_list_target: "rank" } %>
 
     <button
-      class="absolute left-2 top-1/2 -translate-y-1/2"
-      data-variant="plain"
+      class="absolute left-2 top-1/2 -translate-y-1/2 button-ghost"
       data-sortable-list-target="handle"
     >
       <%= icon "grip-vertical", class: "text-stone-400" %>

data/app/views/iron/field_definitions/edit.html.erb

@@ -6,11 +6,5 @@
 
   <%= render "iron/field_definitions/#{@field_definition.type_handle}/form",
   field_definition: @field_definition %>
-  <%= button_to "Destroy",
-  field_definition_path(@field_definition),
-  method: :delete,
-  class: "btn mt-2",
-  data: {
-    color: "destructive",
-  } %>
+  <%= button_to "Destroy", field_definition_path(@field_definition), method: :delete, class: "button-destructive mt-2" %>
 </div>

data/app/views/iron/field_definitions/layouts/_form.html.erb

@@ -41,7 +41,7 @@
     <%= yield form %>
 
     <div class="pt-2">
-      <%= form.submit form.object.persisted? ? "Update" : "Create" %>
+      <%= form.submit form.object.persisted? ? "Update" : "Create", class: "button-primary" %>
     </div>
   </div>
 <% end %>

data/app/views/iron/first_runs/show.html.erb

@@ -39,6 +39,6 @@
       <%= form.password_field :password_confirmation, required: true, autocomplete: "new-password" %>
     </div>
 
-    <%= form.submit "Create account" %>
+    <%= form.submit "Create account", class: "button-primary" %>
   <% end %>
 </div>

data/app/views/iron/locales/_form.html.erb

@@ -18,7 +18,7 @@
   </div>
 
   <div class="mt-4">
-    <%= form.submit %>
+    <%= form.submit class: "button-primary" %>
   </div>
 <% end %>
 

data/app/views/iron/locales/_locale.html.erb

@@ -8,7 +8,7 @@
       <%= badge locale.code, color: :blue %>
     </div>
   <% end %>
-  <%= button_to locale_path(locale), method: :delete, class: "absolute right-2 top-1/2 -translate-y-1/2", data: { variant: "plain" } do %>
+  <%= button_to locale_path(locale), method: :delete, class: "absolute right-2 top-1/2 -translate-y-1/2 button-secondary button-sm" do %>
     <%= icon "trash", class: "text-stone-400 size-4" %>
     <span class="sr-only">Delete</span>
   <% end %>

data/app/views/iron/locales/index.html.erb

@@ -3,7 +3,7 @@
 <div class="space-y-8">
   <div class="flex justify-between items-center">
     <h1 class="page-title">Locales</h1>
-    <%= link_to "New locale", new_locale_path, class: "btn" %>
+    <%= link_to "New locale", new_locale_path, class: "button-primary" %>
   </div>
 
   <div id="locales" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

data/app/views/iron/passwords/edit.html.erb

@@ -1,7 +1,32 @@
-<h1>Update your password</h1>
+<div class="sm:mx-auto sm:w-full sm:max-w-sm">
+  <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-stone-900 dark:text-white">Update your password</h2>
+</div>
 
-<%= form_with url: password_path(params[:token]), method: :put do |form| %>
-  <%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72 %><br>
-  <%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72 %><br>
-  <%= form.submit "Save" %>
-<% end %>
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+  <%= form_with url: password_path(params[:token]), method: :put, class: "space-y-6" do |form| %>
+    <div>
+      <%= form.label :password, "New password", class: "block text-sm/6 font-medium text-stone-900 dark:text-stone-100" %>
+      <div class="mt-2">
+        <%= form.password_field :password,
+                            required: true,
+                            autofocus: true,
+                            autocomplete: "new-password",
+                            maxlength: 72 %>
+      </div>
+    </div>
+
+    <div>
+      <%= form.label :password_confirmation, "Confirm password", class: "block text-sm/6 font-medium text-stone-900 dark:text-stone-100" %>
+      <div class="mt-2">
+        <%= form.password_field :password_confirmation,
+                            required: true,
+                            autocomplete: "new-password",
+                            maxlength: 72 %>
+      </div>
+    </div>
+
+    <div>
+      <%= form.submit "Save password", class: "button-primary w-full" %>
+    </div>
+  <% end %>
+</div>

data/app/views/iron/passwords/new.html.erb

@@ -1,26 +1,27 @@
-<div>
-  <div class="mb-8 text-center">
-    <h1 class="text-2xl font-semibold tracking-tight">Reset your password</h1>
-    <p class="mt-2 text-sm text-stone-600 dark:text-stone-400">Enter your email address and we'll send you instructions</p>
-  </div>
+<div class="sm:mx-auto sm:w-full sm:max-w-sm">
+  <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-stone-900 dark:text-white">Reset your password</h2>
+  <p class="mt-2 text-center text-sm/6 text-stone-500 dark:text-stone-400">Enter your email address and we'll send you instructions</p>
+</div>
 
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
   <%= form_with url: passwords_path, class: "space-y-6" do |form| %>
     <div>
-      <%= form.label :email_address, "Email address", class: "sr-only" %>
-      <%= form.email_field :email_address,
-            class: "block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-xs ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 dark:bg-stone-800 dark:text-white dark:ring-stone-700 dark:placeholder:text-stone-500 dark:focus:ring-stone-500 sm:text-sm sm:leading-6",
-            required: true,
-            autofocus: true,
-            autocomplete: "username",
-            placeholder: "Enter your email address",
-            value: params[:email_address] %>
+      <%= form.label :email_address, "Email address", class: "block text-sm/6 font-medium text-stone-900 dark:text-stone-100" %>
+      <div class="mt-2">
+        <%= form.email_field :email_address,
+              required: true,
+              autofocus: true,
+              autocomplete: "email",
+              value: params[:email_address] %>
+      </div>
     </div>
 
-    <%= form.submit "Send reset instructions" %>
+    <div>
+      <%= form.submit "Send reset instructions", class: "button-primary w-full" %>
+    </div>
   <% end %>
 
-  <div class="mt-8 text-center text-sm">
-    <%= link_to "Back to sign in", sign_in_path,
-          class: "text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-300" %>
-  </div>
+  <p class="mt-10 text-center text-sm/6 text-stone-500 dark:text-stone-400">
+    <%= link_to "Back to sign in", sign_in_path, class: "font-semibold text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300" %>
+  </p>
 </div>

data/app/views/iron/schemas/new.html.erb

@@ -50,8 +50,8 @@
     </div>
 
     <div class="mt-6 flex items-center gap-x-3">
-      <%= form.submit "Import Schema", class: "btn" %>
-      <%= link_to "Cancel", content_types_path, class: "btn", data: { variant: "plain" } %>
+      <%= form.submit "Import Schema", class: "button-primary" %>
+      <%= link_to "Cancel", content_types_path, class: "button-secondary" %>
     </div>
   <% end %>
 </div>

data/app/views/iron/sessions/new.html.erb

@@ -1,36 +1,37 @@
-<div>
-  <div class="mb-8 text-center">
-    <h1 class="text-2xl font-semibold tracking-tight">Welcome back</h1>
-    <p class="mt-2 text-sm text-stone-600 dark:text-stone-400">Sign in to your account to continue</p>
-  </div>
+<div class="sm:mx-auto sm:w-full sm:max-w-sm">
+  <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-stone-900 dark:text-white">Sign in to your account</h2>
+</div>
 
+<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
   <%= form_with url: sign_in_path, class: "space-y-6" do |form| %>
     <div>
-      <%= form.label :email_address, "Email address", class: "sr-only" %>
-      <%= form.email_field :email_address,
-                       required: true,
-                       autofocus: true,
-                       autocomplete: "username",
-                       placeholder: "Enter your email address",
-                       value: params[:email_address] %>
+      <%= form.label :email_address, "Email address", class: "block text-sm/6 font-medium text-stone-900 dark:text-stone-100" %>
+      <div class="mt-2">
+        <%= form.email_field :email_address,
+                         required: true,
+                         autofocus: true,
+                         autocomplete: "email",
+                         value: params[:email_address] %>
+      </div>
     </div>
 
     <div>
-      <%= form.label :password, "Password", class: "sr-only" %>
-      <%= form.password_field :password,
-                          required: true,
-                          autocomplete: "current-password",
-                          placeholder: "Enter your password",
-                          maxlength: 72 %>
+      <div class="flex items-center justify-between">
+        <%= form.label :password, "Password", class: "block text-sm/6 font-medium text-stone-900 dark:text-stone-100" %>
+        <div class="text-sm">
+          <%= link_to "Forgot password?", new_password_path, class: "font-semibold text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300" %>
+        </div>
+      </div>
+      <div class="mt-2">
+        <%= form.password_field :password,
+                            required: true,
+                            autocomplete: "current-password",
+                            maxlength: 72 %>
+      </div>
     </div>
 
-    <%= form.submit "Sign in", class: "w-full" %>
+    <div>
+      <%= form.submit "Sign in", class: "button-primary w-full" %>
+    </div>
   <% end %>
-
-  <div class="mt-8 space-y-4 text-center text-sm">
-    <%= link_to "Forgot your password?",
-    new_password_path,
-    class:
-      "block text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-300" %>
-  </div>
 </div>

data/app/views/iron/settings/show.html.erb

@@ -31,7 +31,7 @@
       </div>
 
       <div class="mt-4">
-        <%= form.submit "Save Settings" %>
+        <%= form.submit "Save Settings", class: "button-primary" %>
       </div>
     <% end %>
   </div>
@@ -44,14 +44,13 @@
     <div class="flex flex-col gap-2">
       <%= link_to "Export Content",
         export_content_path,
-        class: "btn",
+        class: "button-primary",
         data: {
           turbo: false,
         } %>
       <%= link_to "Import Content",
         new_content_path,
-        class: "btn",
-        data: { variant: "secondary" } %>
+        class: "button-secondary" %>
     </div>
   </div>
 </div>

data/app/views/iron/shared/_collection_select.html.erb

@@ -0,0 +1,31 @@
+<%# locals: (field_name:, select_id:, selected_value:, collection:, value_method:, text_method:, options:, html_options:) -%>
+
+<el-select id="<%= select_id %>" name="<%= field_name %>" value="<%= selected_value %>" class="mt-2 block">
+  <button type="button" class="grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-stone-900 outline-1 -outline-offset-1 outline-stone-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-sky-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus-visible:outline-sky-500">
+    <el-selectedcontent class="col-start-1 row-start-1 truncate pr-6"></el-selectedcontent>
+    <%= icon "chevrons-up-down", class: "col-start-1 row-start-1 size-5 self-center justify-self-end text-stone-500 sm:size-4 dark:text-stone-400" %>
+  </button>
+
+  <el-options anchor="bottom start" popover class="max-h-60 w-(--button-width) overflow-auto rounded-md bg-white py-1 text-base shadow-lg outline-1 outline-black/5 [--anchor-gap:--spacing(1)] data-leave:transition data-leave:transition-discrete data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm dark:bg-stone-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
+    <% if options[:include_blank] %>
+      <% blank_text = options[:include_blank].is_a?(String) ? options[:include_blank] : "" %>
+      <el-option value="" class="group/option relative block cursor-default py-2 pr-9 pl-3 text-stone-900 select-none focus:bg-sky-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-sky-500">
+        <span class="block truncate font-normal group-aria-selected/option:font-semibold"><%= blank_text %></span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-sky-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden dark:text-sky-400">
+          <%= icon "check", class: "size-5" %>
+        </span>
+      </el-option>
+    <% end %>
+
+    <% collection.each do |item| %>
+      <% value = item.send(value_method) %>
+      <% text = item.send(text_method) %>
+      <el-option value="<%= value %>" class="group/option relative block cursor-default py-2 pr-9 pl-3 text-stone-900 select-none focus:bg-sky-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-sky-500">
+        <span class="block truncate font-normal group-aria-selected/option:font-semibold"><%= text %></span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-sky-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden dark:text-sky-400">
+          <%= icon "check", class: "size-5" %>
+        </span>
+      </el-option>
+    <% end %>
+  </el-options>
+</el-select>

data/app/views/iron/users/_form.html.erb

@@ -17,5 +17,5 @@
     </div>
   </div>
 
-  <%= form.submit class: "mt-4" %>
+  <%= form.submit class: "button-primary mt-4" %>
 <% end %>

data/app/views/iron/users/new.html.erb

@@ -24,6 +24,6 @@
       <%= form.error_for :password_confirmation %>
     </div>
 
-    <%= form.submit "Join", class: "mt-4 w-full" %>
+    <%= form.submit "Join", class: "button-primary mt-4 w-full" %>
   <% end %>
 </div>

data/app/views/iron/users/show.html.erb

@@ -9,10 +9,7 @@
         button_to "Destroy",
         @user,
         method: :delete,
-        class: "btn",
-        data: {
-          color: "destructive",
-        }
+        class: "button-destructive"
       end %>
     </div>
   </div>

data/app/views/layouts/iron/_mobile_header.html.erb

@@ -0,0 +1,10 @@
+<div class="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-xs sm:px-6 lg:hidden dark:bg-stone-900 dark:shadow-none dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:border-b dark:after:border-white/10 dark:after:bg-black/10">
+  <button type="button" command="show-modal" commandfor="sidebar" class="-m-2.5 p-2.5 text-stone-700 hover:text-stone-900 lg:hidden dark:text-stone-400 dark:hover:text-white">
+    <span class="sr-only">Open sidebar</span>
+    <%= icon "menu", class: "size-6" %>
+  </button>
+  <div class="flex-1 text-sm/6 font-semibold text-stone-900 dark:text-white">
+    <%= content_for(:title).present? ? content_for(:title) : "Iron CMS" %>
+  </div>
+  <%= render "layouts/iron/user_menu", class: "-m-2.5 p-2.5", anchor: "bottom end", show_name: false %>
+</div>

data/app/views/layouts/iron/_sidebar.html.erb

@@ -1,83 +1,28 @@
-<div class="fixed inset-y-0 left-0 w-64 max-lg:hidden">
-  <nav class="flex h-full min-h-0 flex-col">
-    <div class="border-b border-stone-950/5 p-4 dark:border-white/5">
-      <span class="font-semibold bg-stone-700/50 px-2 py-1 rounded-lg"><%= Iron::Current.account.name %></span>
+<%# Mobile sidebar dialog %>
+<el-dialog>
+  <dialog id="sidebar" class="backdrop:bg-transparent lg:hidden">
+    <el-dialog-backdrop class="fixed inset-0 bg-stone-900/80 transition-opacity duration-300 ease-linear data-closed:opacity-0"></el-dialog-backdrop>
+
+    <div tabindex="0" class="fixed inset-0 flex focus:outline-none">
+      <el-dialog-panel class="group/dialog-panel relative mr-16 flex w-full max-w-xs flex-1 transform transition duration-300 ease-in-out data-closed:-translate-x-full">
+        <div class="absolute top-0 left-full flex w-16 justify-center pt-5 duration-300 ease-in-out group-data-closed/dialog-panel:opacity-0">
+          <button type="button" command="close" commandfor="sidebar" class="-m-2.5 p-2.5">
+            <span class="sr-only">Close sidebar</span>
+            <%= icon "x", class: "size-6 text-white" %>
+          </button>
+        </div>
+
+        <div class="relative flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-2 dark:bg-stone-900 dark:ring dark:ring-white/10 dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:bg-black/10">
+          <%= render "layouts/iron/sidebar_content" %>
+        </div>
+      </el-dialog-panel>
     </div>
-
-    <div class="flex flex-1 flex-col overflow-y-auto p-4 [&>section+section]:mt-8">
-      <% if Iron::Current.user.can_administer? %>
-        <section class="flex flex-col gap-0.5">
-          <h3 class="mb-1 px-2 text-xs/6 font-medium text-stone-500 dark:text-stone-400">Admin</h3>
-
-          <ul>
-            <%= render "layouts/iron/sidebar_item", text: "Content Types", url: content_types_path, icon: "boxes", current: controller_name == "content_types" %>
-            <ul class="ml-4">
-              <% Iron::ContentType.all.each do |content_type| %>
-                <%= render "layouts/iron/sidebar_item", text: content_type.name, url: content_type_path(content_type), icon: content_type.icon.present? ? content_type.icon : "box" %>
-              <% end %>
-            </ul>
-            <%= render "layouts/iron/sidebar_item", text: "Block definitions", url: block_definitions_path, icon: "blocks", current: controller_name == "block_definitions" %>
-            <ul class="ml-4">
-              <% Iron::BlockDefinition.all.each do |block_definition| %>
-                <%= render "layouts/iron/sidebar_item", text: block_definition.name, url: block_definition_path(block_definition), icon: "diamond" %>
-              <% end %>
-            </ul>
-            <%= render "layouts/iron/sidebar_item", text: "Locales", url: locales_path, icon: "languages", current: controller_name == "locales" %>
-            <%= render "layouts/iron/sidebar_item", text: "Users", url: users_path, icon: "users", current: controller_name == "users" %>
-            <%= render "layouts/iron/sidebar_item", text: "Settings", url: settings_path, icon: "settings", current: controller_name == "settings" %>
-          </ul>
-        </section>
-      <% end %>
-
-      <section class="flex flex-col gap-0.5">
-        <h3 class="mb-1 px-2 text-xs/6 font-medium text-stone-500 dark:text-stone-400">Content</h3>
-
-        <ul class="">
-          <% Iron::ContentType.all.each do |content_type| %>
-            <%= render "layouts/iron/sidebar_item", text: content_type.name, url: content_type_sidebar_url(content_type), icon: content_type.icon.present? ? content_type.icon : "folder-closed", current: current_content_page?(content_type) %>
-          <% end %>
-        </ul>
-      </section>
-    </div>
-
-    <div
-      class="
-        flex flex-col border-t border-stone-950/5 p-4 dark:border-white/5
-        [&>section+section]:mt-2.5
-      "
-    >
-      <%= dropdown_menu do %>
-        <%= dropdown_menu_trigger class: "sidebar-item" do %>
-          <span class="flex items-center gap-3 min-w-0">
-            <%= avatar Iron::Current.user, class: "size-10", variant: "square" %>
-            <span class="min-w-0">
-              <span
-                class="
-                  block truncate text-sm/5 font-medium text-stone-950 dark:text-white
-                "
-              >
-                <%= Iron::Current.user.name %>
-              </span>
-              <span
-                class="
-                  block truncate text-xs/5 font-normal text-stone-500 dark:text-stone-400
-                "
-              >
-                <%= Iron::Current.user.email_address %>
-              </span>
-            </span>
-          </span>
-          <%= icon "chevron-up", class: "size-4" %>
-        <% end %>
-
-        <%= dropdown_menu_content width: "16rem", align: "end" do %>
-          <%= dropdown_menu_item "My account", "#", icon: "circle-user" %>
-
-          <%= dropdown_menu_separator %>
-
-          <%= dropdown_menu_item "Sign out", session_path, method: :delete, icon: "log-out" %>
-        <% end %>
-      <% end %>
-    </div>
-  </nav>
+  </dialog>
+</el-dialog>
+
+<%# Desktop sidebar %>
+<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col dark:bg-stone-900">
+  <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-stone-200 bg-white px-6 dark:border-white/10 dark:bg-black/10">
+    <%= render "layouts/iron/sidebar_content" %>
+  </div>
 </div>

data/app/views/layouts/iron/_sidebar_content.html.erb

@@ -0,0 +1,36 @@
+<div class="relative flex h-16 shrink-0 items-center">
+  <span class="font-semibold bg-stone-700/50 px-2 py-1 rounded-lg"><%= Iron::Current.account.name %></span>
+</div>
+
+<nav class="relative flex flex-1 flex-col">
+  <ul role="list" class="flex flex-1 flex-col gap-y-7">
+    <% if Iron::Current.user.can_administer? %>
+      <li>
+        <div class="text-xs/6 font-semibold text-stone-400">Admin</div>
+        <ul role="list" class="-mx-2 mt-2 space-y-1">
+          <%= render "layouts/iron/sidebar_item", text: "Content Types", url: content_types_path, icon: "boxes", current: controller_name == "content_types" %>
+          <%= render "layouts/iron/sidebar_item", text: "Block definitions", url: block_definitions_path, icon: "blocks", current: controller_name == "block_definitions" %>
+          <%= render "layouts/iron/sidebar_item", text: "Locales", url: locales_path, icon: "languages", current: controller_name == "locales" %>
+          <%= render "layouts/iron/sidebar_item", text: "Users", url: users_path, icon: "users", current: controller_name == "users" %>
+          <%= render "layouts/iron/sidebar_item", text: "Settings", url: settings_path, icon: "settings", current: controller_name == "settings" %>
+        </ul>
+      </li>
+    <% end %>
+
+    <li>
+      <div class="text-xs/6 font-semibold text-stone-400">Content</div>
+      <ul role="list" class="-mx-2 mt-2 space-y-1">
+        <% Iron::ContentType.all.each do |content_type| %>
+          <%= render "layouts/iron/sidebar_item", text: content_type.name, url: content_type_sidebar_url(content_type), icon: content_type.icon.present? ? content_type.icon : "folder-closed", current: current_content_page?(content_type) %>
+        <% end %>
+      </ul>
+    </li>
+
+    <li class="-mx-6 mt-auto">
+      <%= render "layouts/iron/user_menu",
+            class: "flex w-full items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-stone-900 hover:bg-stone-50 dark:text-white dark:hover:bg-white/5",
+            anchor: "top start",
+            show_name: true %>
+    </li>
+  </ul>
+</nav>

data/app/views/layouts/iron/_sidebar_item.html.erb

@@ -1,10 +1,6 @@
 <%# locals: (text:, url:, icon: nil, class: nil, current: false) -%>
 
-<li class="<%= tw(local_assigns[:class], "relative") %>">
-  <% if current %>
-    <span class="absolute inset-y-2 -left-4 w-0.5 rounded-full bg-stone-950 dark:bg-white"></span>
-  <% end %>
-  
+<li class="<%= local_assigns[:class] %>">
   <%= link_to url, class: "sidebar-item", data: { current: current ? "true" : nil } do %>
     <% if icon.present? %>
       <%= icon(icon, data: { slot: "icon" }) %>