Add admin panel

.vscode/tasks.json

@@ -15,6 +15,18 @@
                 "showReuseMessage": false
             }
         },
+        {
+            "label": "Astro Build",
+            "type": "shell",
+            "group": "build",
+            "command": "npm run build",
+            "presentation": {
+                "reveal": "always",
+                "focus": true,
+                "panel": "dedicated",
+                "clear": true
+            }
+        },
         {
             "label": "Prettify All Files",
             "type": "shell",
@@ -33,6 +45,14 @@
             "presentation": {
                 "showReuseMessage": false
             }
+        },
+        {
+            "label": "Delete old Git branches",
+            "type": "shell",
+            "command": "git fetch --prune && git fetch -p ; git branch -r | awk '{print $1}' | egrep -v -f /dev/fd/0 <(git branch -vv | grep origin) | awk '{print $1}' | xargs git branch -D",
+            "presentation": {
+                "showReuseMessage": false
+            }
         }
     ]
 }

src/components/Header.astro

@@ -3,6 +3,7 @@ import '../styles/global.css'
 import SearchBar from '../components/SearchBar.astro'
 import IconHome from '../assets/icon/home.svg'
 import IconUser from '../assets/icon/user-circle.svg'
+import IconAdminPanel from '../assets/icon/device-desktop-analytics.svg'
 
 import { SITE_NAME } from '../config.js'
 const { canSearch = false } = Astro.props || {}
@@ -16,6 +17,9 @@ const { canSearch = false } = Astro.props || {}
     {canSearch && <SearchBar placeholder="Search for recipes..." />}
     <nav>
         <ul>
+            <li title="Admin Panel">
+                <a href="admin.html"><IconAdminPanel /></a>
+            </li>
             <li title="Account">
                 <a href="authentication.html"><IconUser /></a>
             </li>
@@ -24,11 +28,6 @@ const { canSearch = false } = Astro.props || {}
 </header>
 
 <style>
