From 0d0a6ff9193e11312bd6542bcb7889d7b74efb7f Mon Sep 17 00:00:00 2001
From: Saladin21 <13519187@std.stei.itb.ac.id>
Date: Mon, 18 Apr 2022 00:34:01 +0700
Subject: [PATCH] modify header & navbar, implemented on user index
---
src/App.vue | 7 ++++++-
src/components/header.vue | 12 +++++++++---
src/components/sidebar.vue | 2 +-
src/views/UserIndex.vue | 8 ++++++--
4 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index bc89e5b..eec3402 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,8 +17,9 @@ export default {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
- margin: 0;
+ margin:0;
height: 100%;
+ margin-top: 100px;
}
html,
@@ -59,4 +60,8 @@ body {
.clickable{
cursor: pointer;
}
+
+.content_nav_active {
+ margin-left: 250px !important;
+}
</style>
diff --git a/src/components/header.vue b/src/components/header.vue
index 66a9edc..8dafca2 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -1,6 +1,6 @@
<template>
- <div class="header sticky-sm-top">
- <div class="container-fluid">
+ <div class="header fixed-top " v-bind:class="{ nav_active: nav_active }">
+ <div class="container-fluid" >
<div class="row justify-content-between">
<div class="col align-self-center">
<button
@@ -82,7 +82,8 @@ export default {
},
methods: {
onclick() {
- this.nav_active = !this.nav_active;
+ this.nav_active = !this.nav_active
+ document.getElementById("toggleNav").click()
},
showModal(){
this.isModalVisible = true;
@@ -137,6 +138,11 @@ export default {
.header {
margin-bottom: 5px;
background-color: white;
+ margin-left:5px;
+
+}
+.nav_active{
+ margin-left: 250px;
}
.btn {
background-color: #6992b4;
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index e4a6320..a737ffa 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -1,5 +1,5 @@
<template>
- <div class="col-auto px-0 sticky-sm-top">
+ <div class="fixed-top">
<!--
<button @click="setActive()" class="btn my-4 align-self-center" :class="{active_cont : isActive}" id="menu-btn">></button> -->
<div id="sidebar" class="collapse collapse-horizontal show border-end">
diff --git a/src/views/UserIndex.vue b/src/views/UserIndex.vue
index 43eb68b..8b7af35 100644
--- a/src/views/UserIndex.vue
+++ b/src/views/UserIndex.vue
@@ -1,5 +1,7 @@
<template>
- <div class="container-fluid">
+<div v-bind:class="{content_nav_active: nav_active}">
+ <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
+ <div class="container-fluid ">
<div class="row flex-nowrap">
<Sidebar current_page="Karyawan"></Sidebar>
<div class="col ps-md-2 pt-2">
@@ -86,6 +88,7 @@
</div>
</div>
</div>
+</div>
</template>
<script>
@@ -155,7 +158,8 @@ export default {
filter_type: "department_id",
selected_filter: "",
dept_last_page: 1,
- jabatan: []
+ jabatan: [],
+ nav_active : true,
};
},
methods: {
--
GitLab