Sidebar now fully hides and uses localstorage to maintain previous state

package.json

@@ -15,6 +15,7 @@
     "express-validator": "^7.1.0",
     "firebase": "^10.12.1",
     "formidable": "^3.5.1",
+    "fullpage.js": "^4.0.26",
     "mysql": "^2.18.1",
     "mysql2": "^3.10.2",
     "nodemailer": "^6.9.13",

src/components/SidebarComponents/SideBar.vue

@@ -1,12 +1,16 @@
 <template>
+  <div class="collapse-container">
+    <div @click="toggleWidth" class="collapse-icon" 
+      :style="{ width: toggleButtonWidth + 'px', 'background-color': colors.sideBar }">
+      <div class="collapse-icon" :class="{ 'rotate-180': !toggleBar }">
+        >
+      </div>
+    </div>
+  </div>
   <div :style="{ width: sidebarWidth + 'px', 'background-color': colors.sideBar }" class="sidebar">
-    <div @click="toggleWidth" class="collapse-icon" :class="{ 'rotate-180': !toggleBar }">></div>
     <nav class="needPadding">
-      <router-link v-for="(route, index) in routes" :to="route.path" :key="index"
-        ref="routerLinks"
-        class="sidebarItem"
-        :class="{ 'active': $route.path === route.path }"
-        @click="setActiveItem(route.path)">
+      <router-link v-for="(route, index) in routes" :to="route.path" :key="index" ref="routerLinks" class="sidebarItem"
+        :class="{ 'active': $route.path === route.path }" @click="setActiveItem(route.path)">
         {{ route.label }}
       </router-link>
     </nav>
@@ -33,14 +37,19 @@ export default {
     const colors = inject('colors');
     const toggleBar = ref(false);
     const sidebarWidth = ref(180);
+    const toggleButtonWidth = ref(180);
     const activeItem = ref(null);
     const routerLinks = ref([]);
 
     const toggleWidth = () => {
       toggleBar.value = !toggleBar.value;
-      sidebarWidth.value = toggleBar.value ? 30 : 180;
+      console.log(toggleBar.value); //Bar becomes false when the sidebar becomes exposed, bar becomes true when sidebar is hidden
+      sidebarWidth.value = toggleBar.value ? 0 : 180;
+      toggleButtonWidth.value = toggleBar.value ? 50 : 180;
+      localStorage.setItem('isSideBarExtended', JSON.stringify(toggleBar.value));
     };
 
+
     const setActiveItem = (item) => {
       activeItem.value = item;
     };
@@ -62,6 +71,13 @@ export default {
     onMounted(() => {
       document.addEventListener('keyup', handleEscapeKey);
 
+      const storedSideBarBool = localStorage.getItem('isSideBarExtended');
+      if (storedSideBarBool !== null) {
+        toggleBar.value = JSON.parse(storedSideBarBool);
+        sidebarWidth.value = toggleBar.value ? 0 : 180;
+        toggleButtonWidth.value = toggleBar.value ? 50 : 180;
+      }
+
       nextTick(() => {
         routerLinks.value = Array.from(document.querySelectorAll('.sidebarItem'));
 
@@ -78,6 +94,7 @@ export default {
       });
     });
 
+
     onUnmounted(() => {
       document.removeEventListener('keyup', handleEscapeKey);
       routerLinks.value.forEach((link) => {
@@ -90,6 +107,7 @@ export default {
       routes,
       toggleBar,
       sidebarWidth,
+      toggleButtonWidth,
       toggleWidth,
       activeItem,
       setActiveItem,
@@ -101,6 +119,14 @@ export default {
     this.setActiveItem(to.path);
     next();
   },
+  created(){
+   /* const storedSideBarBool = JSON.parse(localStorage.getItem('isSideBarExtended'));
+    console.log(storedSideBarBool);
+    console.log('inside');
+    if (storedSideBarBool !== null && storedSideBarBool !== 'undefined') {
+      this.toggleBar = storedSideBarBool;
+    }*/
+  }
 };
 </script>
 
@@ -109,11 +135,11 @@ export default {
   height: 100%;
   position: fixed;
   z-index: 1;
-  top: 0;
+  top: 15;
   left: 0;
   overflow-x: hidden;
   transition: 0.4s ease-out;
-  padding-top: 30px;
+  padding-top: 10px;
   display: flex;
   flex-direction: column;
 }
@@ -151,14 +177,29 @@ export default {
 }
 
 .collapse-icon {
+  z-index: 2;
   cursor: pointer;
-  transition: 0.3s linear;
   display: flex;
-  justify-content: center;
   font-size: 20px;
+  color: white;
+  justify-content: center;
+  transition: 0.3s ease-out;
+}
+
+.collapse-container {
+  height: 15px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  justify-content: center;
 }
 
 .rotate-180 {
   transform: rotate(180deg);
+
+}
+
+.standout {
+  background-color: red;
 }
 </style>

src/views/AboutMe.vue

@@ -1,30 +1,30 @@
 <template>
   <div class="about-me">
     <div class="section">
-      <h2>Personality</h2>
+      <h2>Hi I'm Phillip Ring</h2>
       <p>
-        I'm a passionate and innovative software developer who loves diving deep into complex problems and finding elegant solutions. I thrive in collaborative environments and enjoy brainstorming ideas with team members to create impactful software solutions.
+         I crave efficiency and finding new ways to improve. I'm a honors senior year computer science student attending UT Tyler.
       </p>
     </div>
 
     <div class="section">
       <h2>Skills</h2>
       <ul>
-        <li>Proficient in Vue.js, JavaScript, HTML, and CSS</li>
-        <li>Familiarity with back-end technologies such as Node.js and Express.js</li>
-        <li>Understanding of MySql database design.</li>
+        <li>Technologies: Javascript HTML/CSS, MySQL Vue.js, Node, Express.js, BASH </li>
+        <li>Familiarity with other systems such as Git, Vscode, Wireshark</li>
         <li>Knowledgeable in version control systems like Git</li>
-        <li>Ability to design responsive and user-friendly interfaces</li>
       </ul>
     </div>
 
     <div class="section">
+      <h2>Projects</h2>
+
     </div>
 
     <div class="section">
       <h2>Contact</h2>
       <p>
-        Feel free to reach out to me via email [email protected] or connect with me on LinkedIn <a href="https://www.linkedin.com/in/ring-phillip">here</a>. I'm always open to new connections and collaboration.
+        Feel free to reach out to me via email [email protected] or connect with me on <a href="https://www.linkedin.com/in/ring-phillip">LinkedIn</a>. I'm always open to new connections and collaboration.
       </p>
     </div>
   </div>
@@ -40,6 +40,7 @@ export default {
 .about-me {
   max-width: 800px;
   margin: 0 auto;
+  background-color: white;
 }
 
 .section {