First UI Pass (#15)

* Added scratchpad dir

* Installed Alpine

* [WIP] began integrating Tailwind and accompanying theme

* [WIP] Set up basic views for sources

* Adds new UI to media profiles page

* Removes unneeded view

lib/pinchflat_web/components/layouts/app.html.heex

@@ -1,32 +1,13 @@
-<header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
-    <div class="flex items-center gap-4">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
-      </p>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
+<div class="flex h-screen overflow-hidden">
+  <.sidebar />
+
+  <div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
+    <.header />
+    <main>
+      <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
+        <.flash_group flash={@flash} />
+        <%= @inner_content %>
+      </div>
+    </main>
   </div>
-</header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
-    <.flash_group flash={@flash} />
-    <%= @inner_content %>
-  </div>
-</main>
+</div>

lib/pinchflat_web/components/layouts/partials/header.html.heex

@@ -0,0 +1,29 @@
+<header class="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
+  <div class="flex flex-grow items-center justify-end px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+    <div class="flex items-center gap-2 sm:gap-4 lg:hidden">
+      <button
+        class="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
+        @click.stop="sidebarToggle = !sidebarToggle"
+      >
+        <.icon name="hero-bars-3" />
+      </button>
+      <a class="block flex-shrink-0 lg:hidden" href="#">
+        <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+      </a>
+    </div>
+    <div class="hidden sm:block bg-meta-4 rounded-md">
+      <%!-- Aspirational (for now) --%>
+      <div class="relative">
+        <span class="absolute left-2 top-1/2 -translate-y-1/2 flex">
+          <.icon name="hero-magnifying-glass" />
+        </span>
+
+        <input
+          type="text"
+          placeholder="Type to search..."
+          class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none xl:w-125"
+        />
+      </div>
+    </div>
+  </div>
+</header>

lib/pinchflat_web/components/layouts/partials/sidebar.html.heex

@@ -0,0 +1,29 @@
+<aside
+  x-bind:class="sidebarToggle ? 'translate-x-0' : '-translate-x-full'"
+  class="absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0"
+  @click.outside="sidebarToggle = false"
+>
+  <div class="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
+    <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+
+    <button class="block lg:hidden" @click.stop="sidebarToggle = !sidebarToggle">
+      <.icon name="hero-arrow-left" class="fill-current" />
+    </button>
+  </div>
+  <div class="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
+    <nav class="mt-5 px-4 py-4 lg:mt-9 lg:px-6">
+      <div>
+        <h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">MENU</h3>
+        <ul class="mb-6 flex flex-col gap-1.5">
+          <.sidebar_item icon="hero-tv" text="Sources" navigate={~p"/sources"} />
+
+          <.sidebar_item
+            icon="hero-adjustments-vertical"
+            text="Media Profiles"
+            navigate={~p"/media_profiles"}
+          />
+        </ul>
+      </div>
+    </nav>
+  </div>
+</aside>

lib/pinchflat_web/components/layouts/root.html.heex

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="[scrollbar-gutter:stable]">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -11,7 +11,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white antialiased">
+  <body x-data="{ 'sidebarToggle': false }" class="dark text-bodydark bg-boxdark-2">
     <%= @inner_content %>
   </body>
 </html>