Skip to content

Commit

Permalink
Update top_navigation_component.rb (#70)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielpaul
danielpaul authored Jul 13, 2023
2 parents 67dd086 + 4d44d60 commit d74ede6
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 74 deletions.
2 changes: 1 addition & 1 deletion app/assets/stylesheets/application.tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@
fixed inset-x-0 top-0 z-40 flex
h-14
items-center justify-between
gap-12 px-4 sm:px-6 lg:left-72 lg:z-30 lg:px-8 lg:left-72
gap-6 px-4 sm:px-6 lg:left-72 lg:z-30 lg:px-8 lg:left-72
transition-opacity
backdrop-blur-sm dark:backdrop-blur
bg-card/90 dark:bg-card-dark/80;
Expand Down
157 changes: 84 additions & 73 deletions app/views/components/app/top_navigation_component.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
class App::TopNavigationComponent < ApplicationComponent
include Phlex::Rails::Helpers::LinkTo
include Phlex::Rails::Helpers::Routes
include Phlex::Rails::Helpers::FormWith
include ActionView::Helpers::OutputSafetyHelper
include Heroicon::Engine.helpers

Expand All @@ -11,101 +12,114 @@ def initialize(current_user: nil)
end

def template
div(id: 'top', class: 'pb-14') {
div(class: 'top-bar') {

div(class: 'flex items-center gap-x-4 lg:hidden') {
div(id: "top", class: "pb-14") do
div(class: "top-bar") do
div(class: "flex items-center gap-x-4 lg:hidden") do
open_sidebar_button
seperator
link_to(root_path) {
render 'layouts/components/logo', custom_class: 'h-6'
}
}

div(class: 'flex flex-1 gap-x-4 self-stretch lg:gap-x-6 items-center') {
link_to(root_path) do
render "layouts/components/logo", custom_class: "h-6"
end
end

div(class: 'relative flex flex-1') {
div(class: "flex flex-1 gap-x-4 self-stretch lg:gap-x-6 items-center") do
div(class: "relative flex flex-1") do
search_bar
}
end

div(class: 'flex items-center gap-x-4 lg:gap-x-6') {
div(class: 'flex h-6 w-6 items-center justify-center button') {
div(class: "flex items-center gap-x-4 lg:gap-x-6") do
a(href: "#", class: "button text-neutral-400 hover:text-neutral-500 h-6 w-6 lg:hidden") do
unsafe_raw heroicon("magnifying-glass")
end

div(class: "flex h-6 w-6 items-center justify-center button") do
render DarkModeButtonComponent.new
}
end
seperator
user_display
}
}
}
}
end
end
end
end
end


private

def open_sidebar_button
button(
type: "button",
class: "button",
class: "button",
"@click": "sidebarOpen = !sidebarOpen"
) {
) do
span(class: "sr-only") { "Open sidebar" }
unsafe_raw heroicon("bars-3", options: { class: "h-6 w-6" })
}
unsafe_raw heroicon("bars-3", options: {class: "h-6 w-6"})
end
end

def seperator(classes: "")
div(class: "h-5 w-px bg-zinc-900/10 dark:bg-neutral-700 #{classes}") { "" }
end

def search_bar
div(class: 'max-w-lg flex-auto hidden lg:flex') {
button(
type: "button",
class: 'h-8 w-full items-center gap-2 rounded-full bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 hover:transition dark:text-zinc-400 dark:ring-inset flex ring-zinc-900/10 hover:ring-zinc-900/20 dark:bg-white/5 dark:ring-white/10 dark:hover:ring-white/20 focus:[&:not(:focus-visible)]:outline-none'
) {
unsafe_raw heroicon("magnifying-glass", options: { class: "h-5 w-5" })
plain "Find something..."

div(class: 'ml-auto text-2xs text-zinc-400 dark:text-zinc-500 tracking-tighter') {
span(class: 'font-sans') { "⌘K" }
}
}
}
div(
class:
"px-2 w-full lg:w-3/5 hidden lg:flex"
) do
form_with url: root_path, method: :get, class: "w-full" do
label(for: "search", class: "sr-only") { "Search" }
div(class: "relative") do
div(
class:
"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
) do
unsafe_raw heroicon("magnifying-glass", options: {class: "h-5 w-5 text-neutral-400"})
end
input(
id: "search",
name: "search",
class:
"text-input w-full rounded-full py-1.5 pl-10 pr-3 shadow-none ring-neutral-300/50 dark:ring-neutral-750",
placeholder: "Search...",
type: "search",
value: helpers.params[:search]
)
end
end
end
end

