Blame view

src/components/Header.vue 2.76 KB
2b91d45ce   Digvijay Singh   new ui fixes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
  <template>
    <nav class="navbar navbar-expand-sm spotLight-nav">
      <a class="navbar-brand" href="javasript:void(0);" @click="goTo"
        ><img src="../assets/images/logo.png"
      /></a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarsExample03"
        aria-controls="navbarsExample03"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
        <span class="navbar-toggler-icon"></span>
        <span class="navbar-toggler-icon"></span>
      </button>
  
      <div class="collapse navbar-collapse" id="navbarsExample03">
        <!-- <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="javasript:void(0);">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javasript:void(0);">Masterclass</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javasript:void(0);">Stories</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javasript:void(0);">Library</a>
          </li>
        </ul> -->
      </div>
      <div class="">
        <a @click="goTo" href="javascript:void(0);" class="user-profile-photo common_color"
          ><img :src="profilePictue"
        /></a>
        <div class="sub-menu-user" id="userprofileshow" style="display: none">
          <!-- <ul>
                <li>
                  <a href="javascript:void(0);" 
                    >Edit Profile</a
                  >
                </li>
                <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
              </ul> -->
        </div>
      </div>
    </nav>
  </template>
  
  <script>
  import $ from "jquery";
  import axios from "axios";
  export default {
    name: "Header",
    data() {
      return {
          usertoken:null,
          profilePictue:null,
      };
    },
    mounted() {
      var userdata = localStorage.getItem("spotlight_usertoken");
      if (userdata) {
        userdata = JSON.parse(userdata);
        this.usertoken = userdata.token;
        this.getProfile();
      }
    },
    methods: {
         goTo() {
        this.$router.push("/profile");
      },
         getProfile() {
        axios
          .get("/profile", {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
           this.assignClass(response.data.data.bgColor);
           this.profilePictue = response.data.data.profilePic;
            console.log(response.data.data);
          })
          .catch((error) => console.log(error));
      },
      assignClass(bgClr) {
        var cols = document.getElementsByClassName("common_color");
        for (var i = 0; i < cols.length; i++) {
          cols[i].style.backgroundColor = bgClr;
        }
      },
    }
    ,
   
  };
  </script>