Skip to content

Commit

Permalink
change navbar style
Browse files Browse the repository at this point in the history
  • Loading branch information
@aayushmau5
aayushmau5 committed May 9, 2024
1 parent 682c24a commit 47dc03c
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 88 deletions.
7 changes: 7 additions & 0 deletions .iex.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,10 @@ if function_exported?(Mix, :__info__, 1) and Mix.env() == :dev do
# if statement guards you from running it in prod, which could result in loss of logs.
Logger.configure_backend(:console, device: Process.group_leader())
end

defmodule IexExtra do
def exit, do: System.stop(0)
def restart, do: System.restart()
end

import IexExtra
2 changes: 1 addition & 1 deletion config/dev.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ config :accumulator, AccumulatorWeb.Endpoint,
],
patterns: [
~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
~r"lib/accumulator_web/(controllers|live|components)/.*(ex|heex)$"
~r"lib/accumulator_web/controllers/.*(ex|heex)$"
]
]

Expand Down
170 changes: 83 additions & 87 deletions lib/accumulator_web/components/core_components.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ defmodule AccumulatorWeb.CoreComponents do
<.flash kind={:info} flash={@flash} />
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
"""
attr :id, :string, default: "flash", doc: "the optional id of flash container"
attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
attr :title, :string, default: nil
attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
attr :autoshow, :boolean, default: true, doc: "whether to auto show the flash on mount"
attr :close, :boolean, default: true, doc: "whether the flash can be closed"
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
attr(:id, :string, default: "flash", doc: "the optional id of flash container")
attr(:flash, :map, default: %{}, doc: "the map of flash messages to display")
attr(:title, :string, default: nil)
attr(:kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup")
attr(:autoshow, :boolean, default: true, doc: "whether to auto show the flash on mount")
attr(:close, :boolean, default: true, doc: "whether the flash can be closed")
attr(:rest, :global, doc: "the arbitrary HTML attributes to add to the flash container")

slot :inner_block, doc: "the optional inner block that renders the flash message"
slot(:inner_block, doc: "the optional inner block that renders the flash message")

def flash(assigns) do
~H"""
Expand Down Expand Up @@ -66,7 +66,7 @@ defmodule AccumulatorWeb.CoreComponents do
<.flash_group flash={@flash} />
"""
attr :flash, :map, required: true, doc: "the map of flash messages"
attr(:flash, :map, required: true, doc: "the map of flash messages")

def flash_group(assigns) do
~H"""
Expand Down Expand Up @@ -99,15 +99,16 @@ defmodule AccumulatorWeb.CoreComponents do
</:actions>
</.simple_form>
"""
attr :for, :any, required: true, doc: "the datastructure for the form"
attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"
attr(:for, :any, required: true, doc: "the datastructure for the form")
attr(:as, :any, default: nil, doc: "the server side parameter to collect all input under")

attr :rest, :global,
attr(:rest, :global,
include: ~w(autocomplete name rel action enctype method novalidate target),
doc: "the arbitrary HTML attributes to apply to the form tag"
)

slot :inner_block, required: true
slot :actions, doc: "the slot for form actions, such as a submit button"
slot(:inner_block, required: true)
slot(:actions, doc: "the slot for form actions, such as a submit button")

def simple_form(assigns) do
~H"""
Expand All @@ -130,11 +131,11 @@ defmodule AccumulatorWeb.CoreComponents do
<.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button>
"""
attr :type, :string, default: nil
attr :class, :string, default: nil
attr :rest, :global, include: ~w(disabled form name value)
attr(:type, :string, default: nil)
attr(:class, :string, default: nil)
attr(:rest, :global, include: ~w(disabled form name value))

slot :inner_block, required: true
slot(:inner_block, required: true)

def button(assigns) do
~H"""
Expand Down Expand Up @@ -164,27 +165,29 @@ defmodule AccumulatorWeb.CoreComponents do
<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />
"""
attr :id, :any, default: nil
attr :name, :any
attr :label, :string, default: nil
attr :value, :any
attr(:id, :any, default: nil)
attr(:name, :any)
attr(:label, :string, default: nil)
attr(:value, :any)

attr :type, :string,
attr(:type, :string,
default: "text",
values: ~w(checkbox color date datetime-local email file hidden month number password
range radio search select tel text textarea time url week)
)

attr :field, Phoenix.HTML.FormField,
attr(:field, Phoenix.HTML.FormField,
doc: "a form field struct retrieved from the form, for example: @form[:email]"
)

attr :errors, :list, default: []
attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
attr :rest, :global, include: ~w(autocomplete cols disabled form max maxlength min minlength
pattern placeholder readonly required rows size step)
slot :inner_block
attr(:errors, :list, default: [])
attr(:checked, :boolean, doc: "the checked flag for checkbox inputs")
attr(:prompt, :string, default: nil, doc: "the prompt for select inputs")
attr(:options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2")
attr(:multiple, :boolean, default: false, doc: "the multiple flag for select inputs")
attr(:rest, :global, include: ~w(autocomplete cols disabled form max maxlength min minlength
pattern placeholder readonly required rows size step))
slot(:inner_block)

def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
assigns
Expand Down Expand Up @@ -285,8 +288,8 @@ defmodule AccumulatorWeb.CoreComponents do
@doc """
Renders a label.
"""
attr :for, :string, default: nil
slot :inner_block, required: true
attr(:for, :string, default: nil)
slot(:inner_block, required: true)

def label(assigns) do
~H"""
Expand All @@ -299,7 +302,7 @@ defmodule AccumulatorWeb.CoreComponents do
@doc """
Generates a generic error message.
"""
slot :inner_block, required: true
slot(:inner_block, required: true)

