More things

frontend/app/components/Container.vue

@@ -20,7 +20,7 @@
 <style lang="scss" scoped>
 .tui-frame {
   position: relative;
-  margin: 15px;
+  margin: var(--container-margin, 15px);
   background: var(--color-background-fore);
   box-shadow: 4px -4px 0px 0px var(--color-container-shadow);
 }

frontend/app/components/Footer.vue

@@ -16,6 +16,7 @@
     flex-direction: column;
     justify-content: center;
     margin-top: 60px;
+    margin-bottom: 60px;
 }
 
 span {

frontend/app/components/layouts/AdminLayout.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import AdminSidebar from '~/components/parts/AdminSidebar.vue';
+</script>
+
+<template>
+  <div class="admin-shell">
+    <AdminSidebar />
+    <main class="admin-main">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.admin-shell {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  background: var(--color-background);
+}
+
+.admin-main {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-main :slotted(*) {
+  flex: 1;
+}
+
+@media screen and (max-width: 900px) {
+  .admin-shell {
+    flex-direction: column;
+  }
+}
+</style>

frontend/app/components/parts/AdminSidebar.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+const auth = useAuth()
+const route = useRoute()
+const localePath = useLocalePath()
+
+const orderCount = useState<number | null>('admin-order-count', () => null)
+
+const navItems = [
+  { key: 'dashboard', to: '/admin', label: 'admin.sidebar.nav_dashboard' },
+  { key: 'orders', to: '/admin/orders', label: 'admin.sidebar.nav_orders' }
+]
+
+const isActive = (key: string) =>
+  key === 'dashboard'
+    ? route.path === '/admin' || route.path === '/admin/'
+    : route.path.startsWith('/admin/orders')
+
+const onLogout = () => {
+  auth.logout()
+  navigateTo('/admin/login')
+}
+</script>
+
+<template>
+  <aside class="admin-sidebar">
+    <div class="sidebar-head">
+      <span class="sidebar-title">{{ $t('admin.sidebar.title') }}</span>
+    </div>
+
+    <span class="sidebar-rule" aria-hidden="true">══════════════════</span>
+
+    <nav class="sidebar-nav">
+      <NuxtLink
+        v-for="item in navItems"
+        :key="item.key"
+        :to="item.to"
+        class="nav-item"
+        :class="{ 'nav-item-active': isActive(item.key) }"
+      >
+        <span class="nav-sep" aria-hidden="true">{{ item.key === 'dashboard' ? '▸' : '├' }}</span>
+        <span class="nav-label">{{ $t(item.label) }}</span>
+        <span v-if="item.key === 'orders' && orderCount !== null" class="nav-badge">[{{ orderCount }}]</span>
+      </NuxtLink>
+    </nav>
+
+    <div class="sidebar-bottom">
+      <span class="sidebar-rule" aria-hidden="true">══════════════════</span>
+      <NuxtLink :to="localePath('index')" class="nav-item nav-item-site">
+        <span class="nav-sep" aria-hidden="true">←</span>
+        <span class="nav-label">{{ $t('admin.sidebar.back_site') }}</span>
+      </NuxtLink>
+      <button class="sidebar-logout" @click="onLogout">&gt;_ {{ $t('admin.dashboard.logout') }}</button>
+    </div>
+  </aside>
+</template>
+
+<style lang="scss" scoped>
+.admin-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  flex-shrink: 0;
+  padding: 16px 12px;
+  background: var(--color-background-fore);
+  border-right: 1px solid var(--color-border-color);
+  box-shadow: inset -2px 0 0 0 var(--color-container-shadow);
+}
+
+.sidebar-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 0 6px 8px;
+}
+
+.sidebar-title {
+  font-family: 'Hurmit', monospace;
+  font-size: 1rem;
+  letter-spacing: 2px;
+  color: var(--color-text);
+}
+
+.sidebar-rule {
+  display: block;
+  font-family: 'Hurmit', monospace;
+  font-size: 8px;
+  line-height: 1;
+  color: var(--color-border-color);
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 4px 0 12px;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  font-family: 'Hurmit', monospace;
+  font-size: 0.85rem;
+  color: var(--color-text);
+  text-decoration: none;
+  text-shadow: none;
+  border: 1px solid transparent;
+  transition: all 120ms steps(3);
+
+  .nav-sep {
+    color: var(--color-text);
+    opacity: 0.35;
+    font-size: 0.75rem;
+  }
+
+  &:hover {
+    background-color: var(--color-hover);
+    border-color: var(--color-border-color);
+
+    .nav-sep {
+      color: var(--color-link);
+      opacity: 1;
+    }
+  }
+}
+
+.nav-item-active {
+  color: var(--color-link);
+  border-color: var(--color-link);
+
+  .nav-sep,
+  .nav-badge {
+    color: var(--color-link);
+    opacity: 1;
+  }
+}
+
+.nav-badge {
+  margin-left: auto;
+  font-size: 0.72rem;
+  color: var(--color-link);
+  opacity: 0.7;
+}
+
+.sidebar-bottom {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-logout {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.85rem;
+  color: var(--color-text);
+  background: transparent;
+  border: 1px solid var(--color-border-color);
+  padding: 6px 14px;
+  margin-top: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition: all 120ms steps(3);
+
+  &:hover {
+    color: var(--color-link);
+    border-color: var(--color-link);
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .admin-sidebar {
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    border-right: none;
+    border-bottom: 1px solid var(--color-border-color);
+    box-shadow: inset 0 -2px 0 0 var(--color-container-shadow);
+  }
+
+  .sidebar-head {
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .sidebar-rule {
+    display: none;
+  }
+
+  .sidebar-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .sidebar-bottom {
+    margin-top: 0;
+    margin-left: auto;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .sidebar-logout {
+    margin-top: 0;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .nav-item {
+    font-size: 0.75rem;
+    padding: 4px 8px;
+  }
+
+  .sidebar-logout {
+    font-size: 0.75rem;
+    padding: 4px 10px;
+  }
+}
+</style>

frontend/app/components/parts/StickyHeader.vue

@@ -89,6 +89,13 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll));
         transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.3s ease;
 
+    // Below 900px the full header is hidden, so keep the bar always shown.
+    @media screen and (max-width: 900px) {
+        transform: translateY(0);
+        opacity: 1;
+        pointer-events: auto;
+    }
+
     &.visible {
         transform: translateY(0);
         opacity: 1;

frontend/app/components/parts/TableHeader.vue

@@ -120,7 +120,7 @@ const preloadImages = (imageArray) => {
 <style lang="scss" scoped>
 .header {
     position: relative;
-    margin-top: 30px;
+    margin-top: 42px;
     user-select: none;
     display: flex;
     justify-content: space-between;
@@ -129,6 +129,10 @@ const preloadImages = (imageArray) => {
         flex-direction: column;
         gap: 8px;
     }
+
+    @media screen and (max-width: 900px) {
+        display: none;
+    }
 }
 
 .header-container {
@@ -139,6 +143,12 @@ const preloadImages = (imageArray) => {
             margin-top: 20px;
         }
     }
+
+    &.right {
+        :deep(.site-options) {
+            margin-top: 12px;
+        }
+    }
 }
 
 .undertable-wrapper {
@@ -153,16 +163,8 @@ const preloadImages = (imageArray) => {
         margin-top: -340px;
     }
 
-    @media screen and (max-width: 900px) and (min-width: 600px) {
-        margin-top: -240px;
-    }
-
-    @media screen and (max-width: 600px) {
-        margin-top: -300px;
-    }
-
-    @media screen and (max-width: 480px) {
-        margin-top: -340px;
+    @media screen and (max-width: 900px) {
+        display: none;
     }
 }