Anchor ViewComponents

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<div class="flex h-dvh overflow-hidden" data-controller="toggle" data-toggle-toggle-class="side-nav-open" data-toggle-initial-label-value="Hide nav" data-toggle-intermediate-label-value="Show nav">
<header class="flex shrink-0 w-[15rem] relative in-[.side-nav-open]:w-[3.5rem] transition-[width] duration-500" data-testid="side-nav">
  <div class="bg-brand-sea text-white w-[15rem] flex flex-col divide-y divide-solid divide-white/10 duration-500 absolute inset-y-0 right-0">
    <div class="flex-none flex items-center justify-between p-6 in-[.side-nav-open]:px-4 transition-[padding] duration-500">
      <div data-toggle-target="inertify" class="buoy-logo w-12">
        <div class="w-fit max-w-full h-fit aspect-72/58">
          <svg xmlns="http://www.w3.org/2000/svg" width="72" height="58" viewbox="0 0 72 58" class="max-w-full max-h-full text-white">
            <title>Buoy Software</title>
            <g fill="currentColor" fill-rule="nonzero">
              <path d="M38.434 35.33c-1.126-3.437-4.577-5.138-8.66-5.138h-9.3v15.409h9.3c4.999 0 9.05-2.542 9.05-7.705 0-.119-.012-.229-.017-.344.003-.088.018-.172.018-.262 0-.72-.139-1.375-.39-1.963v.002ZM29.773 12.36h-9.3v15.408h9.3c4.086 0 7.535-1.698 8.661-5.137.252-.587.39-1.24.39-1.96 0-.09-.012-.175-.017-.263.003-.115.018-.225.018-.343 0-5.162-4.052-7.705-9.052-7.705Z"></path>
              <path d="M72 0H0v57.962h72l-16.534-28.98L72 0ZM48.205 42.658a13.763 13.763 0 0 1-10.92 5.369H9.237V9.934h28.048c4.227 0 8.013 1.903 10.54 4.897 3.145 3.726 2.861 9.256-.56 12.73l-1.399 1.42 1.41 1.433c3.259 3.308 3.766 8.569.93 12.244Z"></path>
            </g>
          </svg>
        </div>
      </div>
      <button data-action="click->toggle#toggle" data-testid="toggle-btn" type="button">
        <span class="sr-only" data-toggle-target="label">Hide nav</span>
        <!-- Source: Iconoir, added via `bin/add_icon` -->
        <svg width="24" height="24" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 opacity-60 in-[.side-nav-open]:rotate-180 transition-transform duration-500" aria-hidden="true">
          <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M16.5 8.5L13 12L16.5 15.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M10.5 8.5L7 12L10.5 15.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button></div>
    <nav aria-label="Apps" class="flex-none in-[.side-nav-open]:opacity-0 transition duration-500" data-toggle-target="inertify">
      <div class="contents" data-controller="popover">
        <button type="button" class="btn-with-ending-icon btn-full-width btn btn-text text-lg text-white w-full hover:text-white hover:bg-white/[.05] px-6 justify-between rounded-none" data-testid="medical-device-button" data-popover-target="button" popovertarget="action-menu-component-0a0aacde-6971-4339-879f-12954f89e9b6">
          Medical Device
          <!-- Source: Iconoir, added via `bin/add_icon` -->
          <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-ending-icon">
            <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block px-0 py-1 border border-subdued shadow-sm py-4" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="action-menu" id="action-menu-component-0a0aacde-6971-4339-879f-12954f89e9b6" menu_options="class ml-4 w-[198px]">
          <ul>
            <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide"><a class="block w-full" href="#">Centers</a></li>
            <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide"><a class="block w-full" href="#">Corporate</a></li>
            <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide"><a class="block w-full" href="#">Medical Device</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <nav aria-label="Main Menu" class="flex-initial py-4 overflow-y-auto in-[.side-nav-open]:opacity-0 transition duration-500" data-testid="side-nav-items" data-toggle-target="inertify">
      <ul>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold bg-white/10" data-testid="side-nav-item" aria-current="page" href="#">
            Case Review
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Casing & Shipping
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Daily Schedule
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Donor Floor
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Donor Qualification
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Donors
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Employees
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Equipment
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Physicals
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Processing
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Quality Control
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Reception
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Reports
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Station Installation
          </a>              </li>
        <li>
          <a class="block px-6 py-2 hover:bg-white/[.05] text-base font-semibold" data-testid="side-nav-item" href="#">
            Test Results
          </a>              </li>
      </ul>
    </nav>
    <footer class="flex-none mt-auto in-[.side-nav-open]:opacity-0 transition duration-500 p-6" data-testid="side-nav-footer" data-toggle-target="inertify" role="none">
      <p class="text-base font-semibold">John D.</p>
      <div class="mt-2">
        <a class="text-base text-white/60 underline" href="#">About Device</a>
      </div>
    </footer>
  </div>
</header>
<main class="flex-auto overflow-y-auto">
  Main content
</main></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<% nav_items = [
    "Case Review",
    "Casing & Shipping",
    "Daily Schedule",
    "Donor Floor",
    "Donor Qualification",
    "Donors",
    "Employees",
    "Equipment",
    "Physicals",
    "Processing",
    "Quality Control",
    "Reception",
    "Reports",
    "Station Installation",
    "Test Results",
  ].map.with_index { |label, index| {label:, path: "#", active: index == 0} }
  apps = [
    {
      label: "Centers",
      path: "#"
    },
    {
      label: "Corporate",
      path: "#"
    },
    {
      label: "Medical Device",
      path: "#"
    }
  ]
%>
<%= anchor_side_nav(
  employee_name: 'John D.',
  nav_items:,
  apps:,
  apps_button_text: "Medical Device",
) do |c| %>
  <% c.with_footer_links do %>
    <%= link_to "About Device", "#", class: "text-base text-white/60 underline" %>
  <% end %>
  <% c.with_main_content do %>
    Main content
  <% end %>
<% end %>

No notes provided.

No params configured.