def user_display
div(class: 'relative', "x-data": "{ dropdownOpen: false }") {
div(class: "relative", "x-data": "{ dropdownOpen: false }") do
button(
type: "button",
id: 'user-menu-button',
class: 'flex items-center -m-1.5 p-1.5',
id: "user-menu-button",
class: "flex items-center -m-1.5 p-1.5",
aria: {expanded: "false", haspopup: "true"},
"@click": "dropdownOpen = !dropdownOpen"
) {
span(class: 'sr-only') { "Open user menu" }
) do
span(class: "sr-only") { "Open user menu" }
img(src: url_for(@current_user.avatar_url), class: "h-8 w-8 rounded-full bg-neutral-50", alt: "")

span(class: 'hidden lg:flex lg:items-center') {
span(class: "hidden lg:flex lg:items-center") do
span(
class: 'ml-4 text-sm font-semibold leading-6 text-heading',
class: "ml-4 text-sm font-semibold leading-6 text-heading",
aria: {hidden: "true"}
) {
) do
@current_user.first_name.capitalize.truncate(20)
}
end

unsafe_raw heroicon("chevron-down", options: { class: "ml-2 h-5 w-5 button" })
}
}
unsafe_raw heroicon("chevron-down", options: {class: "ml-2 h-5 w-5 button"})
end
end

user_dropdown
}
end
end

def user_dropdown_items
[
[
{label: "Support", path: '#'}
{label: "Support", path: "#"}
],
[
{label: "Account Settings", path: edit_user_registration_path}
Expand All @@ -116,38 +130,35 @@ def user_dropdown_items
def user_dropdown
div(
role: "menu",
class: 'absolute right-0 z-50 w-64 origin-top-right card shadow-lg mt-4 ring-neutral-900/5',
class: "absolute right-0 z-50 w-64 origin-top-right card shadow-lg mt-4 ring-neutral-900/5",
aria: {labelledby: "user-menu-button", orientation: "vertical"},
tabindex: "-1",
"x-show": "dropdownOpen",
"@click.away": "dropdownOpen = false",
"x-transition:enter": "ease-out duration-100",
"x-transition:enter-start": "transform opacity-0 scale-95",
"x-transition:enter-end": "transform opacity-100 scale-100",
"x-transition:leave": "transition ease-in duration-75",
"x-transition:leave-start": "transform opacity-100 scale-100",
"x-transition:leave-end": "transform opacity-0 scale-95",
"x-show": "dropdownOpen",
"@click.away": "dropdownOpen = false",
"x-transition:enter": "ease-out duration-100",
"x-transition:enter-start": "transform opacity-0 scale-95",
"x-transition:enter-end": "transform opacity-100 scale-100",
"x-transition:leave": "transition ease-in duration-75",
"x-transition:leave-start": "transform opacity-100 scale-100",
"x-transition:leave-end": "transform opacity-0 scale-95",
style: "display: none"
) {
div(class: 'py-2 px-3 mb-1 border-b card-border') {
div(class: 'text-xs text-muted') { "Signed in as" }
div(class: 'text-sm font-semibold text-heading truncate') { @current_user.email }
}
) do
div(class: "py-2 px-3 mb-1 border-b card-border") do
div(class: "text-xs text-muted") { "Signed in as" }
div(class: "text-sm font-semibold text-heading truncate") { @current_user.email }
end

item_link_classes = 'block px-3 py-1 text-sm leading-6 btn-hover'
item_link_classes = "block px-3 py-1 text-sm leading-6 btn-hover"

user_dropdown_items.each_with_index do |item_group, index|
if index != 0
div(class: 'border-b card-border mt-1 mb-1') { "" }
end
div(class: "border-b card-border mt-1 mb-1") { "" } if index != 0

item_group.each do |item|
link_to item[:label], item[:path], class: item_link_classes
end
end

link_to "Sign Out", destroy_user_session_path, data: { turbo_method: :delete }, class: item_link_classes
}
link_to "Sign Out", destroy_user_session_path, data: {turbo_method: :delete}, class: item_link_classes
end
end

end
end

0 comments on commit d74ede6

Please sign in to comment.