fix: Parts.Sidebar create bottom navigation for small screens (#744)

coingaming · Oct 12, 2023 · 0d28428 · 0d28428
1 parent a9f64ae
commit 0d28428
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 36 deletions.
diff --git a/lib/moon/parts/sidebar/bottom_navigation.ex b/lib/moon/parts/sidebar/bottom_navigation.ex
@@ -0,0 +1,65 @@
+defmodule Moon.Parts.Sidebar.BottomNavigation do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  alias Moon.Icon
+  alias Moon.Design.Chip
+
+  @doc "Id attribute for DOM element"
+  prop(id, :string)
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Additional Tailwind classes"
+  prop(class, :css_class)
+  @doc "Additional Tailwind classes"
+  prop(button_class, :css_class)
+  @doc "Additional Tailwind classes"
+  prop(logo_class, :css_class)
+  @doc "Additional Tailwind classes"
+  prop(icon_class, :css_class)
+  @doc "Source of the svg"
+  prop(src, :string, required: true)
+  @doc "Icon name"
+  prop(icon, :string)
+  @doc "Href attribute for Logo"
+  prop(href, :string)
+  @doc "On click event to open sidebar"
+  prop(on_click, :event)
+
+  def render(assigns) do
+    ~F"""
+    <div
+      {=@id}
+      data-testid={@testid}
+      class={merge([
+        "fixed bottom-12 z-[9999] justify-center lg:hidden items-center left-1/2 transform -translate-x-1/2 bg-bulma rounded-full flex flex-row p-1 gap-0 h-14 w-[6.5rem]",
+        @class
+      ])}
+    >
+      <a href={@href}>
+        <Chip class={merge([
+          "bg-transparent h-12 w-12 px-2 py-2 justify-center items-center rounded-moon-i-xx rounded-full",
+          @button_class
+        ])}>
+          <svg class={merge([
+            "moon-logo h-8 w-8 text-goku hover:text-goku active:text-goku focus:text-goku",
+            @logo_class
+          ])}>
+            <use href={@src} />
+          </svg>
+        </Chip>
+      </a>
+      <Chip
+        class={merge([
+          "bg-transparent h-12 w-12 px-2 py-2 justify-center items-center rounded-moon-i-xx rounded-full",
+          @button_class
+        ])}
+        {=@on_click}
+      >
+        <Icon name={@icon || "generic_menu"} class={merge(["text-moon-24 text-goku", @icon_class])} />
+      </Chip>
+    </div>
+    """
+  end
+end
diff --git a/lib/moon_web/examples/parts/sidebar_example/generic.ex b/lib/moon_web/examples/parts/sidebar_example/generic.ex
@@ -5,7 +5,6 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Generic do
   use MoonWeb, :example
 
   alias Moon.Parts.Sidebar
-  alias Moon.Design.Button
   alias Moon.Icon
 
   prop(active_page, :any)
@@ -14,7 +13,11 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Generic do
   def render(assigns) do
     ~F"""
     <div>
-      <Button left_icon="generic_menu" variant="outline" on_click="open_sidebar">Open Generic Sidebar on small screens</Button>
+      <Sidebar.BottomNavigation
+        src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item"
+        href="#"
+        on_click="open_sidebar"
+      />
       <Sidebar id="generic_sidebar">
         <Sidebar.Logo src="/moon/assets/svgs/moon_web/large_logo.svg#item" />
         <Sidebar.Section>
@@ -52,39 +55,44 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Generic do
   def code() do
     """
     alias Moon.Parts.Sidebar
-    alias Moon.Design.Button
     alias Moon.Icon
 
     prop(menu_items, :list, default: MoonWeb.Schema.Link.menu())
 
     def render(assigns) do
       ~F\"""
-      <Button left_icon="generic_menu" variant="outline" on_click="open_sidebar">Open Generic Sidebar on small screens</Button>
-      <Sidebar id="generic_sidebar">
-        <Sidebar.Logo src="/moon/assets/svgs/moon_web/large_logo.svg#item" />
-        <Sidebar.Section>
-          <Sidebar.SectionTitle>Section title • 1</Sidebar.SectionTitle>
-          <div class="flex flex-col gap-1">
-            {#for menu_item <- @menu_items, menu_item[:icon] != nil}
-              <Sidebar.MenuLink route={menu_item[:page]}><Icon class="w-6 h-6" name={menu_item[:icon]} />{menu_item[:key]}</Sidebar.MenuLink>
+      <div>
+        <Sidebar.BottomNavigation
+          src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item"
+          href="#"
+          on_click="open_sidebar"
+        />
+        <Sidebar id="generic_sidebar">
+          <Sidebar.Logo src="/moon/assets/svgs/moon_web/large_logo.svg#item" />
+          <Sidebar.Section>
+            <Sidebar.SectionTitle>Section 1 • Generic</Sidebar.SectionTitle>
+            <div class="flex flex-col gap-1">
+              {#for menu_item <- @menu_items, menu_item[:icon] != nil}
+                <Sidebar.MenuLink route={menu_item[:page]}><Icon class="w-6 h-6" name={menu_item[:icon]} />{menu_item[:key]}</Sidebar.MenuLink>
+              {/for}
+            </div>
+          </Sidebar.Section>
+          <Sidebar.Section>
+            <Sidebar.SectionTitle>Section 2 • Components</Sidebar.SectionTitle>
+            {#for menu_item <- @menu_items, menu_item[:icon] == nil}
+              {#if menu_item[:children]}
+                <Sidebar.Accordion id={"sidebar-#\{menu_item[:key]}"} accordion_header={menu_item[:key]}>
+                  {#for child_menu_item <- menu_item[:children]}
+                    <Sidebar.MenuLink route={child_menu_item[:page]}>{child_menu_item[:key]}</Sidebar.MenuLink>
+                  {/for}
+                </Sidebar.Accordion>
+              {#else}
+                <Sidebar.MenuLink route={menu_item[:page]}>{menu_item[:key]}</Sidebar.MenuLink>
+              {/if}
             {/for}
-          </div>
-        </Sidebar.Section>
-        <Sidebar.Section>
-          <Sidebar.SectionTitle>Section title • 2</Sidebar.SectionTitle>
-          {#for menu_item <- @menu_items, menu_item[:icon] == nil}
-            {#if menu_item[:children]}
-              <Sidebar.Accordion id={"sidebar-#\{menu_item[:key]}"} accordion_header={menu_item[:key]}>
-                {#for child_menu_item <- menu_item[:children]}
-                  <Sidebar.MenuLink route={menu_item[:page]}>{child_menu_item[:key]}</Sidebar.MenuLink>
-                {/for}
-              </Sidebar.Accordion>
-            {#else}
-              <Sidebar.MenuLink route={menu_item[:page]}>{menu_item[:key]}</Sidebar.MenuLink>
-            {/if}
-          {/for}
-        </Sidebar.Section>
-      </Sidebar>
+          </Sidebar.Section>
+        </Sidebar>
+      </div>
       \"""
     end
 

diff --git a/lib/moon_web/examples/parts/sidebar_example/slim.ex b/lib/moon_web/examples/parts/sidebar_example/slim.ex
@@ -4,7 +4,6 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Slim do
   use Moon.StatefulComponent
   use MoonWeb, :example
 
-  alias Moon.Design.Button
   alias Moon.Design.Avatar
   alias Moon.Parts.Sidebar
 
@@ -13,7 +12,11 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Slim do
   def render(assigns) do
     ~F"""
     <div>
-      <Button left_icon="generic_menu" variant="outline" on_click="open_sidebar">Open Slim Sidebar on small screens</Button>
+      <Sidebar.BottomNavigation
+        src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item"
+        href="#"
+        on_click="open_sidebar"
+      />
       <Sidebar.Slim id="slim_sidebar" links={Enum.filter(@menu_items, &(&1[:icon] != nil))}>
         <Sidebar.SlimLogo src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item" />
         <:bottom>
@@ -32,7 +35,6 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Slim do
 
   def code() do
     """
-    alias Moon.Design.Button
     alias Moon.Design.Avatar
     alias Moon.Parts.Sidebar
 
@@ -41,7 +43,11 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Slim do
     def render(assigns) do
       ~F\"""
       <div>
-        <Button left_icon="generic_menu" variant="outline" on_click="open_sidebar">Open Slim Sidebar on small screens</Button>
+        <Sidebar.BottomNavigation
+          src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item"
+          href="#"
+          on_click="open_sidebar"
+        />
         <Sidebar.Slim id="slim_sidebar" links={Enum.filter(@menu_items, &(&1[:icon] != nil))}>
           <Sidebar.SlimLogo src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item" />
           <:bottom>

diff --git a/lib/moon_web/examples/parts/sidebar_example/wide.ex b/lib/moon_web/examples/parts/sidebar_example/wide.ex
@@ -4,7 +4,6 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Wide do
   use Moon.StatefulComponent
   use MoonWeb, :example
 
-  alias Moon.Design.Button
   alias Moon.Design.Avatar
   alias Moon.Parts.Sidebar
 
@@ -14,7 +13,11 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Wide do
   def render(assigns) do
     ~F"""
     <div>
-      <Button left_icon="generic_menu" variant="outline" on_click="open_sidebar">Open Wide Sidebar on small screens</Button>
+      <Sidebar.BottomNavigation
+        src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item"
+        href="#"
+        on_click="open_sidebar"
+      />
       <Sidebar.Wide id="wide_sidebar">
         <Sidebar.SlimLogo src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item" />
         <:slim_top>
@@ -59,7 +62,6 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Wide do
   def code() do
     """
     alias Moon.Design.Button
-    alias Moon.Design.Avatar
     alias Moon.Parts.Sidebar
 
     prop(active_page, :any)
@@ -68,7 +70,11 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Wide do
     def render(assigns) do
       ~F\"""
       <div>
-        <Button left_icon="generic_menu" variant="outline" on_click="open_sidebar">Open Wide Sidebar on small screens</Button>
+        <Sidebar.BottomNavigation
+          src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item"
+          href="#"
+          on_click="open_sidebar"
+        />
         <Sidebar.Wide id="wide_sidebar">
           <Sidebar.SlimLogo src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item" />
           <:slim_top>

diff --git a/lib/moon_web/pages/parts/generic_sidebar_page.ex b/lib/moon_web/pages/parts/generic_sidebar_page.ex
@@ -39,6 +39,7 @@ defmodule MoonWeb.Pages.Parts.GenericSidebarPage do
       ]} />
 
       <PropsTable module={Moon.Parts.Sidebar} />
+      <PropsTable module={Moon.Parts.Sidebar.BottomNavigation} />
       <PropsTable module={Moon.Parts.Sidebar.Logo} />
       <PropsTable module={Moon.Parts.Sidebar.Section} />
       <PropsTable module={Moon.Parts.Sidebar.Accordion} />