KoPKB/lelong-web-pembida
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix header css

Browse Source
This commit is contained in:
Amir
2022-10-04 14:16:18 +08:00
parent c97a90c05e
commit e23cc423bc
2 changed files with 144 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+5 -22
View File
@@ -1,39 +1,22 @@
<template>
<!-- <div class="list">
<router-link to="/login">Login</router-link><br />
<router-link to="/register">Register</router-link><br />
<router-link to="/">Home</router-link><br />
</div> -->
<router-view />
</template>
<script>
export default {
name: "App",
};
</script>
<style scoped>
/*
#1e417b //main color nav
#2f68c5 //main button
#132a4f //Shades
#1e417b //#######MAIN COLOR - nav element#############
#2f68c5 //Tints - main button
#82a4dc //nav button
#d5e1f3 //background nav:active
#eaf0f9 //background inline message
*/
#app {
/* font-family: Inter, Helvetica, Arial, sans-serif; */
/* -webkit-font-smoothing: antialiased; */
/* -moz-osx-font-smoothing: grayscale; */
/* text-align: center; */
/* color: #2c3e50; */
/* background-color: #e8ebef; */
}
</style>
src/components/layouts/TheHeader.vue
+139 -155
View File
@@ -1,8 +1,121 @@
<template>
<!-- Navbar for laptop screen size (width>992px) -->
<div class="card lg:flex hidden border-none">
<div
class="
flex
justify-content-between
px-3
md:px-6
h-3rem
flex-wrap
main-color
"
>
<div class="flex align-items-center justify-content-center">
<div class="company-title" type="button" v-on:click="toHome()">
<div class="logo-title">eLelong</div>
<img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
</div>
</div>
<div class="flex align-items-center justify-content-center">
<nav class="main-nav">
<router-link class="nav-button" v-bind:to="{ name: 'home' }"
>Utama</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'list' }"
>Senarai</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'cart' }"
>Troli</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'bid-record' }"
>Rekod</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'login' }"
>Login</router-link
>
</nav>
</div>
<div class="flex align-items-center justify-content-center">
<div class="profile-title hidden lg:flex">
<div class="dropdown">
<div
class="dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="bi bi-person-circle me-1"></i>{{ username }}
</div>
<ul class="dropdown-menu">
<li>
<div
type="button"
class="dropdown-item"
v-on:click="toProfile()"
>
Profil <i class="bi bi-person-workspace"></i>
</div>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<div
type="button"
v-on:click="doLogout()"
class="dropdown-item"
>
Log Keluar <i class="bi bi-box-arrow-right"></i>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar for phone, tab screen size (width<992px) -->
<div class="card lg:hidden md:flex border-none">
<div
class="
flex
justify-content-between
px-3
md:px-6
h-3rem
flex-wrap
main-color
"
>
<div class="flex align-items-center justify-content-center">
<div class="company-title" type="button" v-on:click="toHome()">
<div class="logo-title">eLelong</div>
<img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
</div>
</div>
<div class="flex align-items-center justify-content-center">
<i
class="pi pi-bars text-white lg:hidden"
@click="visibleRight = true"
></i>
</div>
</div>
<div>
<div class="flex justify-content-center h-2rem bg-red-500">
Countdown 00:00:00
</div>
</div>
</div>
<Sidebar v-model:visible="visibleRight" position="right">
<div class="grid">
<div class="col-12">
<div class="text-center">Hai, {{ username }}</div>
<div class="text-center">
<i class="bi bi-person-circle me-1"></i> {{ username }}
</div>
</div>
<div class="col-12">
<router-link
@@ -46,156 +159,23 @@
>Profil</router-link
>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'login' }"
>Login</router-link
>
</div>
<div class="col-12">
<a
class="main-nav-link main-nav-link-sidebar"
v-on:click="doLogout()"
href="#"
>Loq Keluar</a
><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
>
</div>
</div>
</Sidebar>
<div class="card hidden lg:flex border-none">
<div
class="
flex
justify-content-between
px-3
md:px-6
h-3rem
flex-wrap
main-color
"
>
<div class="flex align-items-center justify-content-center">
<div class="company-title" type="button" v-on:click="toHome()">
<div class="logo-title">eLelong</div>
<img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
</div>
</div>
<div class="flex align-items-center justify-content-center">
<nav class="main-nav hidden lg:flex">
<ul class="main-nav-list">
<li>
<router-link class="main-nav-link" v-bind:to="{ name: 'home' }"
>Utama</router-link
>
</li>
<li>
<router-link class="main-nav-link" v-bind:to="{ name: 'list' }"
>Senarai</router-link
>
</li>
<li>
<router-link class="main-nav-link" v-bind:to="{ name: 'cart' }"
>Troli</router-link
>
</li>
<li>
<router-link
class="main-nav-link"
v-bind:to="{ name: 'bid-record' }"
>Rekod</router-link
>
</li>
<li>
<router-link class="main-nav-link" v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
</li>
<!-- <li>
<router-link class="main-nav-link" v-bind:to="{ name: 'login' }"
>Login</router-link
>
</li> -->
</ul>
</nav>
</div>
<div class="flex align-items-center justify-content-center">
<div class="profile-title hidden lg:flex">
<div class="dropdown">
<div
class="dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="bi bi-person-circle me-1"></i>{{ username }}
</div>
<ul class="dropdown-menu">
<li>
<div
type="button"
class="dropdown-item"
v-on:click="toProfile()"
>
Profil <i class="bi bi-person-workspace"></i>
</div>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<div
type="button"
v-on:click="doLogout()"
class="dropdown-item"
>
Log Keluar <i class="bi bi-box-arrow-right"></i>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- <div class="flex align-items-center justify-content-center">
<i
class="pi pi-bars text-white lg:hidden"
@click="visibleRight = true"
></i>
</div> -->
</div>
</div>
<div class="card sticky lg:hidden md:flex border-none">
<div
class="
flex
justify-content-between
px-3
md:px-6
h-3rem
flex-wrap
main-color
"
>
<div class="flex align-items-center justify-content-center">
<div class="company-title" type="button" v-on:click="toHome()">
<div class="logo-title">eLelong</div>
<img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
</div>
</div>
<div class="flex align-items-center justify-content-center">
<i
class="pi pi-bars text-white lg:hidden"
@click="visibleRight = true"
></i>
</div>
</div>
<div>
<div
class="
flex
justify-content-between
px-3
md:px-6
h-2rem
flex-wrap
bg-red-500
"
>
</div>
</div>
</div>
</template>
<script>
@@ -271,12 +251,6 @@ router-link:hover {
color: blue;
} */
@media screen and (max-width: 769px) {
.header {
padding: 0 1rem;
}
}
.main-color {
background-color: #1e417b;
}
@@ -304,7 +278,7 @@ router-link:hover {
display: flex;
justify-content: center;
align-items: center;
color: #e8ebef;
color: #eaf0f9;
font-size: 1rem;
font-weight: 700;
}
@@ -328,7 +302,7 @@ router-link:hover {
align-items: center;
justify-content: center;
height: 2.4rem;
color: #bbc2d0;
color: #82a4dc;
font-weight: 500;
font-size: 1rem;
transition: all 0.3s;
@@ -342,19 +316,29 @@ router-link:hover {
color: #1e417b !important;
}
.nav-button {
text-decoration: none;
margin: 0 1.5rem;
color: #82a4dc;
}
.nav-button:hover {
color: #eaf0f9;
}
a.router-link-exact-active {
background: #bbc2d0;
color: #1d3461;
background: #d5e1f3;
color: #1e417b;
border-radius: 10px;
padding: 1rem;
padding: 7px 20px;
}
a.router-link-exact-active:hover {
color: #142444;
color: #132a4f;
}
.profile-title {
color: #fff;
color: #eaf0f9;
}
.arrow-logo {