Add night view

This commit is contained in:
Eugene Burmakin 2023-10-21 12:56:46 +02:00
parent c4e00dcf8b
commit 1abb5507a2
4 changed files with 51 additions and 9 deletions

File diff suppressed because one or more lines are too long

View file

@ -55,7 +55,7 @@
<%= render "devise/shared/links" %>
<% end %>
<p class='mt-3'>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: 'btn' %></p>
<p class='mt-3'>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), method: :delete, form: { data: { turbo_confirm: 'Are you sure?' } }, class: 'btn' %></p>
</div>
</div>
</div>

View file

@ -10,10 +10,38 @@
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<script>
document.addEventListener("turbo:load", function () {
const themeToggle = document.getElementById("themeToggle");
// Function to toggle the theme
function toggleTheme() {
const currentTheme = document.body.getAttribute("data-theme");
const newTheme = currentTheme === "light" ? "dark" : "light";
document.body.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
updateButtonEmoji(newTheme);
}
function updateButtonEmoji(theme) {
themeToggle.textContent = theme === "light" ? "🌞" : "🌚";
}
// Attach the theme toggle function to the button click
themeToggle.addEventListener("click", toggleTheme);
// Set the initial theme based on stored preference
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
document.body.setAttribute("data-theme", storedTheme);
updateButtonEmoji(storedTheme);
}
});
</script>
<%= javascript_importmap_tags %>
</head>
<body>
<body class='min-h-screen'>
<div class='container mx-auto'>
<%= render 'shared/navbar' %>
<%= yield %>

View file

@ -1,10 +1,24 @@
<div class="navbar bg-base-300">
<div class="flex-1">
<div class="navbar bg-base-100">
<div class="navbar-start">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><%= link_to 'Test url', 'portfolios_url' %></li>
</ul>
</div>
<%= link_to 'SoloCustomerTemplate', root_path, class: 'btn btn-ghost normal-case text-xl'%>
<button id="themeToggle" class='ml-3 text-xl btn btn-ghost'>🌞</button>
</div>
<div class="flex-none">
<ul class="menu menu-horizontal p-0">
<li><%= link_to 'Link0', '#' %></li>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><%= link_to 'Test url', 'portfolios_url' %></li>
</ul>
</div>
<div class="navbar-end">
<%# menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 %>
<ul class="menu menu-horizontal dropdown-content bg-base-100 rounded-box px-1">
<% if user_signed_in? %>
<li tabindex="0">
<a>
@ -12,7 +26,6 @@
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>
</a>
<ul class="p-2 bg-base-300">
<li><%= link_to 'Link1', '#' %></li>
<li><%= link_to 'Settings', edit_user_registration_path %></li>
<li><%= button_to 'Logout', destroy_user_session_path, method: :delete %></li>
</ul>
@ -24,3 +37,4 @@
</ul>
</div>
</div>