form/templates.go

// Code generated by go generate; DO NOT EDIT.
// This file was generated by cmd/assets/main.go
// 2022-09-02 12:13:23.5786852 -0500 CDT m=+0.002805601
package form

var FormTemplate = `{{define "content"}}
<div class="container" x-data="form">
    <form class="form" @submit.prevent="submit">
        <h1 class="title">
            {{if .Tab}}
                <span x-text="$store.nav.tab">{{.Tab}}</span>
            {{end}}
            {{.Title}}
        </h1>
        {{range .Fields}}
            <div class="field" x-ref="field_{{.ID}}" {{if $.Tabs}}x-show="$store.nav.isTab('{{.SettingsTab}}')"{{end}}>
                {{if eq .Type "2fa"}}
                    <img x-show="mfa.url" :src="mfa.url" width="200" id="{{.ID}}" />
                    <a x-show="input.totpsecret === true" @click="updateAccount(null, true)">Reset 2FA</a>
                {{else if eq .Type "recovery"}}
                    <div x-show="input.totpsecret === true">
                        <a @click="genRecovery">
                            Generate Recovery Codes
                            (<span x-text="input.recoverycodes || 0"></span>)
                        </a>
                        <div x-show="mfa.recovery">
                            <pre class="recovery" x-text="mfa.recovery"></pre>
                            <span class="help">This will only be shown to you once. Hit save to activate.</span>
                        </div>
                    </div>
                {{else}}
                    {{if eq .Type "checkbox"}}
                    <div class="checkbox">
                        <input id="{{.ID}}" type="checkbox" x-model="input.{{.ID}}"/>
                        <label for="{{.ID}}">
                        {{if .LabelHtml}}
                            {{.LabelHtml}}
                        {{else}}
                            {{.Label}}
                        {{end}}
                        </label>
                    </div>
                    {{else}}
                        <label for="{{.ID}}">{{.Label}}</label>
                        {{if eq .Type "select"}}
                            <select id="{{.ID}}" x-model="input.{{.ID}}">
                            {{range .Options}}
                                <option value="{{.ID}}">{{.Label}}</option>
                            {{end}}
                            </select>
                        {{else if eq .Type "textarea"}}
                            <textarea id="{{.ID}}" x-model="input.{{.ID}}" rows=5></textarea>
                        {{else}}
                            <input id="{{.ID}}" type="{{.Type}}" x-model="input.{{.ID}}"/>
                        {{end}}
                    {{end}}
                    <span class="help danger" x-show="errors.{{.ID}}" x-text="errors.{{.ID}}"></span>
                    <a @click="submit({act:'confirmemail'})" x-show="errors.{{.ID}} === 'inactive'">Re-Send Verification Link</a>
                {{end}}
            </div>
        {{end}}
        {{if .Recaptcha}}
        <div class="field">
            <div id="recaptcha-field" data-key="{{.Recaptcha}}"></div>
            <span class="help danger" x-show="errors.recaptcha" x-text="errors.recaptcha"></span>
        </div>
        {{end}}
        <div class="action-panel">
            <button type="submit" class="button" :disabled="$store.values.loading">
                <template x-if="$store.values.loading">
                    <span id="loading"></span>
                </template>
                <template x-if="!$store.values.loading">
                    <span>{{.Submit}}</span>
                </template>
            </button>
            <div class="list">
            {{range .Links}}
                <a href="{{.URL}}" class="link">&#x25B6; {{.Label}}</a>
            {{end}}
            </div>
        </div>
    </form>
</div>
{{end}}`

