Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(gsoc): navbar revamp #177

Open
wants to merge 37 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
4cb44fe
feat(gsoc): fix tabbar issue, project loading, updating, circuit dele…
Arnabdaz Jun 17, 2023
2966743
fix(netlify-build): add / to check netlify build fixes
Arnabdaz Jun 18, 2023
7048947
feat(netlify): add _redirects to fix routing issues with netlify depl…
Arnabdaz Jun 18, 2023
39aa9c6
fix(netlify): update netlify.toml to get _redirects to correct direct…
Arnabdaz Jun 18, 2023
39b3bb5
fix(netlify): move redirects to neltify.toml
Arnabdaz Jun 18, 2023
da44f65
feat(gsoc): update types for store and naming error fixes
Arnabdaz Jun 19, 2023
8f2d316
fix(gsoc): quit saving on clicking cancle while entering new proejct …
Arnabdaz Jun 19, 2023
2b54f90
feat(gsoc): update prompt component structure to make it a common hel…
Arnabdaz Jun 19, 2023
1ecd749
feat(gsoc): fix cancle on save unify circuit creation and deletion wi…
Arnabdaz Jun 20, 2023
8dd0799
feat(gsoc): add new project creation, project details update on creat…
Arnabdaz Jun 21, 2023
cba9c59
update(gsoc): convert alert() and confirm() to use vue component
Arnabdaz Jun 21, 2023
c02fd39
feat(gsoc): add import & export as .cv file with independent vue comp…
Arnabdaz Jun 22, 2023
48926a5
feat(gsoc): update updateProjectDetails.vue to show tags as chips whi…
Arnabdaz Jun 22, 2023
1db85e1
Merge branch 'ApiIntegration' into ImportExportAsCV
Arnabdaz Jun 23, 2023
c4bcf0a
feat(gsoc): revamp theuser menu in new github style, show user icon a…
Arnabdaz Jun 23, 2023
37c0379
feat(gsoc): revamp navbar links part 1 of revamping navbar
Arnabdaz Jun 24, 2023
80dfdfd
feat(gsoc): update color on menu list item hover
Arnabdaz Jun 24, 2023
959b66e
fix(key-binding): call new circuit correctly with the keybinding
Arnabdaz Jun 25, 2023
e468b15
feat(gsoc): update setup fucntion and fix linting issues, remove setT…
Arnabdaz Jun 27, 2023
dea9ee2
fix(gsoc): recover project not saving to localStorage due to generate…
Arnabdaz Jun 27, 2023
6047127
fix(lint): fix linting issues in save.js & remove var from setup.js f…
Arnabdaz Jun 27, 2023
df9a0bf
feat(jwt): add jwt in Authorization header
Arnabdaz Jun 27, 2023
24a032c
fix(linting): data.spec.js remove unused parameter "text" from line 26
Arnabdaz Jun 27, 2023
b3a3734
fix(lint): fix codeclimate linting issues
Arnabdaz Jun 27, 2023
66b45d9
Merge changes form ApiIntegration
Arnabdaz Jun 27, 2023
6cbb918
fix(lint): fix linting issues
Arnabdaz Jun 27, 2023
5c91207
Merge branch 'ImportExportAsCV' into UserMenuRevamp
Arnabdaz Jun 27, 2023
2234d72
Merge branch 'UserMenuRevamp' into NavbarRevamp
Arnabdaz Jun 27, 2023
7c010ee
feat(gsoc): update hamburger menu with sidebar
Arnabdaz Jun 30, 2023
94c3125
Merge branch 'main' into ImportExportAsCV
Arnabdaz Jul 8, 2023
2e08ef3
Merge branch 'ImportExportAsCV' into UserMenuRevamp
Arnabdaz Jul 9, 2023
24b3d5f
fix(build): fix build error
Arnabdaz Jul 9, 2023
6917b4d
Merge branch 'UserMenuRevamp' into NavbarRevamp
Arnabdaz Jul 9, 2023
b34b7d3
feat(gsoc): fix navar button style to match old styling
Arnabdaz Jul 9, 2023
330d052
Merge branch 'main' into UserMenuRevamp
Arnabdaz Jul 17, 2023
a83fcca
Merge branch 'UserMenuRevamp' into NavbarRevamp
Arnabdaz Jul 17, 2023
a62f538
Merge branch 'main' into NavbarRevamp
Arnabdaz Jan 6, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/Logo/Logo.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<router-link to="/">
<a href="/">
<span :class="cvlogo"></span>
</router-link>
</a>
</template>

