header UI and UX

iamarpitpatidar · Apr 23, 2021 · 1167179 · 1167179
1 parent cc0e364
commit 1167179
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "steempanel",
-  "version": "0.0.2.5",
+  "version": "0.0.3.3",
   "private": true,
   "scripts": {
     "build": "gridsome build && yarn zip",

diff --git a/src/assets/icons/discord.svg b/src/assets/icons/discord.svg
diff --git a/src/assets/icons/moon.svg b/src/assets/icons/moon.svg
diff --git a/src/assets/icons/sun.svg b/src/assets/icons/sun.svg
diff --git a/src/components/MobileMenu.vue b/src/components/MobileMenu.vue
@@ -1,3 +1,28 @@
 <template>
-  <div>Mobile Menu</div>
+  <div class="sm:hidden">
+    <div class="px-2 pt-2 pb-3 space-y-1">
+      <nav-link
+        to="/news/"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+      >
+        News
+      </nav-link>
+      <nav-link
+        to="/"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+      >
+        DashBoard
+      </nav-link>
+    </div>
+  </div>
 </template>
+
+<script>
+import NavLink from './links/NavLink'
+
+export default {
+  components: {
+    NavLink
+  }
+}
+</script>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="hidden sm:block sm:ml-6">
+    <div class="flex space-x-4">
+      <nav-link
+        to="/news/"
+        class="px-3 py-2 rounded-md text-sm font-medium"
+      >
+        News
+      </nav-link>
+      <nav-link
+        to="/"
+        class="px-3 py-2 rounded-md text-sm font-medium"
+      >
+        DashBoard
+      </nav-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavLink from './links/NavLink'
+
+export default {
+  components: {
+    NavLink
+  }
+}
+</script>
diff --git a/src/components/ToggleTheme.vue b/src/components/ToggleTheme.vue
@@ -1,5 +1,54 @@
 <template>
-  <div>
-    Toggle Theme
-  </div>
-</template>
+  <button
+    class="focus:outline-none"
+    :title="'Toggle ' + nextTheme"
+    @click="toggleTheme"
+  >
+    <Sun
+      v-if="current === 'light'"
+      class="h-6 w-6 text-gray-500 hover:text-gray-700"
+    />
+    <Moon
+      v-else
+      class="h-6 w-6 text-gray-400 hover:text-gray-300"
+    />
+  </button>
+</template>
+
+<script>
+import Sun from '~/assets/icons/sun.svg'
+import Moon from '~/assets/icons/moon.svg'
+
+export default {
+  components: {
+    Sun,
+    Moon
+  },
+  data () {
+    return {
+      themes: ['light', 'dark'],
+      current: 'light'
+    }
+  },
+  computed: {
+    nextTheme () {
+      const currentIndex = this.themes.indexOf(this.current)
+      const nextIndex = (currentIndex + 1) % this.themes.length
+      return this.themes[nextIndex]
+    }
+  },
+  mounted () {
+    if (window.__theme) {
+      this.current = window.__theme
+    }
+  },
+  methods: {
+    toggleTheme () {
+      const currentIndex = this.themes.indexOf(this.current)
+      const nextIndex = (currentIndex + 1) % this.themes.length
+      window.__setPreferredTheme(this.themes[nextIndex])
+      this.current = this.themes[nextIndex]
+    }
+  }
+}
+</script>
diff --git a/src/components/links/AppLink.vue b/src/components/links/AppLink.vue
@@ -0,0 +1,32 @@
+<template>
+  <g-link
+    :to="to"
+    :class="isActive ? activeClass : inactiveClass"
+  >
+    <slot />
+  </g-link>
+</template>
+
+<script>
+export default {
+  props: {
+    activeClass: {
+      type: String,
+      default: ''
+    },
+    inactiveClass: {
+      type: String,
+      default: ''
+    },
+    to: {
+      type: String,
+      default: '/'
+    }
+  },
+  computed: {
+    isActive: function () {
+      return this.$route.path === this.to
+    }
+  }
+}
+</script>
diff --git a/src/components/links/NavLink.vue b/src/components/links/NavLink.vue
@@ -0,0 +1,25 @@
+<template>
+  <app-link
+    :to="to"
+    active-class="bg-gray-200 dark:bg-gray-900 text-gray-700 dark:text-white"
+    inactive-class="text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-white"
+  >
+    <slot />
+  </app-link>
+</template>
+
+<script>
+import AppLink from './AppLink'
+
+export default {
+  components: {
+    AppLink
+  },
+  props: {
+    to: {
+      type: String,
+      default: '/'
+    }
+  }
+}
+</script>
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html ${htmlAttrs}>
+<head>
+  ${head}
+</head>
+<body ${bodyAttrs}>
+<script>
+  (function() {
+    function setTheme(newTheme) {
+      window.__theme = newTheme;
+      document.documentElement.setAttribute('class', newTheme);
+    }
+    let preferredTheme;
+    try {
+      preferredTheme = localStorage.getItem('theme');
+    } catch (err) { }
+
+    window.__setPreferredTheme = function(newTheme) {
+      setTheme(newTheme);
+      try {
+        localStorage.setItem('theme', newTheme);
+      } catch (err) {}
+    }
+    setTheme(preferredTheme ? preferredTheme : '');
+  })();
+</script>
+${app}
+${scripts}
+</body>
+</html>
diff --git a/src/layouts/partials/Header.vue b/src/layouts/partials/Header.vue
@@ -1,10 +1,11 @@
 <template>
-  <header>
+  <header class="bg-white dark:bg-gray-800 shadow-md">
     <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
       <div class="relative flex items-center justify-between h-16">
         <menu-icon />
         <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
           <logo />
+          <nav-bar />
         </div>
         <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
           <toggle-theme />
@@ -21,6 +22,7 @@ import { mapGetters, mapState } from 'vuex'
 import Logo from '~/components/Logo'
 import MenuIcon from '~/components/MenuIcon'
 import MobileMenu from '~/components/MobileMenu'
+import NavBar from '~/components/NavBar'
 import ToggleTheme from '~/components/ToggleTheme'
 import UserProfile from '~/components/UserProfile'
 
@@ -29,6 +31,7 @@ export default {
     Logo,
     MenuIcon,
     MobileMenu,
+    NavBar,
     ToggleTheme,
     UserProfile
   },