var Layout = `{{define "layout"}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{.Title}} - {{.Brand.AppName}}</title>
<meta name="description" content="{{.Description}}">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style>
:root {
    --primary: {{.Brand.Primary}};
    --primary-inverse: {{.Brand.PrimaryInverse}};
    --accent: {{.Brand.Accent}};
    --neutral: {{.Brand.Neutral}};
    --neutral-inverse: {{.Brand.NeutralInverse}};
}
</style>
<link rel="stylesheet" href="{{.Path.Base}}/client.css">
<script src="{{.Path.Base}}/client.js"></script>
<script defer src="{{.Path.Base}}{{.AlpineJSURL}}"></script>
{{if .Recaptcha}}
<script defer src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit"></script>
{{end}}
</head>
<body>
    <div id="env" data-base="{{.Path.Base}}" data-home="{{.Path.Home}}" data-account="{{.Path.Account}}" data-login="{{.Path.Login}}" data-register="{{.Path.Register}}" data-refresh="{{.Path.Refresh}}"></div>
    <div class="backdrop"></div>
    <div class="workspace">
        <figure class="sidebar">
            <div class="nav-panel">
                {{template "nav" .}}
            </div>
            <figure class="logo">
                {{if .Brand.LogoURL}}
                    <a href="{{.Brand.AppURL}}">
                        <img src="{{.Brand.LogoURL}}" />
                    </a>
                {{end}}
                {{.Brand.AppName}}
            </figure>
        </figure>
        <div class="main">
            {{template "content" .}}
        </div>
    </div>
    <div x-data class="notify">
        <template x-for="(a, i) in $store.notify.alerts">
            <div class="notification" :class="a.type">
                <span class="message" x-text="a.message"></span>
                <span class="close" @click="$store.notify.close(i)">X</span>
            </div>
        </template>
    </div>
</body>
</html>
{{end}}

{{ define "nav"}}
<div class="nav-panel" x-data>
    <a href="{{.Path.Home}}" class="link back">&#x1F844; Home</a>
    {{if .Tabs}}
    <nav class="nav">
        {{range .Tabs}}
            <a class="pointer" @click="$store.nav.setTab('{{.}}')">{{.}}</a>
        {{end}}
        <a class="pointer" @click="$store.nav.logout()">Logout</a>
    </nav>
    {{end}}
</div>
{{ end }}`

