start menu

package.json

@@ -11,6 +11,7 @@
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/postcss": "^4.0.0",
+        "@vitejs/plugin-legacy": "^6.0.1",
         "alpinejs": "^3.4.2",
         "axios": "^1.7.4",
         "concurrently": "^9.0.1",
@@ -21,6 +22,7 @@
         "prettier-plugin-blade": "^2.1.19",
         "prettier-plugin-tailwindcss": "^0.6.11",
         "tailwindcss": "^4.0.7",
+        "terser": "^5.39.0",
         "vite": "^6.0.11"
     }
 }

resources/css/app.css

@@ -41,12 +41,19 @@ @layer base {
         background-image: url("../images/bg.jpg");
         background-size: cover;
         background-color: #e1c0b9;
+        height: 100vh;
+        width: 100vw;
     }
 
     body {
         margin-left: 20px;
         margin-top: 20px;
     }
+
+    /*  For Alpine.js  */
+    [x-cloak] {
+        display: none !important;
+    }
 }
 
 @layer components {
@@ -65,4 +72,69 @@ @layer components {
     button {
         cursor: pointer;
     }
+
+    .window hr {
+        height: 1px;
+        border-top: 1px solid var(--button-shadow);
+        background-color: var(--button-hilight);
+    }
+
+    nav.window {
+        position: fixed;
+        bottom: 28px;
+        left: 4px;
+        z-index: 50;
+        width: calc(var(--spacing) * 60);
+        padding: 1px;
+    }
+
+    nav.window > .wrapper {
+        border-left: 24px solid;
+        border-image-slice: 1;
+        border-image-source: linear-gradient(
+            to top,
+            var(--active-title),
+            var(--gradient-active-title)
+        );
+        margin: 2px;
+        min-height: calc(var(--spacing) * 29);
+    }
+
+    nav.window > .wrapper > .links {
+        padding-left: 2px;
+        padding-right: 2px;
+    }
+
+    nav.window > .wrapper > h1 {
+        position: absolute;
+        bottom: 0;
+        transform-origin: bottom left;
+        transform: rotate(-90deg);
+        font-family: Tahoma, Verdana, Segoe, sans-serif;
+        font-size: var(--text-lg);
+        line-height: var(--text-lg--line-height);
+        color: var(--color-white);
+        margin-bottom: 8px;
+        margin-left: 3px;
+        font-weight: 900;
+    }
+
+    nav.window > .wrapper > .links > a {
+        text-decoration: none;
+        color: var(--window-text);
+        display: block;
+        font-size: 12px;
+        height: 30px;
+        padding: 1px 2px;
+    }
+
+    nav.window > .wrapper > .links > a > img {
+        height: 30px;
+        margin-right: 6px;
+        vertical-align: middle;
+    }
+
+    nav.window > .wrapper > .links > a:hover {
+        background-color: var(--hilight);
+    }
 }

resources/views/layouts/navigation.blade.php

@@ -29,21 +29,74 @@
 {{-- </div> --}}
 {{-- </div> --}}
 {{-- </nav> --}}
-<nav
-  class="window fixed bottom-0 left-0 box-border flex h-[30px] w-screen justify-between"
->
-  <button class="min-w-0 p-1 text-[12px] leading-0 font-bold">
-    <img
-      src="{{ Vite::asset('resources/images/logo.svg') }}"
-      alt="Windows Logo"
-      class="relative top-[1px] w-4"
-    />
-    Start
-  </button>
+<div x-data="{ open: false }">
+  <nav
+    class="window"
+    x-show="open"
+    x-cloak
+    x-on:click.outside="open = false"
+    x-transition.duration.200ms
+    x-transition.opacity
+  >
+    <div class="wrapper">
+      <h1>
+        Retro
+        <span class="font-thin">Fairie</span>
+      </h1>
+      <div class="links">
+        <a href="/">
+          <img
+            src="{{ Vite::asset('resources/images/startmenu/desktop.png') }}"
+            alt="desktop"
+          />
+          Home
+        </a>
 
+        <hr />
+
+        @auth
+          <a href="{{ route('admin') }}">Admin</a>
+
+          <hr />
+
+          <a href="{{ route('logout') }}">
+            <img
+              src="{{ Vite::asset('resources/images/startmenu/key.png') }}"
+              alt="key"
+            />
+            Log Out
+          </a>
+        @else
+          <a href="{{ route('login') }}">
+            <img
+              src="{{ Vite::asset('resources/images/startmenu/key.png') }}"
+              alt="key"
+            />
+            Log In
+          </a>
+        @endauth
+      </div>
+    </div>
+  </nav>
   <div
-    class="status-bar-field max-w-fit px-2 leading-[20px]"
-    x-data
-    x-text="new Date().toLocaleTimeString(undefined, { timeStyle: 'short' })"
-  ></div>
-</nav>
+    class="window fixed bottom-0 left-0 box-border flex h-[30px] w-screen justify-between"
+  >
+    <button
+      class="min-w-0 p-1 text-[12px] leading-0 font-bold"
+      x-on:click="open = ! open"
+    >
+      <img
+        src="{{ Vite::asset('resources/images/logo.svg') }}"
+        alt="Windows Logo"
+        class="relative top-[1px] w-4"
+      />
+      Start
+    </button>
+
+    <div
+      class="status-bar-field max-w-fit px-2 leading-[20px]"
+      x-data
+      x-text="new Date().toLocaleTimeString(undefined, { timeStyle: 'short' })"
+    ></div>
+  </div>
+</div>