-    h1 {
-        font-size: var(--font-size-title);
-        text-wrap: nowrap;
-    }
-
     header {
         background-color: var(--color-primary);
         display: flex;

src/components/RecipeCard.astro

@@ -29,10 +29,6 @@ function randint(min: number, max: number) {
 </Fragment>
 
 <style>
-    h1 {
-        font-size: var(--font-size-title);
-    }
-
     .recipe-polaroid {
         align-items: center;
         background-color: var(--polaroid-color);
@@ -57,7 +53,6 @@ function randint(min: number, max: number) {
         overflow: hidden;
         text-align: center;
         text-overflow: ellipsis;
-        white-space: nowrap;
         width: calc(var(--polaroid-width) - var(--spacing-small));
     }
 

src/layouts/Main.astro

@@ -37,10 +37,6 @@ const { canSearch = false } = Astro.props || {}
     }
 
     body {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-large);
         background-color: light-dark(rgb(255 255 255 / 0.5), rgb(0 0 0 / 0.5));
         background-image:
             radial-gradient(rgb(128 128 128 / 0.05) 1px, transparent 1px),
@@ -76,11 +72,13 @@ const { canSearch = false } = Astro.props || {}
 
     @media screen and (width <=1000px) {
         main {
-            margin-top: calc(2 * var(--spacing-large) + 2rem);
+            margin-top: calc(var(--spacing-large) + var(--font-size-title) + var(--spacing-medium));
         }
 
         main.with-search {
-            margin-top: calc(2 * var(--spacing-large) + 4rem);
+            margin-top: calc(
+                var(--spacing-large) + 3 * var(--font-size-title) + var(--spacing-medium)
+            );
         }
     }
 </style>

src/pages/admin.astro

@@ -0,0 +1,175 @@
+---
+import '../styles/global.css'
+import Main from '../layouts/Main.astro'
+---
+
+<Main title="Admin Panel">
+    <div id="admin-panel">
+        <section id="content">
+            <h1>Content</h1>
+            <nav>
+                <ul>
+                    <li class="admin-panel-selected">Recipes</li>
+                    <li>Comments</li>
+                    <li>Media</li>
+                </ul>
+            </nav>
+            <div class="admin-panel-data">
+                <div class="show">Showing recipes</div>
+                <div class="hide">Showing comments</div>
+                <div class="hide">Showing media</div>
+            </div>
+        </section>
+
+        <section id="users">
+            <h1>Users</h1>
+            <nav>
+                <ul>
+                    <li class="admin-panel-selected">User list</li>
+                    <li>Reports</li>
+                    <li>Flags</li>
+                </ul>
+            </nav>
+            <div class="admin-panel-data">
+                <div class="show">Showing user list</div>
+                <div class="hide">Showing reports</div>
+                <div class="hide">Showing flags</div>
+            </div>
+        </section>
+
+        <section id="activity">
+            <h1>Activity</h1>
+            <nav>
+                <ul>
+                    <li class="admin-panel-selected">Site stats</li>
+                    <li>Trending</li>
+                    <li>Audit logs</li>
+                </ul>
+            </nav>
+            <div class="admin-panel-data">
+                <div class="show">Showing site stats</div>
+                <div class="hide">Showing trending</div>
+                <div class="hide">Showing audit logs</div>
+            </div>
+        </section>
+    </div>
+</Main>
+
+<style>
+    div#admin-panel {
+        display: grid;
+        width: 100%;
+        grid-template:
+            'content users'
+            'content activity' / 1fr 1fr;
+        gap: var(--spacing-medium);
+        height: 100%;
+        justify-content: center;
+        width: 90%;
+    }
+
+    div.hide {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+
+    div.show {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    div.admin-panel-data {
+        overflow: hidden;
+        min-height: calc(100% - var(--spacing-large) - var(--spacing-medium));
+    }
+
+    div.admin-panel-data {
+        overflow: hidden;
+        position: relative;
+    }
+
+    div.admin-panel-data > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    li.admin-panel-selected {
+        background-color: var(--background-glassy);
+    }
+
+    nav {
+        border-bottom: 1px solid #888;
+    }
+
+    nav > ul {
+        list-style: none;
+        display: flex;
+        width: 100%;
+        justify-content: space-around;
+    }
+
+    nav > ul > li {
+        border-top-left-radius: var(--border-radius-small);
+        border-top-right-radius: var(--border-radius-small);
+        cursor: pointer;
+        padding: var(--spacing-small);
+    }
+
+    section {
+        border-radius: var(--border-radius-large);
+        padding: var(--spacing-medium);
+    }
+
+    section#activity {
+        grid-area: activity;
+    }
+
+    section#content {
+        grid-area: content;
+    }
+
+    section#users {
+        grid-area: users;
+    }
+
+    section#settings {
+        grid-area: settings;
+    }
+
+    @media screen and (width<=1000px) {
+        div#admin-panel {
+            grid-template:
+                'content'
+                'users'
+                'activity' / 1fr;
+            width: 95%;
+        }
+    }
+</style>
+
+<script type="module" is:inline>
+    document.querySelectorAll('nav > ul').forEach((menu) => {
+        menu.addEventListener('click', (event) => {
+            if (event.target.tagName === 'LI') {
+                const current = menu.querySelector('.admin-panel-selected')
+                const index = Array.from(menu.children).indexOf(event.target)
+                const data = menu.closest('section').querySelector('.admin-panel-data')
+                const items = data.children
+
+                if (current) current.classList.remove('admin-panel-selected')
+                event.target.classList.add('admin-panel-selected')
+
+                Array.from(items).forEach((item, i) => {
+                    item.classList.toggle('show', i === index)
+                    item.classList.toggle('hide', i !== index)
+                })
+            }
+        })
+    })
+</script>

src/pages/authentication.astro

@@ -66,7 +66,6 @@ import PasswordRequirements from '../components/PasswordRequirements.astro'
     }
 
     section {
-        background-color: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.1));
         border-radius: var(--border-radius-large);
         display: flex;
         flex-direction: column;

src/pages/index.astro

@@ -35,6 +35,7 @@ import recipes from '../assets/recipes.json'
 
     <style>
         #recipes-list {
+            background-color: transparent;
             display: flex;
             flex-wrap: wrap;
             gap: var(--spacing-medium);

src/styles/form_field.css

@@ -1,13 +1,3 @@
-button[type='submit'] {
-    color: white;
-    cursor: pointer;
-    background-color: var(--color-secondary);
-    border: none;
-    border-radius: var(--border-radius-large);
-    font-size: 1rem;
-    padding: 1rem 2rem;
-}
-
 .form-field {
     position: relative;
     width: 100%;