From 2dc60b6acf80d5b09be702098cfa4c83a9c29fbb Mon Sep 17 00:00:00 2001
From: LimePot <nelle@limepot.xyz>
Date: Mon, 19 Dec 2022 14:18:58 -0700
Subject: [PATCH] UI elements

---
 assets/planet-outline.svg |  1 -
 index.html                | 54 ++++++++++++++++++++++-----------------
 style.css                 | 48 +++++++++++++++++++++++++++++++---
 3 files changed, 76 insertions(+), 27 deletions(-)
 delete mode 100644 assets/planet-outline.svg

diff --git a/assets/planet-outline.svg b/assets/planet-outline.svg
deleted file mode 100644
index 550d5a4..0000000
--- a/assets/planet-outline.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Planet</title><path d="M413.48 284.46c58.87 47.24 91.61 89 80.31 108.55-17.85 30.85-138.78-5.48-270.1-81.15S.37 149.84 18.21 119c11.16-19.28 62.58-12.32 131.64 14.09" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><circle cx="256" cy="256" r="160" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 6d502e5..3a0d125 100644
--- a/index.html
+++ b/index.html
@@ -14,37 +14,36 @@
     <div class="navigation">
         <div class="menuToggle"></div>
         <ul>
-            <li class="list">
+            <li class="list active" style="--clr:rgb(0, 196, 157);">
                 <a href="#">
-                    <span class="icon"><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-                        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script></span>
+                    <span class="icon"><ion-icon name="planet"></ion-icon></span>
                     <span class="text">Home</span>
                 </a>
             </li>
-            <li class="list">
+            <li class="list" style="--clr:rgb(0, 196, 157);">
                 <a href="#">
-                    <span class="icon"></span>
+                    <span class="icon"><ion-icon name="egg"></ion-icon></span>
                     <span class="text">About</span>
                 </a>
             </li>
-            <li class="list">
-                <a href="#">
-                    <span class="icon"></span>
-                    <span class="text">Projects</span>
-                </a>
-            </li>
-            <li class="list">
-                <a href="#">
-                    <span class="icon"></span>
-                    <span class="text">Photography</span>
-                </a>
-            </li>
-            <li class="list">
-                <a href="#">
-                    <span class="icon"></span>
-                    <span class="text">Videography</span>
-                </a>
-            </li>
+            <li class="list" style="--clr:rgb(0, 196, 157);">
+            <a href="#">
+                <span class="icon"><ion-icon name="code-slash"></ion-icon></span>
+                <span class="text">Projects</span>
+            </a>
+        </li>
+        <li class="list" style="--clr:rgb(0, 196, 157);">
+            <a href="#">
+                <span class="icon"><ion-icon name="camera"></ion-icon></span>
+                <span class="text">Photography</span>
+            </a>
+        </li>
+        <li class="list" style="--clr:rgb(0, 196, 157);">
+            <a href="#">
+                <span class="icon"><ion-icon name="videocam"></ion-icon></span>
+                <span class="text">Videography</span>
+            </a>
+        </li>
         </ul>
     </div>
 
@@ -57,6 +56,15 @@
         menuToggle.onclick = function(){
             navigation.classList.toggle('open')
         }
+
+        const list = document.querySelectorALl('.list');
+        function activeLink(){
+            list.forEach((item) =>
+            item.classList.remove('active'));
+            this.classList.add('active');
+        }
+        list.forEach((item) =>
+        item.addEventListener('click',activeLink))
     </script>
 
 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
diff --git a/style.css b/style.css
index d289f8b..18c8455 100644
--- a/style.css
+++ b/style.css
@@ -8,14 +8,14 @@
 }
 body
 {
-    background:#2b272b;
+    background:#332e33;
 }
 .navigation
 {
     position: fixed;
     inset: 20px 0 20px 20px;
-    width: 105px;
-    background: #332e33;
+    width: 140px;
+    background: #2b272b;
     transition: 0.5s;
     display: flex;
     justify-content: center;
@@ -68,4 +68,46 @@ body
 {
     transform: translateY(0px) rotate(-45deg);
     box-shadow: 0 0 0 #413b41;
+}
+.navigation ul
+{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%
+}
+.navigation ul li
+{
+    list-style: none;
+    position: relative;
+    width: 100%;
+    height: 60px;
+    padding: 0 10px;
+    transition: 0.5;
+}
+.navigation ul li a
+{
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: center;
+    text-decoration: none;
+}
+.navigation ul li a .icon
+{
+    position: relative;
+    display: block;
+    min-width: 55px;
+    height: 55px;
+    line-height: 60px;
+    transition: 05.s;
+    border-radius: 10px;
+    font-size: 1.75em;
+    color: #222;
+}
+.navigation ul li.active a .icon
+{
+    color: #fff;
+    background: var(--clr);
 }
\ No newline at end of file