up

frontent/ops_vue/src/App.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-//import { RouterLink, RouterView } from 'vue-router'
+
-//import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
       <header class="navbar navbar-expand-md d-print-none">
         <div class="container-xl">
+          <!-- BEGIN NAVBAR TOGGLER -->
           <button
             class="navbar-toggler"
             type="button"
@@ -17,17 +17,11 @@
           >
             <span class="navbar-toggler-icon"></span>
           </button>
-      <!-- BEGIN NAVBAR LOGO --><a
+          <!-- END NAVBAR TOGGLER -->
-        href="../../.."
+          <!-- BEGIN NAVBAR LOGO -->
-        aria-label="Tabler"
+          <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
-        class="navbar-brand navbar-brand-autodark me-3"
+            <a href="." aria-label="Tabler"
-        ><svg
+              ><svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
-          xmlns="http://www.w3.org/2000/svg"
-          width="110"
-          height="32"
-          viewBox="0 0 232 68"
-          class="navbar-brand-image"
-        >
                 <path
                   d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z"
                   fill="#066fd1"
@@ -38,13 +32,15 @@
                   fill-rule="evenodd"
                   clip-rule="evenodd"
                   fill="#4a4a4a"
-          /></svg></a
+                /></svg></a>
-      ><!-- END NAVBAR LOGO -->
+          </div>
-      <ul class="navbar-nav">
+          <!-- END NAVBAR LOGO -->
-        <li class="nav-item active">
+          <div class="navbar-nav flex-row order-md-last">
-          <a class="nav-link" href="#">
+
-            <span class="nav-link-icon">
+            <div class="d-none d-md-flex">
-              <!-- Download SVG icon from http://tabler.io/icons/icon/home -->
+              <div class="nav-item">
+                <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                  <!-- Download SVG icon from http://tabler.io/icons/icon/moon -->
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -57,18 +53,11 @@
                     stroke-linejoin="round"
                     class="icon icon-1"
                   >
-                <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
+                    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
-                <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                   </svg>
-            </span>
-            <span class="nav-link-title"> Home </span>
                 </a>
-        </li>
+                <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
-        <li class="nav-item">
+                  <!-- Download SVG icon from http://tabler.io/icons/icon/sun -->
-          <a class="nav-link" href="#">
-            <span class="nav-link-icon"
-              ><!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -81,49 +70,15 @@
                     stroke-linejoin="round"
                     class="icon icon-1"
                   >
-                <path d="M9 11l3 3l8 -8" />
+                    <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
-                <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
+                    <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
                   </svg>
-            </span>
-            <span class="nav-link-title"> Profile </span>
                 </a>
-        </li>
+              </div>
-        <li class="nav-item">
+            </div>
-          <a class="nav-link" href="#">
-            <span class="nav-link-icon"
-              ><!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="icon icon-1"
-              >
-                <path d="M9 11l3 3l8 -8" />
-                <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-              </svg>
-            </span>
-            <span class="nav-link-title"> Settings </span>
-          </a>
-        </li>
-      </ul>
-      <div class="navbar-nav flex-row order-md-last ms-auto">
             <div class="nav-item dropdown">
-          <a
+              <a href="#" class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="Open user menu">
-            href="#"
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"> </span>
-            class="nav-link d-flex lh-1 text-reset"
-            data-bs-toggle="dropdown"
-            aria-label="Open user menu"
-          >
-            <span
-              class="avatar avatar-sm"
-              style="background-image: url(/static/avatars/044m.jpg)"
-            ></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-secondary">UI Designer</div>
@@ -141,6 +96,50 @@
           </div>
         </div>
       </header>
+      <header class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar">
+            <div class="container-xl">
+              <div class="row flex-column flex-md-row flex-fill align-items-center">
+                <div class="col">
+                  <!-- BEGIN NAVBAR MENU -->
+                  <ul class="navbar-nav">
+                    <li class="nav-item active">
+                      <a class="nav-link" href="./">
+                        <span class="nav-link-icon d-md-none d-lg-inline-block"
+                          ><!-- Download SVG icon from http://tabler.io/icons/icon/home -->
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class="icon icon-1"
+                          >
+                            <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
+                            <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
+                            <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg></span>
+                        <span class="nav-link-title"> Home </span>
+                      </a>
+                    </li>
+
+
+
+
+                  </ul>
+                  <!-- END NAVBAR MENU -->
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
   <RouterView />
 </template>
 

frontent/ops_vue/src/assets/user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-user"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>

frontent/ops_vue/src/router/index.ts

@@ -1,8 +1,8 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',