var ClientJS = `document.addEventListener('alpine:init', function () {
  const store = sessionStorage;
  function sendRequest(method, url, data, onSuccess, onError) {
    if (!onError) {
      onError = function (err) {
        Alpine.store('notify').alert("danger", err.error);
      }
    }
    let xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
      xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
      xhr = new XDomainRequest();
      xhr.open(method, url);
    } else {
      onError({
        error: "An error has occurred."
      })
      return;
    }
    xhr.setRequestHeader('Content-Type', 'application/json');
    const accTok = Alpine.store("values").accessToken;
    if (accTok) {
      xhr.setRequestHeader('Authorization', 'Bearer ' + accTok)
    }
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        Alpine.store("values").loading = false;
        const result = xhr.responseText ? JSON.parse(xhr.responseText) : {};
        if (xhr.status >= 400) {
          if (xhr.status === 401 && accTok) {
            Alpine.store("values").accessToken = null;
            if (location.pathname !== bPath(env.login)) toLogin();
          }
          onError(result, xhr.status);
        } else {
          onSuccess(result, xhr.status);
        }
      }
    };
    Alpine.store("values").loading = true;
    xhr.send(data ? JSON.stringify(data) : undefined);
  }
  const env = document.getElementById("env").dataset;

  function bPath(p) {
    return env.base + p;
  }

  function toLogin() {
    location.href = bPath(env.login) + "?r=" + encodeURIComponent(location.pathname + location.search);
  }
  const actPath = bPath("/action");

  function accessToken(onSuccess) {
    try {
      const aTok = Alpine.store("values").accessToken;
      if (aTok) {
        const payload = JSON.parse(window.atob(aTok.split('.')[1]))
        if (new Date().getTime() / 1000 < payload.exp) {
          onSuccess(aTok);
          return;
        }
      }
    } catch {
      Alpine.store("values").accessToken = null;
    }
    sendRequest("GET", bPath(env.refresh), null, (r) => {
      Alpine.store("values").accessToken = r.access_token;
      store.setItem("gauth", "1");
      onSuccess(r.access_token);
    }, function (err, code) {
      store.removeItem("gauth");
      if (code === 401 && location.pathname !== bPath(env.login)) {
        toLogin();
      } else if (code !== 401)
        Alpine.store('notify').alert("danger", err.error);
    });
  }
  Alpine.store('values', {
    recaptcha: null,
    loading: false,
    accessToken: null
  });
  Alpine.store('notify', {
    alertId: 0,
    alerts: [],
    close: function (index) {
      this.alerts.splice(index, 1);
    },
    alert: function (type, message) {
      this.alerts.push({
        type: type,
        message: message,
        id: ++this.alertId
      });
      const self = this;
      setTimeout(function () {
        const id = this.id;
        const idx = self.alerts.findIndex(function (a) {
          return a.id === id
        });
        if (idx !== -1) {
          self.alerts.splice(idx, 1);
        }
      }.bind({
        id: this.alertId
      }), 5000);
    },
  });
  Alpine.store('nav', {
    tab: document.querySelectorAll(".nav a.pointer").length ? document.querySelectorAll(".nav a.pointer")[0].innerText : null,
    setTab: function (tab) {
      this.tab = tab;
    },
    isTab: function (tab) {
      return this.tab === tab.split(",")[0];
    },
    logout: function () {
      sendRequest("DELETE", bPath(env.refresh), null, function () {
        store.removeItem("gauth");
        location.href = bPath(env.login);
      }, function (err) {
        store.setItem("alertDanger", err.error);
        location.href = bPath(env.login);
      });
    }
  });

  const query = {};
  window.location.search.substring(1).split("&").map(function (s) {
    const vals = s.split("=");
    query[vals[0]] = vals.length > 1 ? decodeURIComponent(vals[1]) : null;
  });
  const alerts = {
    success: "alertSuccess",
    danger: "alertDanger"
  };
  for (let k in alerts) {
    const msg = store.getItem(alerts[k]);
    if (msg) {
      Alpine.store('notify').alert(k, msg);
      store.removeItem(alerts[k]);
    }
  }

  function goLogin() {
    accessToken(function () {
      location.href = query.r || store.getItem("ref") || env.base + env.account;
      store.removeItem("ref");
    });
  }
  Alpine.data('form', function () {
    const isAccount = location.pathname === bPath(env.account);
    const isLogin = location.pathname === bPath(env.login);
    const isRegister = location.pathname === bPath(env.register);
    const confirmFields = [];
    return {
      init: function () {
        if (query.r) {
          store.setItem("ref", query.r);
        } else if (document.referrer && !store.getItem("ref") && document.referrer.indexOf(bPath(env.login)) === -1 && document.referrer.indexOf(bPath(env.register)) === -1) {
          store.setItem("ref", document.referrer);
        }
        if (query.a === "verify") {
          sendRequest("POST", actPath, {
            action: query.a,
            token: query.t
          }, () => {
            store.setItem("alertSuccess", "Email Verified");
            location.href = "?";
          }, (err) => {
            store.setItem("alertDanger", err.error);
            location.href = "?";
          });
        } else if (query.a === "login") {
          sendRequest("POST", location.pathname, {
            token: query.t
          }, () => {
            goLogin();
          }, (err) => {
            store.setItem("alertDanger", err.error);
            location.href = "?";
          });
        }
        if (isAccount) {
          accessToken(() => {
            if (query.a === "emailupdate") {
              sendRequest("POST", actPath, {
                action: query.a,
                token: query.t
              }, () => {
                store.setItem("alertSuccess", "Email updated!");
                location.href = bPath(env.account);
              });
              return;
            }
            sendRequest("GET", location.pathname, null, (r) => {
              this.updateAccount(r);
            });

            Alpine.effect(() => {
              if (Alpine.store("nav").tab && this.original) {
                this.input = JSON.parse(this.original);
                this.updateAccount();
              }
            });
          });
        } else if (isLogin && this.$refs.field_code) {
          this.$refs.field_code.classList.add("hidden");
        }
        const els = document.querySelectorAll("input[id$=_confirm]");
        for (let i = 0; i < els.length; i++) {
          confirmFields.push(els[i].id.substring(0, els[i].id.indexOf("_confirm")));
        }
      },
      original: null,
      input: {},
      hide: {},
      errors: {},
      mfa: {
        url: null
      },
      updateAccount: function (acct, reset) {
        if (acct) {
          this.original = JSON.stringify(acct);
          this.input = acct;
          if (this.input.totpsecret === true) {
            this.mfa.url = null;
          }
        }
        if (this.original) {
          if (this.input.totpsecret === true && !reset) {
            this.$refs.field_code.classList.add("hidden");
          } else if (this.mfa.url === null || reset) {
            this.mfa.url = "";
            sendRequest("POST", actPath, {
              action: "newTotpKey"
            }, (r) => {
              this.mfa.url = actPath + "?qr=" + encodeURIComponent(r.url);
              this.mfa.secret = r.secret;
              this.$refs.field_code.classList.remove("hidden");
            });
          }
        }
      },
      genRecovery: function () {
        sendRequest("POST", actPath, {
          action: "newRecovery"
        }, (r) => {
          this.mfa.recovery = r.join("\n");
        });
      },
      submit: function (e) {
        this.errors = {};
        for (let i = 0; i < confirmFields.length; i++) {
          const field = confirmFields[i];
          if (this.input[field] && this.input[field] !== this.input[field + "_confirm"]) {
            this.errors[field + "_confirm"] = "password do not match";
            return;
          }
        }
        if (window.grecaptcha) {
          if (!Alpine.store("values").recaptcha) {
            this.errors.recaptcha = "required";
            return;
          }
          this.input.recaptcha = Alpine.store("values").recaptcha;
        }
        let path = location.pathname;
        if (query.a || e.act) {
          path = actPath;
          this.input.action = query.a || e.act;
          if (query.t) {
            this.input.token = query.t;
          }
        }
        const success = {
          resetlink: "Reset link sent!",
          reset: "Password updated!",
          confirmemail: "Confirmation link sent!"
        };
        const input = JSON.parse(JSON.stringify(this.input));
        for (let k in input) {
          if (!input[k]) delete (input[k]);
        }
        if (input.code) {
          input.totpsecret = this.mfa.secret;
        }
        if (this.mfa.recovery) {
          input.recoverycodes = this.mfa.recovery.split("\n").join("|");
          this.mfa.recovery = null;
        }
        sendRequest("POST", path, input, (r, code) => {
          if (input.action && success[input.action]) {
            store.setItem("alertSuccess", success[input.action]);
            location.href = "?";
            return;
          }
          if (isLogin) {
            if (!input.password && code === 201) {
              const el = document.querySelectorAll("input[type=email]")[0];
              this.input[el.id] = null;
              Alpine.store('notify').alert("success", "An email was sent to " + input[el.id] + ".");
            } else {
              goLogin();
            }
          } else if (isRegister) {
            store.setItem("alertSuccess", code === 201 ? "Email confirmation link sent to your email." : "Registration success!");
            location.href = bPath(env.login);
          } else if (isAccount) {
            this.updateAccount(r);
            Alpine.store('notify').alert("success", code === 201 ? "Email update link sent to your email." : "Updated!");
          }
        }, function (err) {
          Alpine.store("values").recaptcha = null;
          if (window.grecaptcha) {
            window.grecaptcha.reset(window.recaptcha);
          }
          if (err.error === "validation") {
            this.errors = err.data;
            if (isLogin && this.$refs.field_code) {
              this.$refs.field_code.classList[this.errors.code ? "remove" : "add"]("hidden");
            }
          } else {
            Alpine.store('notify').alert("danger", err.error);
          }
        }.bind(this));
      }
    }
  });
});

window.recaptchaCallback = function () {
  const recaptchaField = document.getElementById("recaptcha-field");
  if (!recaptchaField) return;
  window.recaptcha = grecaptcha.render(recaptchaField, {
    sitekey: recaptchaField.dataset.key,
    callback: function (resp) {
      Alpine.store("values").recaptcha = resp;
    },
  });
};`

