From d3a3160cf82d3f937f123fd782506095fe11bd9f Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 13 Jan 2022 00:17:43 +0100 Subject: [PATCH] Split navigation icons/header into more components, fixed svg transition Split more out into `Hamburger` & `NavigationIcon` components. --- src/components/NavigationHeader.vue | 303 ++++----------------------- src/components/NavigationIcons.vue | 42 ++-- src/components/ui/Hamburger.vue | 90 ++++++++ src/components/ui/NavigationIcon.vue | 90 ++++++++ src/icons/IconActivity.vue | 5 +- src/icons/IconNowPlaying.vue | 18 +- src/icons/IconPopular.vue | 19 +- src/icons/IconProfile.vue | 19 +- src/icons/IconRequest.vue | 17 +- src/icons/IconSettings.vue | 5 +- src/icons/IconUpcoming.vue | 22 +- src/icons/tmdb-logo.vue | 5 +- 12 files changed, 318 insertions(+), 317 deletions(-) create mode 100644 src/components/ui/Hamburger.vue create mode 100644 src/components/ui/NavigationIcon.vue diff --git a/src/components/NavigationHeader.vue b/src/components/NavigationHeader.vue index fc9d66a..a6c5626 100644 --- a/src/components/NavigationHeader.vue +++ b/src/components/NavigationHeader.vue @@ -6,75 +6,15 @@ -
-
-
+ - -
  • - - {{ !userLoggedIn ? "Signin" : "Profile" }} -
    • -     - + -
    +
    - -
  • - - Settings -
    • -     - - -
  • - - Activity -
    • -     - - -
  • - - {{ !userLoggedIn ? "Signin" : "Profile" }} -
    • -     +     - -
    -
    @@ -86,110 +26,45 @@ import IconSettings from "../icons/IconSettings"; import IconActivity from "../icons/IconActivity"; import SearchInput from "@/components/SearchInput"; import NavigationIcons from "src/components/NavigationIcons"; +import NavigationIcon from "src/components/ui/NavigationIcon"; +import Hamburger from "@/components/ui/Hamburger"; +import { mapGetters, mapActions } from "vuex"; export default { components: { NavigationIcons, + NavigationIcon, SearchInput, TmdbLogo, IconProfile, IconSettings, - IconActivity + IconActivity, + Hamburger }, data() { return { listTypes: storage.homepageLists, - userLoggedIn: localStorage.getItem("token") ? true : false + hamburgerMenuOpen: false }; }, methods: { - setUserStatus() { - this.userLoggedIn = localStorage.getItem("token") ? true : false; - }, toggleNav() { - document - .querySelector(".nav__hamburger") - .classList.toggle("nav__hamburger--active"); - document - .querySelector(".nav__list") - .classList.toggle("nav__list--active"); + this.hamburgerMenuOpen = !this.hamburgerMenuOpen; } }, - created() { - // TODO move this to state manager - eventHub.$on("setUserStatus", this.setUserStatus); + computed: { + ...mapGetters("user", ["loggedIn"]), + profileRoute() { + return { + title: !this.loggedIn ? "Signin" : "Profile", + route: !this.loggedIn ? "/signin" : "/profile", + icon: IconProfile + }; + } } }; - diff --git a/src/components/NavigationIcons.vue b/src/components/NavigationIcons.vue index 16ead9c..e697f96 100644 --- a/src/components/NavigationIcons.vue +++ b/src/components/NavigationIcons.vue @@ -1,32 +1,34 @@ + + diff --git a/src/components/ui/NavigationIcon.vue b/src/components/ui/NavigationIcon.vue new file mode 100644 index 0000000..f5e1f63 --- /dev/null +++ b/src/components/ui/NavigationIcon.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/src/icons/IconActivity.vue b/src/icons/IconActivity.vue index dd6a034..cc32b70 100644 --- a/src/icons/IconActivity.vue +++ b/src/icons/IconActivity.vue @@ -4,9 +4,12 @@ width="24" height="24" viewBox="0 0 24 24" - stroke-width="2" + fill="none" + stroke="currentColor" + stroke-width="1" stroke-linecap="round" stroke-linejoin="round" + style="transition: stroke-width 0.5s ease" > diff --git a/src/icons/IconNowPlaying.vue b/src/icons/IconNowPlaying.vue index 13014e5..833a6e0 100644 --- a/src/icons/IconNowPlaying.vue +++ b/src/icons/IconNowPlaying.vue @@ -1,13 +1,17 @@ diff --git a/src/icons/IconPopular.vue b/src/icons/IconPopular.vue index 7c522cf..a186a25 100644 --- a/src/icons/IconPopular.vue +++ b/src/icons/IconPopular.vue @@ -1,13 +1,18 @@ diff --git a/src/icons/IconProfile.vue b/src/icons/IconProfile.vue index 4967ef2..3c72d4f 100644 --- a/src/icons/IconProfile.vue +++ b/src/icons/IconProfile.vue @@ -1,14 +1,17 @@ diff --git a/src/icons/IconRequest.vue b/src/icons/IconRequest.vue index fa5f5d4..27d7256 100644 --- a/src/icons/IconRequest.vue +++ b/src/icons/IconRequest.vue @@ -1,14 +1,19 @@ diff --git a/src/icons/IconSettings.vue b/src/icons/IconSettings.vue index afe51ec..f106ccb 100644 --- a/src/icons/IconSettings.vue +++ b/src/icons/IconSettings.vue @@ -4,9 +4,12 @@ width="24" height="24" viewBox="0 0 24 24" - stroke-width="2" + fill="none" + stroke="currentColor" + stroke-width="1" stroke-linecap="round" stroke-linejoin="round" + style="transition: stroke-width 0.5s ease" > diff --git a/src/icons/IconUpcoming.vue b/src/icons/IconUpcoming.vue index 7991fba..94eb61e 100644 --- a/src/icons/IconUpcoming.vue +++ b/src/icons/IconUpcoming.vue @@ -1,15 +1,19 @@ diff --git a/src/icons/tmdb-logo.vue b/src/icons/tmdb-logo.vue index 2f03693..e3473f6 100644 --- a/src/icons/tmdb-logo.vue +++ b/src/icons/tmdb-logo.vue @@ -1,10 +1,11 @@