def error(assigns) do
~H"""
Expand All @@ -313,10 +316,10 @@ defmodule AccumulatorWeb.CoreComponents do
@doc """
Renders a header with title.
"""
attr :class, :string, default: nil
attr :h1_class, :string, default: nil
attr(:class, :string, default: nil)
attr(:h1_class, :string, default: nil)

slot :inner_block, required: true
slot(:inner_block, required: true)

def header(assigns) do
~H"""
Expand All @@ -340,24 +343,25 @@ defmodule AccumulatorWeb.CoreComponents do
<:col :let={user} label="username"><%= user.username %></:col>
</.table>
"""
attr :id, :string, required: true
attr :rows, :list, required: true
attr :row_id, :any, default: nil, doc: "the function for generating the row id"
attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"
attr :sort_order, :string, required: true
attr :sort_key, :string, required: true

attr :row_item, :any,
attr(:id, :string, required: true)
attr(:rows, :list, required: true)
attr(:row_id, :any, default: nil, doc: "the function for generating the row id")
attr(:row_click, :any, default: nil, doc: "the function for handling phx-click on each row")
attr(:sort_order, :string, required: true)
attr(:sort_key, :string, required: true)

attr(:row_item, :any,
default: &Function.identity/1,
doc: "the function for mapping each row before calling the :col and :action slots"
)

slot :col, required: true do
attr :label, :string
attr :click, :string
attr :name, :string
attr(:label, :string)
attr(:click, :string)
attr(:name, :string)
end

slot :action, doc: "the slot for showing user actions in the last table column"
slot(:action, doc: "the slot for showing user actions in the last table column")

def table(assigns) do
assigns =
Expand Down Expand Up @@ -436,8 +440,8 @@ defmodule AccumulatorWeb.CoreComponents do
<.back navigate={~p"/posts"}>Back to posts</.back>
"""
attr :navigate, :any, required: true
slot :inner_block, required: true
attr(:navigate, :any, required: true)
slot(:inner_block, required: true)

def back(assigns) do
~H"""
Expand All @@ -454,8 +458,8 @@ defmodule AccumulatorWeb.CoreComponents do
@doc """
Converts UTC time to local time
"""
attr :date, :string, required: true
attr :id, :string, required: true
attr(:date, :string, required: true)
attr(:id, :string, required: true)

def local_time(assigns) do
~H"""
Expand All @@ -466,41 +470,33 @@ defmodule AccumulatorWeb.CoreComponents do
@doc """
Navbar component
"""
slot :inner_block, required: true
attr :current_user, :any
slot(:inner_block, required: true)
attr(:current_user, :any)

def navbar(assigns) do
~H"""
<nav class="bg-slate-500 bg-opacity-10 rounded">
<div class="flex flex-wrap items-center justify-between mx-auto">
<button
phx-click={JS.toggle(to: "#navbar")}
type="button"
class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden focus:outline-none"
aria-controls="navbar"
aria-expanded="false"
>
<svg
class="w-6 h-6"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
<nav class="relative">
<button
phx-click={JS.toggle(to: "#navbar")}
type="button"
class="absolute right-2 p-2 ml-3 text-sm text-gray-500 rounded-lg focus:outline-none"
aria-controls="navbar"
aria-expanded="false"
>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
>
</path>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar">
<ul class="flex flex-col p-4 rounded-lg md:flex-row md:mt-0 md:text-sm md:font-medium">
<%= render_slot(@inner_block) %>
</ul>
</div>
</path>
</svg>
</button>
<div class="hidden w-full bg-slate-500 bg-opacity-10" id="navbar">
<ul class="flex flex-col p-4 rounded-lg md:flex-row md:mt-0 md:text-sm md:font-medium">
<%= render_slot(@inner_block) %>
</ul>
<ul class="text-right ml-auto mr-2 py-2">
<%= if @current_user do %>
Expand Down Expand Up @@ -532,8 +528,8 @@ defmodule AccumulatorWeb.CoreComponents do
@doc """
Navbar link
"""
attr :to, :string, required: true
attr :label, :string, required: true
attr(:to, :string, required: true)
attr(:label, :string, required: true)

def navbar_link(assigns) do
~H"""
Expand Down

0 comments on commit 47dc03c

Please sign in to comment.