var ClientCSS = `:root {
    --danger: #D9422B;
    --success: #689342;
    --warning: #E66700;
    --sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --serif: Georgia, 'Times New Roman', Times, serif;
    --code: 'Courier New', Courier, monospace;
}
* {
    box-sizing: border-box;
    color: var(--neutral);
}
html,body {
    margin: 0;
}
body {
    font-family: var(--sans-serif);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--serif);
    color: var(--primary);
}
p {
    font-size: large;
}
.backdrop {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:-10;
    background-color: var(--accent);
    opacity: 0.4;
    background-image:  linear-gradient(var(--neutral-inverse) 2px, transparent 2px), linear-gradient(90deg, var(--neutral-inverse) 2px, transparent 2px), linear-gradient(var(--neutral-inverse) 1px, transparent 1px), linear-gradient(90deg, var(--neutral-inverse) 1px, var(--accent) 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.title {
    align-self: start;
}
.workspace {
    display: flex;
    flex-direction: column;
    width: 100vw;
    background-color: var(--primary-inverse);
}
.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: flex-start;
    align-items: center;
    margin:0;
}
.main {
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
}
.container {
    background-color: var(--primary-inverse);
    padding: 0 2rem 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-items: stretch;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
}
.form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    max-width: 400px;
    gap: 1rem;
    background: var(--primary-inverse);
}
.field {
    display: flex;
    width: auto;
    flex-direction: column;
    gap: 0.375rem;
}
.checkbox {
    flex-direction: row;
    justify-content: left;
    align-items: baseline;
}
label {
    font-weight: 500;
    letter-spacing: 0.075rem;
}
.checkbox > label {
    font-weight: 300;
    user-select: none;
    letter-spacing:normal;
    font-size:medium;
}
input[type=text],input[type=password],input[type=number],input[type=email],select {
    outline-color: var(--primary);
    border: solid 1px var(--neutral);
    font-size:large;
    width: 100%;
    height: 2.5rem;
}
textarea {
    outline-color: var(--accent);
    border: solid 1px var(--neutral);
    font-family: sans-serif;
    font-size: large;
}
input[type=checkbox] {
    position: relative;
    cursor: pointer;
    margin-right: 0.75rem;
    height: 1rem;
}
input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background-color: var(--neutral-inverse);
}
input[type=checkbox]:checked:before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background-color: var(--primary);
}
input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid var(--primary-inverse);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
}
.help {
    font-size: small;
    font-weight: 400;
    letter-spacing: 1px;
}
.help.danger {
    color: var(--danger);
}
.help::first-letter {
    text-transform: capitalize;
}
a {
    cursor: pointer;
}
.button {
    color: var(--primary-inverse);
    background-color: var(--primary);
    padding: 1rem 1.5rem;
    font-size: large;
    font-weight: 500;
    letter-spacing: 0.075rem;
    border:none;
    border-radius: 0.375rem;
    cursor: pointer;
}
.button > span {
    color: var(--primary-inverse);
}
.button:hover {
    filter: brightness(85%);
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}
footer {
    padding: 2rem;
    color: var(--primary);
    font-size: smaller;
}
.notify {
    width:100%;
}
.notification {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-inverse);
    border: var(--neutral);
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
    display: flex;
}
.notification .message {
    color: white;
    width: 100%;
    font-weight: 500;
}
.notification .close {
    cursor: pointer;
}
.notification.success {
    background-color: var(--success);
    color: white;
}
.notification.warning {
    background-color: var(--warning);
    color: white;
}
.notification.danger {
    background-color: var(--danger);
    color: white;
}
:disabled,.disable{
    cursor: not-allowed;
    opacity:.5;
}
.hidden {
    display: none;
}
.logo {
    font-weight: 100;
    font-size: 1.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: center;
}
.logo img {
    margin: 0 1rem 0 1rem;
    width: 70px;
    height: 70px;
}
.nav-panel {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
    background-color: var(--neutral-inverse);
    color: var(--neutral);
    padding:1px;
}
.back {
    padding: 1rem;
    white-space: nowrap;
}
.nav {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    justify-content: space-evenly;
    gap: 2px;
    width:100%;
}
.nav a {
    background-color: var(--primary-inverse);
    flex-grow: 1;
}
.nav > a {
    text-decoration: none;
    width: auto;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: 500;
    color: var(--primary);
}
.nav > a:hover {
    color: var(--primary);
}
.link {
    color: var(--primary);
    filter: brightness(90%);
    font-size: large;
    font-weight: 500;
    text-decoration: none;
    justify-items: flex-start;
}
.link:hover {
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}
.action-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 0;
    gap: 1rem;
}
.list {
    display: flex;
    flex-direction: column;
}
pre.recovery {
    padding: 1rem;
    background-color: var(--neutral);
    color: var(--neutral-inverse);
    font-family: monospace;
    font-size: large;
    text-align: center;
}
#loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--neutral);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@media only screen and (min-width: 600px) {
    .container {
        padding: 2rem 4rem;
    }
    .workspace {
        flex-direction: row;
        width: 800px;
    }
    .logo {
        font-size: 2rem;
        flex-direction: column;
        text-align: center;
    }
    .logo img {
        width: 100px;
        height: 100px;
    }
    .sidebar {
        flex-direction: column-reverse;
        justify-content: space-between;
        justify-items: center;
        align-items: center;
        padding: 1.5rem 1rem;
        margin: 0;
        background-color: var(--neutral-inverse);
        width: 35%;
    }
    .logo > img {
        background-color:var(--neutral-inverse);
    }
    .main {
        width: auto;
    }
    .button {
        padding: 1rem 3rem;
        justify-self: flex-start;
        align-self: flex-start;
    }
    .nav-panel {
        width: 100%;
        flex-direction: column-reverse;
    }
    .back {
        background-color: transparent;
        justify-self: start;
        align-self: flex-start;
    }
    .nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin: 0 3rem;
    }
    .nav > a:not(:last-child) {
        border-bottom: solid 1px var(--accent);
        border-right: 0;
    }
    .nav > a {
        padding: 0.5rem 3rem;
        background-color: transparent;
        color: var(--neutral);
        width: 100%;
    }
}`