Initial commit.
This commit is contained in:
Joshua Bemenderfer
114
src/layouts/components/Navigation.vue
Normal file
114
src/layouts/components/Navigation.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<ul class="space-y-2 pb-2">
|
||||
<li>
|
||||
<a href="/" class="text-base text-violet-900 font-bold flex flex-col rounded-lg p-2 px-3 hover:bg-violet-100 group">
|
||||
Introduction
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="flex font-bold px-3 py-1 text-violet-900">What is the statewide trend in...</span>
|
||||
<ul class="space-y-1 py-2 ml-3">
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-test-tube class="mr-2"></icon-mdi-test-tube> testing?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-percent-outline class="mr-2"></icon-mdi-percent-outline> test positivity?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-virus-outline class="mr-2"></icon-mdi-virus-outline> cases?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-hospital-box-outline class="mr-2"></icon-mdi-hospital-box-outline> hospitalizations?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-grave-stone class="mr-2"></icon-mdi-grave-stone> deaths?
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="flex font-bold px-3 py-1 text-violet-900">Which counties have the...</span>
|
||||
<ul class="space-y-1 py-2 ml-3">
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-percent-outline class="mr-2"></icon-mdi-percent-outline> highest positivity rate?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-virus-outline class="mr-2"></icon-mdi-virus-outline> most cases by population?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-hospital-box-outline class="mr-2"></icon-mdi-hospital-box-outline> most hospitalizations by population?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-grave-stone class="mr-2"></icon-mdi-grave-stone> most deaths by population?
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="flex font-bold px-3 py-1 text-violet-900">Who is most at-risk...</span>
|
||||
<ul class="space-y-1 py-2 ml-3">
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-human-cane class="mr-2"></icon-mdi-human-cane> by age?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-gender-male-female class="mr-2"></icon-mdi-gender-male-female> by gender?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-web class="mr-2"></icon-mdi-web> by ethnicity?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-healthicons-clinical-f-outline class="mr-2"></icon-healthicons-clinical-f-outline> by health condition?
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="flex font-bold px-3 py-1 text-violet-900">Who is most at-risk...</span>
|
||||
<ul class="space-y-1 py-2 ml-3">
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-human-cane class="mr-2"></icon-mdi-human-cane> by age?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-gender-male-female class="mr-2"></icon-mdi-gender-male-female> by gender?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-mdi-web class="mr-2"></icon-mdi-web> by ethnicity?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cases" class="text-base text-gray-900 rounded-lg flex items-center p-2 hover:bg-violet-100 group">
|
||||
<icon-healthicons-clinical-f-outline class="mr-2"></icon-healthicons-clinical-f-outline> by health condition?
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
73
src/layouts/default.vue
Normal file
73
src/layouts/default.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<!-- This is an example component -->
|
||||
<div class="flex min-h-screen">
|
||||
<nav class="bg-white fixed w-full z-30 shadow-md lg:shadow-none">
|
||||
<div class="px-3 py-3 lg:px-5 lg:pl-3 h-16">
|
||||
<div class="flex items-center h-full">
|
||||
<a class="flex h-full pr-5 font-bold text-violet-900 items-center" href="/">
|
||||
<img src="@/assets/ga-state-flag.svg" class="block h-full object-contain py-2 mr-2"/>
|
||||
Georgia COVID-19 Charts
|
||||
</a>
|
||||
<div class="flex-1"></div>
|
||||
<button @click="toggleSidebar()" aria-expanded="true" aria-controls="sidebar" class="lg:hidden ml-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded">
|
||||
<svg :class="['w-6 h-6', isOpen ? 'hidden' : '']" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<svg :class="['w-6 h-6', isOpen ? '' : 'hidden']" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex-1"></div>
|
||||
<em class="font-light hidden lg:block">
|
||||
This is a citizen science project and not affiliated with or endorsed in any way by the State of Georgia.<br/>
|
||||
</em>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<aside ref="sidebar" :class="[
|
||||
'fixed z-20 min-h-full max-h-screen lg:max-h-full pt-16 left-0 flex lg:flex flex-shrink-0 flex-col w-full lg:w-96 transition-transform origin-top duration-75 lg:relative lg:scale-y-100',
|
||||
isOpen ? 'scale-y-100' : 'scale-y-0'
|
||||
]" aria-label="Sidebar">
|
||||
<div class="flex-1 flex flex-col overflow-y-auto px-3 bg-white space-y-4">
|
||||
<Navigation></Navigation>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="w-full min-h-full relative overflow-y-auto mt-16 shadow-inner bg-violet-100 rounded-t-xl">
|
||||
<div class="p-2 lg:p-6">
|
||||
<div class="w-full space-y-2 lg:space-y-4 flex flex-col h-full">
|
||||
<div class="bg-white shadow rounded-lg p-4 lg:p-8">
|
||||
<article class="max-w-none prose lg:prose-base prose-headings:font-light prose-headings:text-indigo-900">
|
||||
<slot></slot>
|
||||
</article>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="bg-white font-light shadow rounded-lg p-4 lg:p-8 flex flex-wrap items-center justify-between">
|
||||
<p>
|
||||
<strong>Note:</strong> This is a citizen science project by <a href="https://thederf.com" class="link">Joshua Bemenderfer</a> and not affiliated with or endorsed in any way by the State of Georgia.
|
||||
</p>
|
||||
<ul class="flex items-center mt-4 lg:mt-0">
|
||||
<li class="text-center"><a href="/sources" class="font-normal text-violet-900 hover:bg-violet-100 rounded-lg p-2 px-3 block">Sources</a></li>
|
||||
<li class="text-center"><a href="/about" class="font-normal text-violet-900 hover:bg-violet-100 rounded-lg p-2 px-3 block">About</a></li>
|
||||
<li class="text-center"><a href="/contact" class="font-normal text-violet-900 hover:bg-violet-100 rounded-lg p-2 px-3 block">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Navigation from './components/Navigation.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const isOpen = ref(false)
|
||||
|
||||
function toggleSidebar() {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '~/assets/base.css';
|
||||
</style>
|
||||
Reference in New Issue
Block a user