<script>
126 changes: 126 additions & 0 deletions src/components/Navbar/Hamburger/Hamburger2.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<template v-else>
<UserMenu class="userMenuHamBurger" v-bind="userMenuState" />
<v-card id="toolbar" color="transparent" variant="outlined">
<v-layout>
<v-navigation-drawer
class="navDrawer"
v-model="navDrawer"
location="right"
temporary
>
<v-list-item class="d-flex justify-center align-center">
<span>Project Name: &nbsp;</span>
<span style="font-size: 1.5rem">
{{ projectStore.getProjectName }}
</span>
</v-list-item>

<v-divider></v-divider>

<v-list class="navDrawerList1" density="compact">
<v-list-item
class="navDrawerList1Item"
v-for="navbarItem in navbarData"
:key="navbarItem.id"
>
<NavbarLink2 :navbar-item="navbarItem" />
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-btn
color="transparent"
style="width: 100%"
flat
@click="userMenuClick"
>
<v-list-item
class="list-item-avatar"
:prepend-avatar="authStore.getUserAvatar"
:prepend-icon="
authStore.getUserAvatar === 'default'
? 'mdi-account-circle-outline'
: ''
"
:title="authStore.getUsername"
></v-list-item>
</v-btn>
</v-navigation-drawer>
<v-btn
class="navDrawerButton"
color="transparent"
flat
icon
@click="navDrawer = !navDrawer"
:class="{ active: navDrawer }"
>
<v-icon>mdi-menu</v-icon>
</v-btn>
</v-layout>
</v-card>
</template>

<script lang="ts" setup>
// import { useState } from '#/store/SimulatorStore/state'
import { useAuthStore } from '#/store/authStore'
import { useProjectStore } from '#/store/projectStore'
import { ref } from 'vue'
import NavbarLink2 from '../NavbarLinks/NavbarLink/NavbarLink2.vue'
import UserMenu from '../User/UserMenu.vue'
import { watch } from 'vue'
defineProps({
navbarData: { type: Array, default: () => [] },
})

// const SimulatorState = useState()
const authStore = useAuthStore()
const projectStore = useProjectStore()
const navDrawer = ref(false)
const userMenuState = ref()

function userMenuClick() {
const userMenuBtn = document.querySelector('.avatar-btn') as HTMLElement
if (userMenuBtn) {
userMenuBtn.click()
navDrawer.value = false
}
}
</script>

<style>
.navDrawer {
/* height: auto; */
/* width: 760px; */
/* justify-content: center; */
/* margin: auto; */
backdrop-filter: blur(5px) !important;
border-radius: 5px !important;
border: 0.5px solid var(--br-primary) !important;
background: var(--bg-primary-moz) !important;
background-color: var(--bg-primary-chr) !important;
color: white !important;
}
.navDrawerList1 {
background-color: transparent !important;
color: white !important;
}

.navDrawerList1 .v-btn {
width: 100% !important;
height: 2.5rem !important;
margin: auto !important;
}

.navDrawerButton {
color: white !important;
border: 1px solid white !important;
}

.userMenuHamBurger {
z-index: 1005 !important;
}

.userMenuHamBurger .avatar-btn {
/* display: hidden !important; */
visibility: hidden !important;
}
</style>
18 changes: 15 additions & 3 deletions src/components/Navbar/Navbar.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
<template>
<nav class="navbar navbar-expand-lg navbar-dark header">
<Logo :cvlogo="navbarLogo" />
<Hamburger v-if="showSidebar" />
<!-- <Hamburger v-if="showSidebar" /> -->
<Hamburger2 v-if="showSidebar" :navbar-data="navbarData" />

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<div
v-else
id="bs-example-navbar-collapse-1"
class="collapse navbar-collapse"
>
<NavbarLinks :navbar-data="navbarData" />

<span
@@ -12,7 +17,8 @@
>
{{ projectStore.getProjectName }}
</span>
<User :user-data="userDropdownItems" />
<!-- <User :user-data="userDropdownItems" /> -->
<UserMenu class="useMenuBtn" />
</div>
</nav>
<QuickButton />
@@ -21,13 +27,15 @@
<script lang="ts" setup>
import QuickButton from '@/Navbar/QuickButton/QuickButton.vue'
import User from '@/Navbar/User/User.vue'
import UserMenu from './User/UserMenu.vue'
import NavbarLinks from '@/Navbar/NavbarLinks/NavbarLinks.vue'

