start on nav, wip
This commit is contained in:
parent
72cdc58f46
commit
03c40fd31c
|
|
@ -7,6 +7,53 @@
|
|||
= csrf_meta_tags
|
||||
= csp_meta_tag
|
||||
= stylesheet_link_tag "application"
|
||||
= javascript_include_tag "application", defer: true
|
||||
= stylesheet_link_tag "tailwind"
|
||||
= javascript_importmap_tags
|
||||
%body
|
||||
%nav.relative.w-full.flex.flex-wrap.items-center.justify-between.py-4.bg-gray-100.text-gray-500.shadow-lg.navbar.navbar-expand-lg.navbar-light.hover:text-gray-700.focus:text-gray-700
|
||||
.container-fluid.w-full.flex.flex-wrap.items-center.justify-between.px-6
|
||||
%button.navbar-toggler.text-gray-500.border-0.hover:shadow-none.hover:no-underline.py-2.bg-transparent.focus:outline-none.focus:ring-0.focus:shadow-none.focus:no-underline{"aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", :class => "px-2.5", "data-bs-target" => "#navbarSupportedContent", "data-bs-toggle" => "collapse", :type => "button"}
|
||||
%svg.w-6{"aria-hidden" => "true", "data-icon" => "bars", "data-prefix" => "fas", :focusable => "false", :role => "img", :viewbox => "0 0 448 512", :xmlns => "http://www.w3.org/2000/svg"}
|
||||
%path{:d => "M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z", :fill => "currentColor"}
|
||||
#navbarSupportedContent.collapse.navbar-collapse.flex-grow.items-center
|
||||
%a.flex.items-center.text-gray-900.hover:text-gray-900.focus:text-gray-900.mt-2.lg:mt-0.mr-1{:href => "#"}
|
||||
%img{:alt => "", :loading => "lazy", :src => "https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png", :style => "height: 15px"}/
|
||||
/ Left links
|
||||
%ul.navbar-nav.flex.flex-col.pl-0.list-style-none.mr-auto
|
||||
%li.nav-item.p-2
|
||||
%a.nav-link.text-gray-500.hover:text-gray-700.focus:text-gray-700.p-0{:href => "#"} Dashboard
|
||||
%li.nav-item.p-2
|
||||
%a.nav-link.text-gray-500.hover:text-gray-700.focus:text-gray-700.p-0{:href => "#"} Team
|
||||
%li.nav-item.p-2
|
||||
%a.nav-link.text-gray-500.hover:text-gray-700.focus:text-gray-700.p-0{:href => "#"} Projects
|
||||
/ Left links
|
||||
/ Collapsible wrapper
|
||||
/ Right elements
|
||||
.flex.items-center.relative
|
||||
/ Icon
|
||||
%a.text-gray-500.hover:text-gray-700.focus:text-gray-700.mr-4{:href => "#"}
|
||||
%svg.w-4{"aria-hidden" => "true", "data-icon" => "shopping-cart", "data-prefix" => "fas", :focusable => "false", :role => "img", :viewbox => "0 0 576 512", :xmlns => "http://www.w3.org/2000/svg"}
|
||||
%path{:d => "M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z", :fill => "currentColor"}
|
||||
.dropdown.relative
|
||||
%a#dropdownMenuButton1.text-gray-500.hover:text-gray-700.focus:text-gray-700.mr-4.dropdown-toggle.hidden-arrow.flex.items-center{"aria-expanded" => "false", "data-bs-toggle" => "dropdown", :href => "#", :role => "button"}
|
||||
%svg.w-4{"aria-hidden" => "true", "data-icon" => "bell", "data-prefix" => "fas", :focusable => "false", :role => "img", :viewbox => "0 0 448 512", :xmlns => "http://www.w3.org/2000/svg"}
|
||||
%path{:d => "M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z", :fill => "currentColor"}
|
||||
%span.text-white.bg-red-700.absolute.rounded-full.text-xs.ml-2.py-0{:class => "-mt-2.5 px-1.5"} 1
|
||||
%ul.dropdown-menu.min-w-max.absolute.hidden.bg-white.text-base.z-50.float-left.py-2.list-none.text-left.rounded-lg.shadow-lg.mt-1.hidden.m-0.bg-clip-padding.border-none.left-auto.right-0{"aria-labelledby" => "dropdownMenuButton1"}
|
||||
%li
|
||||
%a.dropdown-item.text-sm.py-2.px-4.font-normal.block.w-full.whitespace-nowrap.bg-transparent.text-gray-700.hover:bg-gray-100{:href => "#"} Action
|
||||
%li
|
||||
%a.dropdown-item.text-sm.py-2.px-4.font-normal.block.w-full.whitespace-nowrap.bg-transparent.text-gray-700.hover:bg-gray-100{:href => "#"} Another action
|
||||
%li
|
||||
%a.dropdown-item.text-sm.py-2.px-4.font-normal.block.w-full.whitespace-nowrap.bg-transparent.text-gray-700.hover:bg-gray-100{:href => "#"} Something else here
|
||||
.dropdown.relative
|
||||
%a#dropdownMenuButton2.dropdown-toggle.flex.items-center.hidden-arrow{"aria-expanded" => "false", "data-bs-toggle" => "dropdown", :href => "#", :role => "button"}
|
||||
%img.rounded-full{:alt => "", :loading => "lazy", :src => "https://mdbootstrap.com/img/new/avatars/2.jpg", :style => "height: 25px; width: 25px"}/
|
||||
%ul.dropdown-menu.min-w-max.absolute.hidden.bg-white.text-base.z-50.float-left.py-2.list-none.text-left.rounded-lg.shadow-lg.mt-1.hidden.m-0.bg-clip-padding.border-none.left-auto.right-0{"aria-labelledby" => "dropdownMenuButton2"}
|
||||
%li
|
||||
%a.dropdown-item.text-sm.py-2.px-4.font-normal.block.w-full.whitespace-nowrap.bg-transparent.text-gray-700.hover:bg-gray-100{:href => "#"} Action
|
||||
%li
|
||||
%a.dropdown-item.text-sm.py-2.px-4.font-normal.block.w-full.whitespace-nowrap.bg-transparent.text-gray-700.hover:bg-gray-100{:href => "#"} Another action
|
||||
%li
|
||||
%a.dropdown-item.text-sm.py-2.px-4.font-normal.block.w-full.whitespace-nowrap.bg-transparent.text-gray-700.hover:bg-gray-100{:href => "#"} Something else here
|
||||
= yield
|
||||
|
|
|
|||
|
|
@ -2,16 +2,3 @@
|
|||
|
||||
%p
|
||||
Gateway to what? And so you may well ask . . .
|
||||
|
||||
.card.w-96.bg-base-100.shadow-xl
|
||||
.card-body
|
||||
%h2.card-title Shoes!
|
||||
%p If a dog chews shoes whose shoes does he choose?
|
||||
%figure
|
||||
%img{:alt => "Shoes", :src => "https://api.lorem.space/image/shoes?w=400&h=225"}/
|
||||
.card.w-96.bg-base-100.shadow-xl
|
||||
.card-body
|
||||
%h2.card-title Shoes!
|
||||
%p If a dog chews shoes whose shoes does he choose?
|
||||
%figure
|
||||
%img{:alt => "Shoes", :src => "https://api.lorem.space/image/shoes?w=400&h=225"}/
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
# Pin npm packages by running ./bin/importmap
|
||||
|
||||
pin "application", preload: true
|
||||
pin "tw-elements" , preload: true # @1.0.0
|
||||
|
|
|
|||
|
|
@ -11,6 +11,5 @@ module.exports = {
|
|||
}
|
||||
},
|
||||
plugins: [
|
||||
require('daisyui')
|
||||
],
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue