priyatham
/
gcs-user-interface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init navbar layout

This commit is contained in:
Steven C 2024-02-09 13:32:06 -08:00
parent 3d94a02a8b
commit ba94f0a568
6 changed files with 1215 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -4,11 +4,14 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

1112
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -10,15 +10,15 @@
"tauri": "tauri"
},
"dependencies": {
"vue": "^3.2.45",
"@tauri-apps/api": "^1.4.0"
"@tauri-apps/api": "^1.4.0",
"vue": "^3.2.45"
},
"devDependencies": {
"@tauri-apps/cli": "^1.4.0",
"@types/node": "^18.7.10",
"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.5",
"vite": "^4.2.1",
"vue-tsc": "^1.0.11",
"@tauri-apps/cli": "^1.4.0"
"vue-tsc": "^1.0.11"
}
}

4
src/App.vue
View File

@ -2,9 +2,13 @@
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Greet from "./components/Greet.vue";
import Navbar from "./components/Navbar.vue";
</script>
<template>
<div>
<Navbar/>
</div>
<div class="container">
<h1>Welcome to Tauri!</h1>

14
src/assets/NGCP.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

78
src/components/Navbar.vue Normal file
View File

@ -0,0 +1,78 @@
<script>
export default {
data() {
return {
isNavbarOpen: false,
misson_one_status: "Not Started",
misson_two_status: "Not Started",
misson_three_status: "Not Started",
};
},
methods: {
toggleNavbar() {
this.isNavbarOpen = !this.isNavbarOpen;
}
}
};
</script>
<template>
<nav style="background-color: #011949; padding: 10px;">
<div style="display: flex; align-items: center;">
<a href="#" style="text-decoration: none;">
<img src="../assets/NGCP.svg" alt="" width="40" height="24">
<span style="font-weight: bold; font-size: 1.2rem; margin-left: 10px;">NG</span>
<span style="font-weight: bold; font-size: 1.2rem; color: white">CP</span>
</a>
<div style="width: 12rem; height:4rem;border: 2px solid rgb(52, 49, 49); background-color: rgb(255, 255, 255); margin-left: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<div>
<span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 1</span>
<button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
<span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
</button>
</div>
<div>
<span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Status: {{ misson_one_status }}</span>
</div>
</div>
<div style="width: 12rem; height:4rem;border: 2px solid rgb(52, 49, 49); background-color: rgb(255, 255, 255); margin-left: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<div>
<span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 2</span>
<button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
<span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
</button>
</div>
<div>
<span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Status: {{ misson_two_status }}</span>
</div>
</div>
<div style="width: 12rem; height:4rem;border: 2px solid rgb(52, 49, 49); background-color: rgb(255, 255, 255); margin-left: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<div>
<span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 3</span>
<button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
<span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
</button>
</div>
<div>
<span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Status: {{ misson_three_status }}</span>
</div>
</div>
<button style="border: 2px solid rgb(255, 0, 0); background-color: rgba(255, 0, 0); margin-left: auto; color: rgb(255, 255, 255);" type="button" @click="">
<span style="font-size: 18px;">STOP ALL</span>
</button>
<button style="border: 2px solid rgb(52, 49, 49); background-color: rgba(38, 36, 36, 0.25); margin-left: auto; color: rgb(52, 49, 49);" type="button" @click="toggleNavbar">
<span style="font-size: 18px;">&#9776;</span>
</button>
</div>
<div v-if="isNavbarOpen" style="margin-top: 10px;">
<ul style="list-style-type: none; padding-left: 0;">
<!-- Insert your menu items here -->
<li><a href="#" style="text-decoration: none;">Home</a></li>
<li><a href="#" style="text-decoration: none;">Link</a></li>
<li><a href="#" style="text-decoration: none;">Disabled</a></li>
</ul>
</div>
</nav>
</template>