import navbarData from '#/assets/constants/Navbar/NAVBAR_DATA.json'
import userDropdownItems from '#/assets/constants/Navbar/USER_DATA.json'

import Logo from '@/Logo/Logo.vue'
import Hamburger from '@/Navbar/Hamburger/Hamburger.vue'
import Hamburger2 from './Hamburger/Hamburger2.vue'
import { ref, onMounted } from 'vue'
import { useProjectStore } from '#/store/projectStore'

@@ -48,4 +56,8 @@ function checkShowSidebar() {

<style scoped>
@import './Navbar.css';

.useMenuBtn {
margin: 0 2rem 0 auto;
}
</style>
129 changes: 129 additions & 0 deletions src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink2.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<template>
<v-menu open-on-hover location="bottom" v-model="menuButtonIsActive">
<template v-slot:activator="{ props }">
<v-btn
id="navbarMenuButton"
:class="menuButtonIsActive ? 'activeMenuButton' : ''"
class="navbarMenuButton"
color="transparent"
size="small"
flat
@click.prevent=""
v-bind="props"
:append-icon="
menuButtonIsActive ? 'mdi-menu-up' : 'mdi-menu-down'
"
>
{{ $t('simulator.nav.' + navbarItem.text + '.heading') }}
</v-btn>
</template>
<div class="menuListContainer">
<v-list class="menuList">
<v-list-item
class="menuListItem"
v-for="(listItem, index) in navbarItem.dropdownItems"
:key="index"
density="compact"
:id="listItem.itemid"
@click.stop="logixFunction[listItem.itemid]"
v-bind="
Object.fromEntries(
listItem.attributes.map((attr:AttrType) => [
attr.name,
attr.value,
])
)
"
>
<v-list-item-title>{{
$t(
'simulator.nav.' +
navbarItem.text +
'.' +
listItem.item
)
}}</v-list-item-title>
</v-list-item>
</v-list>
</div>
</v-menu>
</template>

<script lang="ts" setup>
// import DropDown from '@/Dropdown/DropDown.vue'
import logixFunction from '#/simulator/src/data'
import { ref } from 'vue'

interface AttrType {
name: string
value: string
}
defineProps({
navbarItem: { type: Object, default: () => {} },
})

const menuButtonIsActive = ref(false)
</script>

<style scoped>
.navbarMenuButton {
color: white !important;
font-size: 1rem !important;
font-weight: 400 !important;
text-transform: capitalize !important;
padding: 0 0 0 0.3rem !important;
letter-spacing: 0 !important;
}

.menuList {
/* height: auto; */
backdrop-filter: blur(5px) !important;
border-radius: 5px !important;
border: 0.5px solid var(--br-primary) !important;
background: var(--bg-primary-moz) !important;
background-color: var(--bg-primary-chr) !important;
color: white !important;
}

/* .v-btn {
color: white !important;
} */

.activeMenuButton {
/* outline: 1px solid white; */
border-bottom: solid;
}

.menuListContainer {
margin-top: 5px;
/* transform: translate(-100%, 0%); */
overflow-y: auto;
}
/* .menuList {
width: 100%;
} */

.menuListItem:hover,
.menuListItem:active {
background-color: var(--cus-btn-hov--bg) !important;
color: var(--cus-btn-hov-text) !important;
}

.menuListContainer::before {
background-color: transparent;
border-top: 1px solid var(--br-primary);
border-right: 1px solid var(--br-primary);
content: '';
width: 10px;
display: inline-block;
height: 10px;
position: absolute;
transform: translate(2.5rem, -3px) rotate(-45deg);
}
</style>

<style>
.navbarMenuButton i {
margin: 0 !important;
}
</style>
3 changes: 2 additions & 1 deletion src/components/Navbar/NavbarLinks/NavbarLinks.vue
Original file line number Diff line number Diff line change
@@ -5,12 +5,13 @@
:key="navbarItem.id"
class="navbar-nav navbar-menu noSelect pointerCursor"
>
<NavbarLink :navbar-item="navbarItem" />
<NavbarLink2 :navbar-item="navbarItem" />
</ul>
</template>

<script lang="ts" setup>
import NavbarLink from '@/Navbar/NavbarLinks/NavbarLink/NavbarLink.vue'
import NavbarLink2 from '@/Navbar/NavbarLinks/NavbarLink/NavbarLink2.vue'

const props = defineProps({
navbarData: { type: Array, default: () => [] },
Loading