From da6841d13476058ce1e812f8653217f5b5286c22 Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Mon, 6 Mar 2023 16:29:07 +0000
Subject: [PATCH] Added menu options for icon in navbar.

---
 client/public/stylesheets/olympus.css | 28 ++++++++++++++++++---------
 client/views/navbar.ejs               | 25 ++++++++++++++++++++++--
 client/views/uikit.ejs                | 27 ++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index 08485192..50c23818 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -89,22 +89,27 @@ button[disabled="disabled"] {
 
 .ol-select .ol-select-value {
     align-content: center;
-    background-color: var( --background-grey );
-    border-radius: var( --border-radius-sm );
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    cursor:pointer;
     display:flex;
     justify-content: left;
-    padding:1em;
     position: relative;
     text-align: center;
+}
+
+.ol-select:not( .ol-select-image ) .ol-select-value {
+    background-color: var( --background-grey );
+    border-radius: var( --border-radius-sm );
+    padding:1em;
     width:100%;
 }
 
-.ol-select .ol-select-value:before {
+.ol-select:not( .ol-select-image ) .ol-select-value:before {
     content: "[ ]";
     margin-right: 10px;
 }
 
-.ol-select .ol-select-value:after {
+.ol-select:not( .ol-select-image ) .ol-select-value:after {
     content: "[V]";
     margin-left:10px;
 }
@@ -116,6 +121,10 @@ button[disabled="disabled"] {
     translate:0 -2px;
 }
 
+.ol-select.ol-select-image .ol-select-options {
+    position:absolute;
+}
+
 
 .ol-select.is-open .ol-select-options {
     max-height: fit-content;
@@ -126,7 +135,7 @@ button[disabled="disabled"] {
     background-color: var( --background-grey );
     display:flex;
     justify-content: left;
-    padding:6px 30px;
+    padding:6px 25px;
     width:100%;
 }
 
@@ -142,9 +151,10 @@ button[disabled="disabled"] {
     padding-bottom:16px;
 }
 
-.ol-select .ol-select-options div.hr {
-    border-bottom:1px solid #FFFFFF2E;
-    margin:8px;
+.ol-select .ol-select-options div hr {
+    background-color: white;
+    height:1px;
+    width:100%;
 }
 
 .ol-select .ol-select-options div button {
diff --git a/client/views/navbar.ejs b/client/views/navbar.ejs
index 143e9ea3..d04362c2 100644
--- a/client/views/navbar.ejs
+++ b/client/views/navbar.ejs
@@ -1,9 +1,30 @@
 <nav id="primary-toolbar" class="ol-panel">
 
-    <div id="app-icon">
-        <div id="options" class="ol-select-value icon">
+    <div id="app-icon" class="ol-select ol-select-image">
+        <div class="ol-select-value icon">
             <img src="images/icon.png" class="main-logo" />
         </div>  
+        <div class="ol-select-options">
+            <div id="olympus-toolbar-summary">
+                <h2>Olympus</h2>
+                <p>v0.1.0</p>
+            </div>
+            <div>
+                <hr />
+            </div>
+            <div>
+                <button>Preferences</button>
+            </div>
+            <div>
+                <button>Help and support</button>
+            </div>
+            <div>
+                <hr />
+            </div>
+            <div>
+                <button>Exit Olympus</button>
+            </div>
+        </div>
     </div>
 
     <div id="map-type" class="ol-select">
diff --git a/client/views/uikit.ejs b/client/views/uikit.ejs
index db8c7c6c..38efa324 100644
--- a/client/views/uikit.ejs
+++ b/client/views/uikit.ejs
@@ -1551,6 +1551,33 @@
     
                 </div>
 
+
+                <div class="content">
+                    <div class="content-header">ol select</div>
+                    <div class="content-body">
+                        <div class="example">
+
+                            <div class="ol-select ol-select-image">
+                                <div class="ol-select-value icon">
+                                    <img src="/images/icon.png" class="main-logo" />
+                                </div>  
+                                <div class="ol-select-options">
+                                    <div>
+                                        <button>Option 1</button>
+                                    </div>
+                                    <div>
+                                        <hr />
+                                    </div>
+                                    <div>
+                                        <button>Option 2</button>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
             </section>
 
         </div>