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

sidebar

Browse Source
This commit is contained in:
Afrina Alimi
2022-12-19 10:59:27 +08:00
parent c1af202ad5
commit 7641d7fc67
3 changed files with 110 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/TheHeader.vue
+89 -21
View File
@@ -2,25 +2,17 @@
<!-- Navbar for laptop screen size (width>992px) -->
<Toast :breakpoints="{ '500px': { width: '100%', right: '0', left: '0' } }" />
<div class="card sticky-top 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 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()">
<img class="logo-img mr-2" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
<!-- <img class="logo-img mr-2" src="img/e-rahn-lelong.png" alt="arrahn-logo" /> -->
<Button icon="pi pi-th-large" @click="visibleLeft = true" class="mr-2" />
<!-- <div class="logo-title">E-Rahn Lelong</div> -->
</div>
</div>
<div class="flex align-items-center justify-content-center">
<nav class="main-nav">
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
<!-- <nav class="main-nav">
<router-link class="nav-button" v-bind:to="{ name: 'home' }"
>Utama</router-link
>
@@ -39,7 +31,7 @@
<router-link class="nav-button" v-bind:to="{ name: 'login' }"
>Login</router-link
>
</nav>
</nav> -->
</div>
<div class="flex align-items-center justify-content-center">
<div class="profile-title hidden lg:flex">
@@ -93,8 +85,8 @@
>
<div class="flex align-items-center justify-content-center">
<div class="company-title" type="button" v-on:click="toHome()">
<div class="logo-title">E-Rahn Lelong</div>
<img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
<!-- <div class="logo-title">E-Rahn Lelong</div> -->
</div>
</div>
@@ -111,7 +103,7 @@
</div>
</div> -->
</div>
<Sidebar v-model:visible="visibleRight" position="right">
<!-- <Sidebar v-model:visible="visibleRight" position="right">
<div class="grid">
<div class="col-12">
<div class="text-center">
@@ -176,16 +168,92 @@
>
</div>
</div>
</Sidebar>
</Sidebar> -->
<Sidebar :visible.sync="visibleLeft" autoZIndex dismissable:false>
<!-- <h3>Left Sidebar</h3> -->
<div class="grid">
<!-- <div class="col-12">
<div class="text-center">
<i class="bi bi-person-circle me-1"></i> {{ username }}
</div>
</div> -->
<div class="col-12">
<div class="text-center">
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
</div>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'home' }"
>Utama</router-link
>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'list' }"
>Senarai</router-link
>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'cart' }"
>Troli</router-link
>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'bid-record' }"
>Rekod</router-link
>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'profile' }"
>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="#"
><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
>
</div>
</div>
</Sidebar>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
username: localStorage.getItem("username"),
visibleRight: false,
visibleLeft: false,
lelongOnline: "",
};
},
@@ -281,7 +349,7 @@ router-link:hover {
} */
.main-color {
background-color: #333333;
background-color: #008F96;
}
.border-none {
@@ -334,7 +402,7 @@ router-link:hover {
align-items: center;
justify-content: center;
height: 2.4rem;
color: #eaf0f9;
color: #2c2d2e;
font-weight: 500;
font-size: 1rem;
transition: all 0.3s;
src/components/layouts/TheSidebar.vue
+18
View File
@@ -0,0 +1,18 @@
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
<h3>Left Sidebar</h3>
</Sidebar>
<script>
export default {
data() {
return {
visibleLeft: false,
// visibleRight: false,
// visibleTop: false,
// visibleBottom: false,
// visibleFull: false
}
}
}
</script>
src/components/layouts/TheTemplate.vue
+3 -3
View File
@@ -1,9 +1,9 @@
<template>
<div class="content-page" style="background-color: #fec234;">
<div class="content" style="background-color: #fec234;">
<div class="content-page" style="background-color: #eeeeee;">
<div class="content" style="background-color: #eeeeee;">
<the-header />
<br>
<div class="container pt-2" style="background-color: #333333;">
<div class="container pt-2" style="background-color: #FAE79A;">
<slot></slot>
</div>
</div>