updated navbar design

public/assets/hamburger.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" version="1.1" viewBox="0 0 6.3499998 6.3499998" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<metadata>
+<rdf:RDF>
+<cc:Work rdf:about="">
+<dc:format>image/svg+xml</dc:format>
+<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+<dc:title/>
+</cc:Work>
+</rdf:RDF>
+</metadata>
+<g transform="translate(0,-290.65)">
+<path transform="matrix(.26458 0 0 .26458 0 290.65)" d="m4 3c-1.108 0-2 0.89201-2 2s0.89201 2 2 2h16c1.108 0 2-0.89201 2-2s-0.89202-2-2-2h-16zm0 6.7773c-1.108 0-2 0.94178-2 2.1113s0.89201 2.1113 2 2.1113h16c1.108 0 2-0.94178 2-2.1113s-0.89201-2.1113-2-2.1113h-16zm0 7c-1.108 0-2 0.94178-2 2.1113s0.89203 2.1113 2 2.1113h16c1.108 0 2-0.94178 2-2.1113s-0.89203-2.1113-2-2.1113h-16z" fill="#333f67"/>
+</g>
+</svg>

resources/js/components/SMContainer.vue

@@ -23,20 +23,15 @@ const slots = useSlots();
 <style lang="scss">
 .sm-container {
     display: flex;
-    flex-direction: column;
-    flex: 1;
-    padding-left: 1rem;
-    padding-right: 1rem;
     width: 100%;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 16px 0 16px;
+    margin: auto;
     max-width: 1200px;
-    margin: 0 auto;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
 
     &.full {
-        padding-left: 0;
+        padding: 0;
-        padding-right: 0;
         max-width: 100%;
 
         .sm-container-inner {

resources/js/components/SMNavbar.vue

@@ -1,20 +1,31 @@
 <template>
     <SMContainer
         :full="true"
-        :class="['sm-navbar', { 'sm-show-dropdown': showToggle }]"
+        :class="['sm-navbar', { 'sm-show-nav': showToggle }]"
-        @click="handleClickHideMenu">
+        @click="handleClickNavBar">
-        <template #inner>
+        <template #default>
-            <div class="sm-navbar-container">
+            <div id="sm-nav-head">
-                <router-link
+                <router-link :to="{ name: 'home' }" id="sm-logo-link">
-                    :to="{ name: 'home' }"
+                    <img
-                    class="sm-brand"></router-link>
+                        class="sm-nav-logo"
-                <ul class="sm-navmenu flex-fill">
+                        src="/assets/logo.png"
+                        width="270"
+                        height="40"
+                        alt="STEMMechanics" />
+                </router-link>
+                <label id="sm-nav-toggle" @click.stop="handleClickToggleMenu"
+                    ><img
+                        src="/assets/hamburger.svg"
+                        width="24"
+                        height="24"
+                        alt="Navbar Toggle"
+                /></label>
+            </div>
+            <div id="sm-nav">
+                <ul class="left">
                     <template v-for="item in menuItems">
                         <li
-                            v-if="
+                            v-if="item.show == undefined || item.show()"
-                                item.inNav &&
-                                (item.show == undefined || item.show())
-                            "
                             :key="item.name">
                             <router-link :to="item.to">{{
                                 item.label
@@ -22,47 +33,15 @@
                         </li>
                     </template>
                 </ul>
-                <SMButton
+                <ul class="right"></ul>
-                    :to="{ name: 'event-list' }"
-                    class="sm-navbar-cta"
-                    label="Find a workshop"
-                    icon="arrow-forward-outline" />
-                <div
-                    class="sm-navbar-toggle-menu"
-                    @click.stop="handleClickToggleMenu">
-                    <span>Menu</span
-                    ><ion-icon name="reorder-three-outline"></ion-icon>
-                </div>
             </div>
         </template>
-        <div class="sm-navbar-dropdown-cover"></div>
-        <ul class="sm-navbar-dropdown">
-            <li class="ml-auto">
-                <div
-                    class="sm-navbar-close-menu"
-                    @click.stop="handleClickToggleMenu">
-                    <ion-icon name="close-outline"></ion-icon>
-                </div>
-            </li>
-            <template v-for="item in menuItems">
-                <li
-                    v-if="item.show == undefined || item.show()"
-                    :key="item.name">
-                    <router-link :to="item.to"
-                        ><ion-icon :name="item.icon" />{{
-                            item.label
-                        }}</router-link
-                    >
-                </li>
-            </template>
-        </ul>
     </SMContainer>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
 import { useUserStore } from "../store/UserStore";
-import SMButton from "./SMButton.vue";
 
 const userStore = useUserStore();
 const showToggle = ref(false);
@@ -126,17 +105,17 @@ const menuItems = [
 ];
 
 /**
- * Hanfle the user clicking an element to toggle the dropdown menu.
+ * Handle the user clicking an element to toggle the dropdown menu.
  */
 const handleClickToggleMenu = () => {
     showToggle.value = !showToggle.value;
 };
 
 /**
- * Handle the user clicking an element to hide the dropdown menu.
+ * Handle the user clicking an element to toggle the dropdown menu.
  */
-const handleClickHideMenu = () => {
+const handleClickNavBar = () => {
-    if (showToggle.value) {
+    if (showToggle.value == true) {
         showToggle.value = false;
     }
 };
@@ -144,239 +123,67 @@ const handleClickHideMenu = () => {
 
 <style lang="scss">
 .sm-navbar {
-    height: 4.5rem;
-    align-items: center;
-    justify-content: center;
-    font-weight: 800;
     position: relative;
-    flex: 0 0 auto !important;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
     z-index: 1000;
+    background-color: rgb(134 144 154 / 15%);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
 
-    &.sm-show-dropdown {
+    &.sm-show-nav {
-        .sm-navbar-dropdown-cover {
+        background-color: #333639;
-            visibility: visible;
-            opacity: 1;
-            transition: visibility 0.3s linear, opacity 0.3s linear;
-        }
 
-        .sm-navbar-dropdown {
+        #sm-nav {
-            margin-top: 0;
+            display: flex;
-            transition: margin 0.5s ease-in-out;
         }
     }
 
-    .sm-navbar-dropdown-cover {
+    #sm-nav-head {
-        position: fixed;
-        visibility: hidden;
-        z-index: 2000;
-        opacity: 0;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(0, 0, 0, 0.25);
-        overflow: hidden;
-    }
-
-    .sm-navbar-dropdown {
-        position: fixed;
-        z-index: 2001;
-        top: 0;
-        left: 0;
-        right: 0;
-
         display: flex;
-        flex-direction: column;
+        justify-content: space-between;
-        padding: 0 2rem 1rem 2rem;
-        background-color: #fff;
-        justify-content: center;
         align-items: center;
-        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+        width: 100%;
-        list-style-type: none;
+        max-width: 1200px;
-        margin: -500px 0 0 0;
+        padding: 0 16px 0 16px;
 
-        li {
+        #sm-logo-link {
-            padding-top: 0.75rem;
+            padding-left: 23px;
-            padding-bottom: 0.75rem;
 
-            a {
+            img {
-                display: inline-block;
+                display: block;
-                width: map-get($spacer, 5) * 3;
-
-                ion-icon {
-                    padding-right: map-get($spacer, 1);
-                    font-size: map-get($spacer, 4);
-                    vertical-align: middle;
-                }
             }
         }
-    }
+        #sm-nav-toggle {
-
+            padding: 23px;
-    .sm-navmenu,
-    .sm-navbar-dropdown {
-        padding-top: map-get($spacer, 4);
-
-        li {
-            margin: 0 0.75rem;
-
-            a {
-                color: rgba(0, 0, 0, 0.8);
-                text-decoration: none;
-                font-size: 1rem;
-                transition: color 0.1s;
-
-                &:hover {
-                    color: #409eff;
-                }
-            }
-        }
-
-        .sm-navbar-close-menu ion-icon {
-            cursor: pointer;
-            font-size: map-get($spacer, 4);
-            padding-left: map-get($spacer, 1);
 
             &:hover {
-                color: $danger-color;
+                background-color: rgba(255, 255, 255, 0.25);
+            }
+
+            img {
+                display: block;
             }
         }
     }
 
-    .sm-navbar-container {
+    #sm-nav {
-        display: flex;
+        display: none;
-        flex: 1;
+        padding: 10px 24px;
-        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        font-weight: 800;
 
-        .sm-brand {
+        ul {
-            display: inline-block;
+            display: block;
-            background-image: url("/img/logo.png");
+            width: 100%;
-            background-position: left top;
-            background-repeat: no-repeat;
-            background-size: contain;
-            width: 13.5rem;
-            height: 2rem;
-        }
-
-        .sm-navmenu {
-            flex: 1;
-            display: flex;
-            justify-content: end;
             list-style-type: none;
-            padding: 0 1rem;
+            margin: 0;
-        }
+            padding: 0;
 
-        .sm-navbar-toggle-menu {
+            li a {
-            cursor: pointer;
+                display: block;
-            align-items: center;
+                padding: 8px 0 8px 0;
-            font-size: 0.9rem;
-            margin-left: 2rem;
-            margin-right: 1rem;
-
-            span {
-                display: none;
-            }
-
-            ion-icon {
-                margin-left: 0.5rem;
-                font-size: map-get($spacer, 4);
             }
         }
     }
-
-    .sm-navbar-cta {
-        font-size: 0.9rem;
-        padding: 0.6rem 1.1rem;
-    }
-}
-
-@media only screen and (max-width: 1200px) {
-    .sm-navbar .navbar-container {
-        .sm-navmenu li {
-            display: none;
-        }
-
-        .sm-navbar-toggle-menu {
-            display: flex;
-        }
-    }
-}
-
-@media only screen and (max-width: 992px) {
-    .sm-navbar {
-        height: 4.5rem;
-
-        .navbar-dropdown-cover {
-            margin-top: 4.5rem;
-        }
-
-        .navbar-container {
-            .sm-brand {
-                width: 13.5rem;
-                height: 2rem;
-                margin-bottom: 0;
-            }
-
-            .sm-navbar-cta {
-                font-size: 0.9rem;
-                padding: 0.5rem 0.75rem;
-            }
-        }
-    }
-}
-
-@media only screen and (max-width: 640px) {
-    .sm-navbar {
-        height: 4.5rem;
-
-        .sm-navbar-dropdown-cover {
-            margin-top: 4.5rem;
-        }
-
-        .sm-navbar-container {
-            .sm-brand {
-                background-image: url("/img/logo-small.png");
-                width: 3rem;
-                height: 3rem;
-            }
-
-            .sm-navbar-cta {
-                font-size: 0.9rem;
-                padding: 0.5rem 0.75rem;
-
-                ion-icon {
-                    display: none;
-                }
-            }
-
-            .sm-menuButton {
-                margin-left: 1rem;
-
-                span {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-
-@keyframes fadeIn {
-    0% {
-        visibility: hidden;
-    }
-
-    100% {
-        visibility: visible;
-    }
-}
-
-@keyframes fadeOut {
-    0% {
-        visibility: visible;
-    }
-
-    100% {
-        visibility: hidden;
-    }
 }
 </style>

resources/js/views/Home.vue

@@ -271,7 +271,7 @@ handleLoad();
 
 <style lang="scss">
 .sm-page-home {
-    margin-top: -3.25rem !important;
+    margin-top: -127px !important;
     background-color: #fff;
 
     h2 {