diff --git a/assets/main.css b/assets/main.css index 2296579..2705c49 100644 --- a/assets/main.css +++ b/assets/main.css @@ -1,3 +1,10 @@ +:root { + --primary-bg: white; + --secondary-bg: #F7F9FA; + --text: #4C555E; + --text-light: #1D262E; +} + body { margin: 0; } @@ -8,15 +15,17 @@ main { main .panel { height: 100%; + width: 100%; position: absolute; + display: flex; } menu.sidebar { height: calc(100% - 50px); position: relative; margin: 0; - padding: 25px 10px; - background: #F7F9FA; + padding: 25px 0px; + background: var(--secondary-bg); list-style: none; font-size: 18px; display: flex; @@ -24,12 +33,17 @@ menu.sidebar { gap: 20px; } -menu.sidebar li { - color: #4C555E; +menu.sidebar a { + color: var(--text); display: flex; align-items: center; gap: 10px; - margin: 5px 0; + text-decoration: none; + padding: 10px 10px; +} + +menu.sidebar a.active { + background: var(--primary-bg); } /* The user avatar */ @@ -40,8 +54,8 @@ menu.sidebar img { border-radius: 50%; } -menu.sidebar li:hover { - color: #1D262E; +menu.sidebar a:hover { + color: var(--text-light); cursor: pointer; } @@ -49,3 +63,47 @@ menu.sidebar svg { height: 24px; width: 24px; } + +.spinner { + animation: rotate 2s linear infinite; + z-index: 2; + top: 50%; + left: 50%; + margin: -25px 0 0 -25px; + width: 50px; + height: 50px; +} + +.spinner .path { + stroke: var(--text); + stroke-linecap: round; + animation: dash 1.5s ease-in-out infinite; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} + +.page { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/components/app.vue b/components/app.vue index b81436a..6bb3df8 100644 --- a/components/app.vue +++ b/components/app.vue @@ -4,10 +4,10 @@ <side-bar :role="user.status" :active="active"> </side-bar> -<div>{{active}}, {{hash}}</div> - -<div v-if="loading"> +<div v-if="loading" class="page"> +<spinner></spinner> </div> + <div v-else-if="!loading"></div> </div> @@ -15,6 +15,7 @@ <script> import SideBar from "./sidebar.vue" +import Spinner from "./spinner.vue" const user = { firstName: "test", @@ -40,7 +41,7 @@ function active() { } export default { - components: {SideBar}, + components: {SideBar, Spinner}, computed: {active}, data() { return { diff --git a/components/spinner.vue b/components/spinner.vue new file mode 100644 index 0000000..fcea8e1 --- /dev/null +++ b/components/spinner.vue @@ -0,0 +1,6 @@ +<template> +<svg class="spinner" viewBox="0 0 50 50"> + <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"> + </circle> +</svg> +</template>