Company listing, authentication, and page error handling are all working

2026-02-17 17:29:17 -06:00
parent 6d046e90ed
commit 8e225aa254
23 changed files with 2086 additions and 342 deletions
@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { optima } from "$lib";
+  import { page } from "$app/stores";
+
+  const navItems = [
+    {
+      href: "/",
+      label: "Home",
+      icon: '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>',
+      exact: true,
+    },
+    {
+      href: "/companies",
+      label: "Companies",
+      icon: '<path d="M3 21h18"></path><path d="M5 21V7l8-4v18"></path><path d="M19 21V11l-6-4"></path><path d="M9 9h1"></path><path d="M9 13h1"></path><path d="M9 17h1"></path>',
+    },
+  ];
+
+  const adminNavItem = {
+    href: "/admin",
+    label: "Admin",
+    icon: '<path d="M12 15v2m-6 4h12a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm10-10V7a4 4 0 0 0-8 0v4h8z"></path>',
+  };
+
+  $: canViewAdmin = $page.data?.canViewAdmin === true;
+
+  function isActive(pathname: string, item: (typeof navItems)[0]) {
+    return item.exact ? pathname === item.href : pathname.startsWith(item.href);
+  }
+</script>
+
+{#if $page.route.id?.startsWith("/(auth)")}
+  <slot />
+{:else}
+  <div class="layout-container">
+    <header class="header">
+      <div class="header-content">
+        <h1>Project Optima</h1>
+      </div>
+    </header>
+
+    <div class="layout-wrapper">
+      <aside class="sidebar">
+        <nav class="sidebar-nav">
+          {#each navItems as item}
+            <a
+              href={item.href}
+              class="nav-item {isActive($page.url.pathname, item)
+                ? 'active'
+                : ''}"
+              title={item.label}
+            >
+              <svg
+                class="nav-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                {@html item.icon}
+              </svg>
+              <span class="nav-label">{item.label}</span>
+            </a>
+          {/each}
+
+          {#if canViewAdmin}
+            <hr class="nav-divider" />
+            <a
+              href={adminNavItem.href}
+              class="nav-item {$page.url.pathname.startsWith('/admin')
+                ? 'active'
+                : ''}"
+              title={adminNavItem.label}
+            >
+              <svg
+                class="nav-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                {@html adminNavItem.icon}
+              </svg>
+              <span class="nav-label">{adminNavItem.label}</span>
+            </a>
+          {/if}
+        </nav>
+      </aside>
+
+      <div class="content-area">
+        <div class="accent-bar"></div>
+        <main class="main-content">
+          <slot />
+        </main>
+      </div>
+    </div>
+
+    <footer class="footer">
+      <small>&copy; {new Date().getFullYear()} Total Tech Solutions, LLC</small>
+    </footer>
+  </div>
+{/if}