[WIP]: Add styling to itemPage

- added smooth transformation
- added nav

frontend/src/components/ItemModel.vue

@@ -38,13 +38,16 @@
         <!-- input field -->
 
         <header class="inputField-header">
-          <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder=" " v-model="newItem" @keyup.enter="addItem"/>
+          <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder=" " v-model="newItem"
+                 @keyup.enter="addItem"/>
           <label for="inputTextField" class="formLabel">
-            Add here
+            Add here ...
           </label>
         </header>
 
-        <section class="main" v-show="items.length" v-cloak>
+        <!-- response element -->
+
+        <section class="item-section" v-show="items.length" v-cloak>
           <ul class="item-list">
             <li v-for="item in items"
                 class="item"
@@ -153,7 +156,6 @@
       }
     }
   }
-
 }
 export default Items
 </script>
@@ -180,6 +182,16 @@ export default Items
   background-color: darkcyan;
 }
 
+/* cursor styling */
+
+.cursor {
+  width: 1rem;
+  height: 1rem;
+  border: 0.15rem solid black;
+  border-radius: 100%;
+  position: absolute;
+}
+
 /* navbar styling */
 
 .navbar-header {
@@ -205,16 +217,15 @@ export default Items
     display: flex;
     list-style: none;
 
-    .nav-link{
-
     a {
       margin: 0.2rem;
       padding: 1rem 0.5rem;
+      transition: all 300ms;
     }
 
     a:hover {
       font-size: 3.5rem;
-
+      transition: all 300ms;
     }
   }
 }
@@ -230,8 +241,8 @@ export default Items
     display: block;
     position: relative;
     background: black;
-      height: 5px;
+    height: 2.5px;
-      width: 40px;
+    width: 3rem;
     border-radius: 4px;
 
     &::before, &::after {
@@ -257,7 +268,7 @@ export default Items
 .menu-btn {
   display: none;
 }
-}
+
 
 .logo:hover {
   cursor: default;
@@ -269,18 +280,19 @@ export default Items
 
     .menu-icon {
       display: block;
+      font-weight: bold;
 
       &__line {
-        animation: closedButton 0.8s backwards;
+        animation: closedButton 1s backwards;
         animation-direction: reverse;
 
         &::before {
-          animation: closedButtonBefore 0.8s backwards;
+          animation: closedButtonBefore 1s backwards;
           animation-direction: reverse;
         }
 
         &::after {
-          animation: closedButtonAfter 0.8s backwards;
+          animation: closedButtonAfter 1s backwards;
           animation-direction: reverse;
         }
       }
@@ -298,11 +310,12 @@ export default Items
       width: 100vw;
       height: 100vh;
       font-size: 2rem;
+      font-weight: bolder;
+      letter-spacing: 0.25rem;
       color: white;
       background: #272727;
 
-      transition:
+      transition: opacity 0.8s 0.5s,
-          opacity 0.8s 0.5s,
       clip-path 1s 0.5s;
       clip-path: circle(200px at top right);
 
@@ -333,16 +346,16 @@ export default Items
 
       .menu-icon__line {
         background: white;
-        animation: openButton 0.8s forwards;
+        animation: openButton 1s forwards;
 
         &::before {
           background: white;
-          animation: openButtonBefore 0.8s forwards;
+          animation: openButtonBefore 1s forwards;
         }
 
         &::after {
           background: white;
-          animation: openButtonAfter 0.8s forwards;
+          animation: openButtonAfter 1s forwards;
         }
       }
     }
@@ -436,6 +449,7 @@ export default Items
   outline: none;
   padding: 1.5rem;
   background: none;
+  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4);
 }
 
 
@@ -463,6 +477,7 @@ export default Items
   left: 0.25rem;
   font-size: 0.00001rem;
   color: black;
+  // set context here
 }
 
 .newItemName:focus ~ .formLabel, .newItemName:not(:placeholder-shown).newItemName:not(:focus) ~ .formLabel {
@@ -470,6 +485,9 @@ export default Items
   left: 0.25rem;
   font-size: 0.00001rem;
   color: black;
+  // set context here
 }
 
+/* item section */
+
 </style>