Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dl/navbar test #123

Merged
merged 2 commits into from
Sep 7, 2024
Merged

Dl/navbar test #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ade1d00
add stimulus
loftwah Sep 7, 2024
a215a53
stimulus dropdown
loftwah Sep 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions app/javascript/controllers/dropdown_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
static targets = [ "menu" ]

connect() {
console.log("Dropdown controller connected", this.element)
console.log("Menu target:", this.menuTarget)
}

toggle() {
console.log("Toggle called")
if (this.hasMenuTarget) {
console.log("Menu target found, toggling visibility")
this.menuTarget.classList.toggle('hidden')
} else {
console.error("Menu target not found")
}
}

hide(event) {
if (!this.element.contains(event.target)) {
console.log("Hiding dropdown")
this.menuTarget.classList.add('hidden')
}
}
}
11 changes: 11 additions & 0 deletions app/javascript/entrypoints/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@ import "../../assets/stylesheets/application.tailwind.css";
import '@fortawesome/fontawesome-free/js/all.min.js';
import '@fortawesome/fontawesome-free/css/all.min.css';

// Import Stimulus
import { Application } from "@hotwired/stimulus"
import { registerControllers } from 'stimulus-vite-helpers'

// Initialize Stimulus application
const application = Application.start()

// Use registerControllers helper to load all controllers
const controllers = import.meta.glob('../controllers/**/*_controller.js', { eager: true })
registerControllers(application, controllers)

Rails.start();

console.log('Vite ⚡️ Rails');
Expand Down
90 changes: 34 additions & 56 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,44 +80,40 @@
</h1>
</div>
<nav>
<ul class="flex space-x-2 md:space-x-4 text-sm md:text-base items-center">
<!-- User Directory Button - Replacing Loftwah and Button -->
<li>
<%= link_to 'User Directory', users_path, class: 'bg-lime-500 hover:bg-lime-700 text-white font-bold py-1 px-2 rounded' %>
</li>

<% if user_signed_in? %>
<!-- Signed-in user dropdown menu -->
<li class="relative">
<button id="userMenuBtn" class="text-white hover:text-lime-300 focus:outline-none flex items-center space-x-1">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<div id="userMenu" class="absolute right-0 mt-2 w-48 bg-gray-700 rounded-md shadow-xl z-20 hidden">
<%= link_to 'Public Page', user_links_path(current_user.username), class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Analytics', user_analytics_path(current_user.username), class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Links', links_path, class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Achievements', achievements_path, class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Profile', edit_user_registration_path, class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Logout', destroy_user_session_path, method: :delete, class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
</div>
</li>
<% else %>
<!-- Login link for guests -->
<li><%= link_to 'Login', new_user_session_path, class: 'text-white hover:text-lime-300' %></li>
<% end %>
<ul class="flex space-x-2 md:space-x-4 text-sm md:text-base items-center">
<li>
<%= link_to 'User Directory', users_path, class: 'bg-lime-500 hover:bg-lime-700 text-white font-bold py-1 px-2 rounded' %>
</li>

<% if user_signed_in? %>
<li class="relative" data-controller="dropdown">
<button data-action="click->dropdown#toggle click@window->dropdown#hide" class="text-white hover:text-lime-300 focus:outline-none flex items-center space-x-1">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<div data-dropdown-target="menu" class="hidden absolute right-0 mt-2 w-48 bg-gray-700 rounded-md shadow-xl z-20">
<%= link_to 'Public Page', user_links_path(current_user.username), class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Analytics', user_analytics_path(current_user.username), class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Links', links_path, class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Achievements', achievements_path, class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Profile', edit_user_registration_path, class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
<%= link_to 'Logout', destroy_user_session_path, data: { turbo_method: :delete }, class: 'block px-4 py-2 text-sm text-white hover:bg-gray-600' %>
</div>
</li>
<% else %>
<li><%= link_to 'Login', new_user_session_path, class: 'text-white hover:text-lime-300' %></li>
<% end %>

<!-- GitHub link -->
<li>
<a href="https://github.com/loftwah/linkarooie" target="_blank" rel="noopener noreferrer" class="text-white hover:text-lime-300">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
</svg>
</a>
</li>
</ul>
</nav>
<li>
<a href="https://github.com/loftwah/linkarooie" target="_blank" rel="noopener noreferrer" class="text-white hover:text-lime-300">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container mx-auto px-4 py-6">
Expand All @@ -128,23 +124,5 @@
<p class="text-gray-400">© 2024 Linkarooie. All rights reserved.</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const userMenuBtn = document.getElementById('userMenuBtn');
const userMenu = document.getElementById('userMenu');

if (userMenuBtn && userMenu) {
userMenuBtn.addEventListener('click', function() {
userMenu.classList.toggle('hidden');
});

document.addEventListener('click', function(event) {
if (!userMenuBtn.contains(event.target) && !userMenu.contains(event.target)) {
userMenu.classList.add('hidden');
}
});
}
});
</script>
</body>
</html>
</html>
29 changes: 28 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
{
"dependencies": {
"@fortawesome/fontawesome-free": "^6.6.0",
"@hotwired/stimulus": "^3.2.2",
"@rails/ujs": "^7.1.3-4",
"chart.js": "^4.4.3",
"chartkick": "^5.0.1",
"flowbite": "^2.4.1"
},
"devDependencies": {
"stimulus-vite-helpers": "^3.1.0",
"vite": "^5.3.5",
"vite-plugin-ruby": "^5.0.0"
"vite-plugin-ruby": "^5.0.0",
"vite-plugin-stimulus-hmr": "^3.0.0"
}
}
4 changes: 3 additions & 1 deletion vite.config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { defineConfig } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
import StimulusHMR from 'vite-plugin-stimulus-hmr';

export default defineConfig({
plugins: [
RubyPlugin(),
StimulusHMR(),
],
build: {
rollupOptions: {
Expand All @@ -13,4 +15,4 @@ export default defineConfig({
}
},
assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.svg']
});
});
Loading