From b9cd3e3f9f80fa2115ddaf1b796adecf8adb1a81 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Tue, 18 Apr 2023 10:43:54 +1000
Subject: [PATCH] added transitions

---
 resources/js/components/SMMastHead.vue |  7 +++++++
 resources/js/components/SMNavbar.vue   | 12 ++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/SMMastHead.vue b/resources/js/components/SMMastHead.vue
index 4c3d0b3..922ec4d 100644
--- a/resources/js/components/SMMastHead.vue
+++ b/resources/js/components/SMMastHead.vue
@@ -93,13 +93,20 @@ const tabs = () => {
             margin-bottom: 32px;
             font-size: 80%;
             text-decoration: none;
+            transition: color 0.1s linear;
 
             &:hover {
                 color: rgb(255, 255, 255, 1);
+
+                ion-icon {
+                    margin-left: -4px;
+                    margin-right: 8px;
+                }
             }
 
             ion-icon {
                 margin-right: 4px;
+                transition: margin 0.1s linear;
             }
         }
     }
diff --git a/resources/js/components/SMNavbar.vue b/resources/js/components/SMNavbar.vue
index 9d4b2a7..62d867f 100644
--- a/resources/js/components/SMNavbar.vue
+++ b/resources/js/components/SMNavbar.vue
@@ -173,7 +173,7 @@ body[data-route-name="page-home"] {
         background-color: var(--navbar-color) !important;
 
         #sm-nav {
-            display: flex;
+            max-height: 100vh;
         }
 
         #sm-nav-toggle {
@@ -223,22 +223,26 @@ body[data-route-name="page-home"] {
 
         #sm-nav-toggle {
             padding: 24px;
+            cursor: pointer;
         }
     }
 
     #sm-nav {
-        display: none;
+        display: flex;
         flex-direction: column;
         width: 100%;
         font-weight: 800;
-        padding-bottom: 12px;
+        transition: max-height 0.5s ease-in-out;
+        height: auto;
+        max-height: 0;
+        overflow: hidden;
 
         ul {
             display: block;
             width: 100%;
             list-style-type: none;
             margin: 0;
-            padding: 0;
+            padding: 0 0 12px 0;
 
             li a {
                 color: var(--base-color-text);