|
|
@@ -0,0 +1,209 @@
|
|
|
+<template>
|
|
|
+ <div class="sidebar-container">
|
|
|
+ <div class="fixed-requirements">
|
|
|
+ <h2>Fixed Requirements</h2>
|
|
|
+ <ul>
|
|
|
+ <li>Requirement 1</li>
|
|
|
+ <li>Requirement 2</li>
|
|
|
+ <li>Requirement 3</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="requirements-list">
|
|
|
+ <h2>Requirements</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(requirement, index) in requirements" :key="index" @click="selectRequirement(requirement)">{{ requirement.title }}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <button class="add-new-requirement-button" @click="addNewRequirement">Add New Requirement</button>
|
|
|
+ <button class="toggle-sidebar-button" @click="toggleSidebar"><i class="fas fa-angle-double-left"></i></button>
|
|
|
+ <transition name="slide">
|
|
|
+ <div v-if="isSidebarExpanded" class="expanded-sidebar">
|
|
|
+ <div class="expanded-requirements">
|
|
|
+ <h2>Expanded Requirements</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(requirement, index) in expandedRequirements" :key="index" @click="selectExpandedRequirement(requirement)">{{ requirement.title }}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ref } from 'vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'Sidebar',
|
|
|
+ setup() {
|
|
|
+ const requirements = ref([
|
|
|
+ { title: 'Requirement 1', details: 'Details for Requirement 1' },
|
|
|
+ { title: 'Requirement 2', details: 'Details for Requirement 2' },
|
|
|
+ { title: 'Requirement 3', details: 'Details for Requirement 3' },
|
|
|
+ ]);
|
|
|
+
|
|
|
+ const expandedRequirements = ref([]);
|
|
|
+
|
|
|
+ const selectRequirement = (requirement) => {
|
|
|
+ console.log(`Selected requirement: ${requirement.title}`);
|
|
|
+ // Logic to display requirement details in the main content area
|
|
|
+ };
|
|
|
+
|
|
|
+ const addNewRequirement = () => {
|
|
|
+ console.log('Adding new requirement...');
|
|
|
+ // Logic to add a new requirement
|
|
|
+ };
|
|
|
+
|
|
|
+ const toggleSidebar = () => {
|
|
|
+ console.log('Toggling sidebar...');
|
|
|
+ // Logic to toggle the visibility of the sidebar
|
|
|
+ };
|
|
|
+
|
|
|
+ const selectExpandedRequirement = (requirement) => {
|
|
|
+ console.log(`Selected expanded requirement: ${requirement.title}`);
|
|
|
+ // Logic to display expanded requirement details in the main content area
|
|
|
+ };
|
|
|
+
|
|
|
+ const isSidebarExpanded = ref(true);
|
|
|
+
|
|
|
+ return {
|
|
|
+ requirements,
|
|
|
+ expandedRequirements,
|
|
|
+ selectRequirement,
|
|
|
+ addNewRequirement,
|
|
|
+ toggleSidebar,
|
|
|
+ selectExpandedRequirement,
|
|
|
+ isSidebarExpanded,
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.sidebar-container {
|
|
|
+ width: 250px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #08002E;
|
|
|
+ color: white;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20px;
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.fixed-requirements {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.requirements-list {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.requirements-list h2 {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.requirements-list ul {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.requirements-list li {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #1E1E1E;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ transition: background-color 0.3s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.requirements-list li:hover {
|
|
|
+ background-color: #2E2E2E;
|
|
|
+}
|
|
|
+
|
|
|
+.add-new-requirement-button {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #1E1E1E;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ transition: background-color 0.3s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.add-new-requirement-button:hover {
|
|
|
+ background-color: #2E2E2E;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-sidebar-button {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: -40px;
|
|
|
+ background-color: #1E1E1E;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding: 10px;
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-sidebar-button:hover {
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
+
|
|
|
+.expanded-sidebar {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 250px;
|
|
|
+ width: 250px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #08002E;
|
|
|
+ color: white;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20px;
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.expanded-requirements {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.expanded-requirements h2 {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.expanded-requirements ul {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.expanded-requirements li {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #1E1E1E;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ transition: background-color 0.3s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.expanded-requirements li:hover {
|
|
|
+ background-color: #2E2E2E;
|
|
|
+}
|
|
|
+
|
|
|
+.slide-enter-active, .slide-leave-active {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+.slide-enter, .slide-leave-to {
|
|
|
+ transform: translateX(-250px);
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+</style>
|
genlitex