diff options
Diffstat (limited to 'pages/base.templ')
| -rw-r--r-- | pages/base.templ | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/pages/base.templ b/pages/base.templ new file mode 100644 index 0000000..b78e9b5 --- /dev/null +++ b/pages/base.templ @@ -0,0 +1,77 @@ +package pages + +templ baseWithHeader(header templ.Component) { + <!DOCTYPE html> + <html lang="de"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" sizes="16x16 32x32 48x48"> + <title>Kosten</title> + <link href="/static/custom.css" rel="stylesheet"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> + if header != nil { + @header + } + </head> + <body> + { children... } + </body> + </html> +} + +func base() templ.Component { + return baseWithHeader(nil) +} + +templ navlink(path, descr string) { + <li class="nav-item"> + <a class={"nav-link", templ.KV("active", isCurrPath(ctx, path))} + href={templ.URL(path)}>{descr}</a> + </li> +} + +templ navlinks() { + @navlink("/categories", "Kategorien") + @navlink("/recur", "Regelmäßig") +} + +templ navbar() { + /* different inline svgs */ + <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> + <symbol id="search" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path> + </symbol> + </svg> + + /* The Navbar */ + <nav class="navbar sticky-top bg-dark-subtle navbar-expand-lg shadow mb-2"> + <div class="container-fluid" > + <a class="navbar-brand" href="/"> + <img src="/static/euro-money.svg" alt="Logo" width="32" height="32" class="d-inline-block"/> Kosten + </a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarNav"> + <ul class="navbar-nav nav-underline me-auto"> + @navlinks() + </ul> + <form class="d-flex" role="search"> + <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-dark" type="submit"><svg class="svg"><use xlink:href="#search"></use></svg></button> + </form> + </div> + </div> + </nav> +} + +templ content() { + @base() { + @navbar() + <main class="container-lg"> + {children...} + </main> + } +}
\ No newline at end of file |