From 50c0934a701d9080f067fa62ef641f34bbdb04fa Mon Sep 17 00:00:00 2001
From: "jo.kuehner" <johanna.kuehner@tueit.de>
Date: Tue, 7 Nov 2023 10:56:09 +0100
Subject: [PATCH] design generic page

---
 app.config.ts                                 |   0
 app.vue                                       |  19 +-
 layouts/Actionbar.vue                         |   5 +
 layouts/Navigationbar.vue                     | 180 ++++++++++++++++++
 layouts/PageHeader.vue                        |  74 +++++++
 layouts/default.vue                           | 101 ++++++++++
 package-lock.json                             |  11 ++
 package.json                                  |   3 +
 pages/index.vue                               |  29 +++
 pages/login.vue                               |   5 +
 public/favicon-gelb-rot-32x32.png             | Bin 0 -> 1076 bytes
 public/favicon.ico                            | Bin 4286 -> 0 bytes
 public/icons/Back-Icon.svg                    |   3 +
 public/icons/Cancel-Icon.svg                  |   3 +
 public/icons/Toggle-Switch-Left-Icon.svg      |  30 +++
 public/icons/Toggle-Switch-Right-Icon.svg     |  30 +++
 public/icons/actionbar-icons/Add-New-Icon.svg |   3 +
 .../icons/actionbar-icons/Attachment-Icon.svg |   3 +
 public/icons/actionbar-icons/Delete-Icon.svg  |   3 +
 .../icons/actionbar-icons/Dropdown-Icon.svg   |   4 +
 public/icons/actionbar-icons/Edit-Icon.svg    |   3 +
 public/icons/actionbar-icons/Filter-Icon.svg  |   3 +
 .../actionbar-icons/Indicator-Icon-Closed.svg |   3 +
 .../actionbar-icons/Indicator-Icon-Opened.svg |   3 +
 .../icons/actionbar-icons/Instances-Icon.svg  |   3 +
 .../icons/actionbar-icons/Mark-Done-Icon.svg  |   4 +
 public/icons/actionbar-icons/Save-Icon.svg    |   4 +
 public/icons/actionbar-icons/Search-Icon.svg  |   3 +
 public/icons/actionbar-icons/Sell-Icon.svg    |   5 +
 .../icons/actionbar-icons/Settings-Icon.svg   |   4 +
 public/icons/navbar-icons/Accounting-Icon.svg |   4 +
 public/icons/navbar-icons/Assets-Icon.svg     |   4 +
 public/icons/navbar-icons/Checklists-Icon.svg |   5 +
 public/icons/navbar-icons/Clients-Icon.svg    |   5 +
 public/icons/navbar-icons/Home-Icon.svg       |   3 +
 .../Nav-Indicator-Icon-Closed.svg             |   3 +
 .../Nav-Indicator-Icon-Opened.svg             |   3 +
 public/icons/navbar-icons/Solutions-Icon.svg  |   3 +
 .../icons/settings-icons/Appearance-Icon.svg  |   4 +
 public/icons/settings-icons/Profile-Icon.svg  |   4 +
 .../Settings-NavBar-Indicator-Icon-Opened.svg |   3 +
 .../Settings-Navbar-Indicator-Icon-Closed.svg |   3 +
 public/tüit-logo.svg.png                      | Bin 0 -> 12409 bytes
 public/vue.svg                                |   1 +
 44 files changed, 585 insertions(+), 1 deletion(-)
 delete mode 100644 app.config.ts
 create mode 100644 layouts/Actionbar.vue
 create mode 100644 layouts/Navigationbar.vue
 create mode 100644 layouts/PageHeader.vue
 create mode 100644 layouts/default.vue
 create mode 100644 pages/index.vue
 create mode 100644 pages/login.vue
 create mode 100644 public/favicon-gelb-rot-32x32.png
 delete mode 100644 public/favicon.ico
 create mode 100644 public/icons/Back-Icon.svg
 create mode 100644 public/icons/Cancel-Icon.svg
 create mode 100644 public/icons/Toggle-Switch-Left-Icon.svg
 create mode 100644 public/icons/Toggle-Switch-Right-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Add-New-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Attachment-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Delete-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Dropdown-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Edit-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Filter-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Indicator-Icon-Closed.svg
 create mode 100644 public/icons/actionbar-icons/Indicator-Icon-Opened.svg
 create mode 100644 public/icons/actionbar-icons/Instances-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Mark-Done-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Save-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Search-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Sell-Icon.svg
 create mode 100644 public/icons/actionbar-icons/Settings-Icon.svg
 create mode 100644 public/icons/navbar-icons/Accounting-Icon.svg
 create mode 100644 public/icons/navbar-icons/Assets-Icon.svg
 create mode 100644 public/icons/navbar-icons/Checklists-Icon.svg
 create mode 100644 public/icons/navbar-icons/Clients-Icon.svg
 create mode 100644 public/icons/navbar-icons/Home-Icon.svg
 create mode 100644 public/icons/navbar-icons/Nav-Indicator-Icon-Closed.svg
 create mode 100644 public/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg
 create mode 100644 public/icons/navbar-icons/Solutions-Icon.svg
 create mode 100644 public/icons/settings-icons/Appearance-Icon.svg
 create mode 100644 public/icons/settings-icons/Profile-Icon.svg
 create mode 100644 public/icons/settings-icons/Settings-NavBar-Indicator-Icon-Opened.svg
 create mode 100644 public/icons/settings-icons/Settings-Navbar-Indicator-Icon-Closed.svg
 create mode 100644 public/tüit-logo.svg.png
 create mode 100644 public/vue.svg

diff --git a/app.config.ts b/app.config.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/app.vue b/app.vue
index a495b75..7dcf60c 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,22 @@
-<template>
+<!--<template>
   <div>
     <NuxtWelcome />
   </div>
+</template>-->
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
+
+<script>
+  //import Page from "./layouts/Page"
+
+  /*definePageMeta({
+  layout: 'Page'
+  })*/
+
+//const layout = "Page";
+
+</script>
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
new file mode 100644
index 0000000..414087c
--- /dev/null
+++ b/layouts/Actionbar.vue
@@ -0,0 +1,5 @@
+<template>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </template>
\ No newline at end of file
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
new file mode 100644
index 0000000..e16773e
--- /dev/null
+++ b/layouts/Navigationbar.vue
@@ -0,0 +1,180 @@
+<template>
+    <section class="sidebar">
+      <div class="toggle">
+        <div class="icon"  id="back-icon">
+          <img loading="lazy" src="../icons/Back-Icon.svg"/>
+        </div>
+        <div class="icon" id="indicator-icon">
+          <img loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg"/>
+        </div>
+      </div>
+      <div class="menus">
+        <nav id="home-menu">
+          <button id="home-button">
+            <div class="icon" id="home-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Home-Icon.svg"/>
+            </div>
+            <pre class="label">Home</pre>
+          </button>
+        </nav>
+        <nav id="site-menu">
+          <button id="checklists-button">
+            <div class="icon" id="checklists-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg"/>
+              </div>
+            <pre class="label">Checklists</pre>
+          </button>
+          <button id="assets-button">
+            <div class="icon" id="assets-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg"/>
+            </div>
+            <pre class="label">Config Items</pre>
+          </button>
+          <button id="solutions-button">
+            <div class="icon" id="solutions-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg"/>
+            </div>
+            <pre class="label">Solutions</pre>
+          </button>
+          <button id="accounting-button">
+            <div class="icon" id="accounting-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg"/>
+            </div>
+            <pre class="label">Accounting</pre>
+          </button>
+          <button id="clients-button">
+            <div class="icon" id="clients-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg"/>
+            </div>
+            <pre class="label">Clients</pre>
+          </button>
+        </nav>
+      </div>
+    </section>
+</template>
+
+
+
+<script>
+
+export default {
+    name: "Navigationbar",
+}
+
+</script>
+  
+  
+  
+<style>
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .sidebar {
+    align-items: flex-start;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    gap: 10px;
+    padding: 10px;
+  }
+
+
+  .toggle {
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    height: 40px;
+    padding: 10px;
+  }
+  
+
+
+  .menus {
+    align-items: flex-start;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    padding: 40px 0;
+    gap: 30px;
+  }
+
+  nav {
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    gap: 30px;
+  }
+  #home-menu {
+    border-bottom: 1px solid #8e8e8e;
+  }
+
+  
+  button {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    justify-content: flex-start;
+    height: 35px;
+    border: none;
+    border-radius: 5px;
+    padding: 5px;
+    gap: 10px;
+    background-color: #2c2c2c;
+    transition-duration: 0.5s;
+  }
+  button:hover {
+    background-color: #444444;
+  }
+
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 25px;
+    height: 25px;
+  }
+  #indicator-icon, #back-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background-color: #2c2c2c;
+    transition-duration: 0.5s;
+  }
+  #indicator-icon:hover, #back-icon:hover {
+    width: 30px;
+    height: 30px;
+    background-color: #444444;
+  }
+
+  .icon > img {
+    width: 20px;
+    height: 20px;
+    filter: invert(100%);
+    object-fit: contain;
+    object-position: center;
+    overflow: hidden;
+  }
+
+  
+  .label {
+    color: #fff;
+    /*leading-trim: both;
+    text-edge: cap;*/
+    letter-spacing: 0.7px;
+    align-self: center;
+    white-space: nowrap;
+    margin: auto 0;
+    font: 700 14px/20px Overpass, sans-serif;
+  }
+
+</style>
\ No newline at end of file
diff --git a/layouts/PageHeader.vue b/layouts/PageHeader.vue
new file mode 100644
index 0000000..f20c06f
--- /dev/null
+++ b/layouts/PageHeader.vue
@@ -0,0 +1,74 @@
+<template>
+    <header>
+        <img id="header-logo"
+            loading="lazy" src="../tüit-logo.svg.png" />
+        <div class="profile">
+            <div class="username">username</div>
+            <div class="picture">
+                <img id="picture"
+                    loading="lazy" src="" />
+            </div>
+        </div>
+    </header>
+</template>
+
+
+<script>
+
+export default {
+    name: "PageHeader",
+}
+
+</script>
+
+
+<style>
+
+    * {
+        box-sizing: border-box;
+    }
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        border-bottom: 1px solid #000;
+        background-color: #2c2c2c;
+        height: 60px;
+        padding: 10px 20px;
+    }
+    
+    #header-logo {
+        object-fit: contain;
+        object-position: center;
+        width: 80px;
+        height: 40px;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    .profile {
+        align-items: flex-end;
+        display: flex;
+        gap: 10px;
+        padding: 0 30px;
+    }
+    .username {
+        color: #fff;
+        text-align: right;
+        letter-spacing: 0.8px;
+        align-self: center;
+        margin: auto 0;
+        font: 200 14px Overpass, sans-serif;
+    }
+    .picture {
+        display: flex;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        background-color: #fff;
+    }
+
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..7071876
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,101 @@
+<template>
+  <body>
+    <PageHeader />
+    <main>
+      <Navigationbar />
+      <section id="content">
+        <section id="content-header">
+          <pre id="page-name">Pagename</pre>
+        </section>
+        <section id="content-body">
+          <!--<slot />-->
+        </section>
+      </section>
+    </main>
+  </body>
+</template>
+
+
+<script>
+import PageHeader from "./PageHeader.vue";
+import Navigationbar from "./Navigationbar.vue";
+
+export default {
+    name: "Page",
+    components: {
+      PageHeader, 
+      Navigationbar,
+    }
+}
+
+</script>
+  
+  
+  
+<style>
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-content: stretch;
+    background-color: #212121;
+  }
+  
+  main {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 10px;
+    padding: 10px;
+  }
+  
+  #content {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    gap: 10px;
+    padding: 0 20px;
+  }
+  
+  #content-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 50px;
+  }
+  #page-name {
+    color: #fff;
+    letter-spacing: 1.2px;
+    font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
+      sans-serif;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 20px;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+  }
+
+  slot {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 20px;
+    padding: 20px 30px;
+  }
+  
+</style>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4ea4492..9e6bb04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,9 @@
     "": {
       "name": "nuxt-app",
       "hasInstallScript": true,
+      "dependencies": {
+        "leading-trim": "^1.0.2"
+      },
       "devDependencies": {
         "@nuxt/devtools": "latest",
         "nuxt": "^3.8.0",
@@ -5521,6 +5524,14 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/leading-trim": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/leading-trim/-/leading-trim-1.0.2.tgz",
+      "integrity": "sha512-UEzrceHMHYmp1TUfAQsBQcW06rOVNtyOD+APKIosqTZh+KIq21xJXr5q/HGLuCR34Ugjk8m2yYZN4BYepMK14w==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
diff --git a/package.json b/package.json
index 24d41e1..330c557 100644
--- a/package.json
+++ b/package.json
@@ -14,5 +14,8 @@
     "nuxt": "^3.8.0",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5"
+  },
+  "dependencies": {
+    "leading-trim": "^1.0.2"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..a31a60d
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,29 @@
+<template>
+    <head>
+        <title></title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    </head>
+    <body>
+        <NuxtLayout>
+            <NuxtPage />
+        </NuxtLayout>
+    </body>
+</template>
+
+<script lang="ts">
+export default {
+	head: {
+		title: 'tueit App',
+	},
+};
+</script>
+
+<style>
+    html, template, body {
+        height: 100%;
+        width: 100%;
+        height: 100vh;
+        width: 100vw;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/pages/login.vue b/pages/login.vue
new file mode 100644
index 0000000..91fe27f
--- /dev/null
+++ b/pages/login.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
\ No newline at end of file
diff --git a/public/favicon-gelb-rot-32x32.png b/public/favicon-gelb-rot-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..efb28a55748047bee27fdee756adb78f5c7f65d0
GIT binary patch
literal 1076
zcmV-41k3x0P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000ie
z000ie0hKEb8vp<U=1D|BR9J=0S50UnMHK$3`fsK?>7J0u4q@YxaYhy~hjn*F;-1U|
z91xTo4S4Vrh@h}J<djoR3PFh&@SwqiIf(%mB`YKsksOpD7>#SPB!(<uC&?zAY<Exp
zmWLs6{(7b}W?4VzLsfnC-q%(2>eVBN2#peTK#Ax3WhwW(Bwp_kxL$?Q1OOO8aJ1w4
zTWhwnvTWLmONO<e2kbbCUDAy3oXBTKI@Ixedwf_VM2=$AVa!}OvF1KIJpN$a@itl#
zAQKWBOKOwDn(`h;h#19jHGIaLIo+6^+Seyc#)^>zWJEqY)7?3r7KOg3&PXhPI%rn(
zIe!bVev`22xT~YP2SfMktVWH1K1sMXd%5eb#?ebrodW>h<stn=p`!12F^-2HcK`r%
zKPbHOVDGh6+x@kiL(3Z(k<Yf`JPI_9UYfn!bvGmO*}4K`LSi%Bo%2t^dAW$0?#_9c
zkXVg?v7|P6o;`0BX;J7KOKOv+Z32`+?b|D<-@{IO;?2j9((YNCF`)2C0tg6{ehY0c
z7eQhS?YAlqy0gon_=i}*2TIZL#`eP()*Wwy0>DUzI^HPM<QHwIIqTnV&;q#9SS;&8
z%~>_h0YL2bq2?@TgI2|9;|LK)I@EChpc*A=zCAwNc;PM{`S$p*Mu|!Xlz2Ys4R?_c
z36Tesc%JslQtsTd**WPU{C-)=kvmsXKVOxEn~e-m)d!U-t$2GJ00Jrpph^Hf>EoFX
z4=Ok(KgF>Bxe74A+b{9UanE*t;d=zGx7i;A#~gyNF_R)NY27haB=Gk5P`f<>*UO)#
z)J9NVDuPdWWtIW`dj()klWAkSlqSOEl|g&mfO5kw_YeIC1#rXXL<Kd1;OM`bX$?jY
z9MK)u-+EdCc3gjpuG!AY(-N>|J1cbAv=^H)X;mOIfbf-lL^$W=0ASg)7wM8=EjWys
zVI(3jNWETVA1URBa>zF-+W<nt6DYkKmkeuxvl;AX1tEP^60TR1#I%FdyE<YSuf~9U
z%|>8RP>G@KmWAZoCm>ZZb@F2z#e4O0+;=C|mv<gpUpGw0soRH8U$sL2q8YYtCt<JG
z3aClP>yEcEryJ8Pd#VF_i-)}~)E%4Cjp@_p`q?H;?dubpj=Oph&I1Q1e40SLNB5@V
zu1@Xi6Q}Jn0VZR`(cOa~-46;ivm$~qz~1KZV4@SnKWmp>_k+Ud?!i!bjnME}-u8+G
zDbxJEWgg%kaVXvwVE-l5GaLFWzp%oj5gHXHT)hd0e(>m<V{=xaG}b2xHz^@?dClN6
u=6t0aAHBc(=&eG?*8YEs(`r1a^86nGrN@`jU9xBZ0000<MNUMnLSTZf^!a@N

literal 0
HcmV?d00001

diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

diff --git a/public/icons/Back-Icon.svg b/public/icons/Back-Icon.svg
new file mode 100644
index 0000000..0a2e699
--- /dev/null
+++ b/public/icons/Back-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.2 9H5.8m0 0 2.8 2.8M5.8 9l2.8-2.8M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16Z"/>
+</svg>
diff --git a/public/icons/Cancel-Icon.svg b/public/icons/Cancel-Icon.svg
new file mode 100644
index 0000000..53d44ef
--- /dev/null
+++ b/public/icons/Cancel-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m1 11 5-5m0 0 5-5M6 6 1 1m5 5 5 5"/>
+</svg>
diff --git a/public/icons/Toggle-Switch-Left-Icon.svg b/public/icons/Toggle-Switch-Left-Icon.svg
new file mode 100644
index 0000000..d887d7b
--- /dev/null
+++ b/public/icons/Toggle-Switch-Left-Icon.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 50 20">
+  <g filter="url(#a)">
+    <rect width="50" height="20" fill="#3A7DCB" rx="10"/>
+  </g>
+  <g filter="url(#b)">
+    <circle cx="10" cy="10" r="8" fill="#212121"/>
+  </g>
+  <defs>
+    <filter id="a" width="52" height="22" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="2" dy="2"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_322_41498"/>
+    </filter>
+    <filter id="b" width="20" height="20" x="2" y="2" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="4" dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_322_41498"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/public/icons/Toggle-Switch-Right-Icon.svg b/public/icons/Toggle-Switch-Right-Icon.svg
new file mode 100644
index 0000000..20d9e83
--- /dev/null
+++ b/public/icons/Toggle-Switch-Right-Icon.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 50 20">
+  <g filter="url(#a)">
+    <rect width="50" height="20" fill="#5DA1F1" rx="10"/>
+  </g>
+  <g filter="url(#b)">
+    <circle cx="40" cy="10" r="8" fill="#212121"/>
+  </g>
+  <defs>
+    <filter id="a" width="52" height="22" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="2" dy="2"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_322_41497"/>
+    </filter>
+    <filter id="b" width="20" height="20" x="32" y="2" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="4" dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_322_41497"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/public/icons/actionbar-icons/Add-New-Icon.svg b/public/icons/actionbar-icons/Add-New-Icon.svg
new file mode 100644
index 0000000..4d26613
--- /dev/null
+++ b/public/icons/actionbar-icons/Add-New-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 6h5m0 0h5M6 6V1m0 5v5"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Attachment-Icon.svg b/public/icons/actionbar-icons/Attachment-Icon.svg
new file mode 100644
index 0000000..806b1c2
--- /dev/null
+++ b/public/icons/actionbar-icons/Attachment-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11 5.5-4.8 4.6a4 4 0 0 1-1.9.9c-.9 0-1.6-.1-2.3-.6C1.4 9.8 1 9 1 8c.1-.7.6-1.5 1.2-2l4.7-4.5c.4-.4 1-.6 1.5-.6.6 0 1.2.2 1.6.6.4.3.6.8.6 1.4 0 .5-.2 1.2-.6 1.5L5.2 9.1c-.2.1-.7.5-1 .5-.4 0-1 0-1.3-.3-.4-.4-.5-.7-.4-1.2 0-.5.4-.9.6-1L7 3.4"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Delete-Icon.svg b/public/icons/actionbar-icons/Delete-Icon.svg
new file mode 100644
index 0000000..03c5be6
--- /dev/null
+++ b/public/icons/actionbar-icons/Delete-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.9 5.4v5.3c0 .2-.2.3-.3.3H2.4a.3.3 0 0 1-.3-.3V5.4m2.8 3.4V5.4m2.2 3.4V5.4M11 3.2H8.2m0 0V1.3c0-.2-.1-.3-.3-.3H4c-.2 0-.3.1-.3.3v2m4.4 0H3.8M1 3.2h2.8"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Dropdown-Icon.svg b/public/icons/actionbar-icons/Dropdown-Icon.svg
new file mode 100644
index 0000000..6b90e99
--- /dev/null
+++ b/public/icons/actionbar-icons/Dropdown-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.9 1h8.5c1.6 0 2.9 1.3 2.9 2.9V8c0 1.6-1.3 2.9-2.9 2.9H4a2.9 2.9 0 0 1-3-2.8V4a3 3 0 0 1 2.9-3Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10 5.1 8 7 6.4 5"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Edit-Icon.svg b/public/icons/actionbar-icons/Edit-Icon.svg
new file mode 100644
index 0000000..3e97e5c
--- /dev/null
+++ b/public/icons/actionbar-icons/Edit-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.6 2.6 8.2 1 11 3.8 9.4 5.4M6.6 2.6 1.2 8l-.2.4V11h2.6c.1 0 .3 0 .4-.2l5.4-5.4M6.6 2.6l2.8 2.8"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Filter-Icon.svg b/public/icons/actionbar-icons/Filter-Icon.svg
new file mode 100644
index 0000000..0aa0bb9
--- /dev/null
+++ b/public/icons/actionbar-icons/Filter-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.6 1h8.8c.4 0 .6.3.6.6v.9c0 .1 0 .3-.2.4L7.3 6.5l-.2.4v3.5c0 .4-.3.7-.7.6l-1-.3a.6.6 0 0 1-.5-.5V6.9c0-.2 0-.3-.2-.4L1.2 2.9a.6.6 0 0 1-.2-.4v-1c0-.2.2-.5.6-.5Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Indicator-Icon-Closed.svg b/public/icons/actionbar-icons/Indicator-Icon-Closed.svg
new file mode 100644
index 0000000..72d7a73
--- /dev/null
+++ b/public/icons/actionbar-icons/Indicator-Icon-Closed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m14.6 11-5-5 5-5M6 11 1 6l5-5"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Indicator-Icon-Opened.svg b/public/icons/actionbar-icons/Indicator-Icon-Opened.svg
new file mode 100644
index 0000000..852303d
--- /dev/null
+++ b/public/icons/actionbar-icons/Indicator-Icon-Opened.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9.6 1 5 5-5 5M1 1l5 5-5 5"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Instances-Icon.svg b/public/icons/actionbar-icons/Instances-Icon.svg
new file mode 100644
index 0000000..b33a5b0
--- /dev/null
+++ b/public/icons/actionbar-icons/Instances-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" d="M7.1 10.7V7.4l.3-.3h3.3c.2 0 .3.2.3.3v3.3c0 .2-.1.3-.3.3H7.4a.3.3 0 0 1-.3-.3Zm-6.1 0V7.4c0-.1.1-.3.3-.3h3.3l.3.3v3.3c0 .2-.2.3-.3.3H1.3a.3.3 0 0 1-.3-.3Zm6.1-6.1V1.3c0-.2.2-.3.3-.3h3.3c.2 0 .3.1.3.3v3.3c0 .1-.1.3-.3.3H7.4a.3.3 0 0 1-.3-.3ZM1 4.6V1.3c0-.2.1-.3.3-.3h3.3c.1 0 .3.1.3.3v3.3l-.3.3H1.3a.3.3 0 0 1-.3-.3Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Mark-Done-Icon.svg b/public/icons/actionbar-icons/Mark-Done-Icon.svg
new file mode 100644
index 0000000..19e48f0
--- /dev/null
+++ b/public/icons/actionbar-icons/Mark-Done-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.5 6.3 5 7.8l3.5-3.5"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 11A5 5 0 1 0 6 1a5 5 0 0 0 0 10Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Save-Icon.svg b/public/icons/actionbar-icons/Save-Icon.svg
new file mode 100644
index 0000000..1c960dc
--- /dev/null
+++ b/public/icons/actionbar-icons/Save-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" d="M1 9.9V2c0-.5.5-1 1.1-1h6.2c.3 0 .6.1.8.3L10.7 3c.2.2.3.5.3.8V10c0 .6-.5 1.1-1.1 1.1H2c-.5-.1-1-.6-1-1.2Z"/>
+  <path stroke="currentColor" d="M4.1 4.3H8c.2 0 .3-.1.3-.3V1.3c0-.2-.1-.3-.3-.3H4c-.2 0-.3.1-.3.3V4c0 .2.1.3.3.3ZM2.7 6.9V11h6.6V6.9c0-.2-.1-.3-.3-.3H3c-.2 0-.3.1-.3.3Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Search-Icon.svg b/public/icons/actionbar-icons/Search-Icon.svg
new file mode 100644
index 0000000..79494d4
--- /dev/null
+++ b/public/icons/actionbar-icons/Search-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.5 8.5 11 11M1 5.3a4.3 4.3 0 1 0 8.6 0 4.3 4.3 0 0 0-8.6 0Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Sell-Icon.svg b/public/icons/actionbar-icons/Sell-Icon.svg
new file mode 100644
index 0000000..0aa8286
--- /dev/null
+++ b/public/icons/actionbar-icons/Sell-Icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" d="M9.9 10.6H2c-.5 0-1-.6-1-1.2v-5c0-.6.5-1 1.1-1H10c.6 0 1.1.4 1.1 1v5c0 .7-.5 1.2-1.1 1.2Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.5 7.2a.3.3 0 1 1 0-.5.3.3 0 0 1 0 .5Z"/>
+  <path stroke="currentColor" d="M9.3 3.3v-.7c0-.8-.7-1.3-1.4-1.1L2 3a1 1 0 0 0-.9 1v.3"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Settings-Icon.svg b/public/icons/actionbar-icons/Settings-Icon.svg
new file mode 100644
index 0000000..fb5c1fa
--- /dev/null
+++ b/public/icons/actionbar-icons/Settings-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9.8 5.2-.5-1.3.7-.9-1-1-.9.7-1.3-.5L6.5 1h-1l-.3 1.2-1.3.6L3 2 2 3l.7.9-.5 1.3-1.2.3v1l1.2.3.6 1.3L2 9l1 1 .9-.7 1.3.5.3 1.2h1l.3-1.2 1.3-.5.9.7 1-1-.7-.9.5-1.3 1.2-.3v-1l-1.2-.3Z"/>
+</svg>
diff --git a/public/icons/navbar-icons/Accounting-Icon.svg b/public/icons/navbar-icons/Accounting-Icon.svg
new file mode 100644
index 0000000..a6b29a5
--- /dev/null
+++ b/public/icons/navbar-icons/Accounting-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.5 12.5v-5l-.1-.3-2.5-2.6-.4-.1H6.2c-.2 0-.4.2-.4.5v15c0 .3.2.5.4.5h5.2M9 10.9h6.3M9 7.7h3.2M9 14h2.4m5.6 2.4.7-.8A.9.9 0 0 1 19 17l-.8.8m-1.3-1.3-2.4 2.4-.2.5-.2 1.2 1.2-.2.5-.2 2.4-2.4m-1.3-1.3 1.3 1.3"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.3 4.5v2.7c0 .3.3.5.5.5h2.7"/>
+</svg>
diff --git a/public/icons/navbar-icons/Assets-Icon.svg b/public/icons/navbar-icons/Assets-Icon.svg
new file mode 100644
index 0000000..78c1223
--- /dev/null
+++ b/public/icons/navbar-icons/Assets-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-width="1.5" d="M5.5 14.3V6c0-.9.7-1.6 1.6-1.6h10.8c1 0 1.6.7 1.6 1.6v8.2m-14 0h14m-14 0-1.2 4.2c-.3 1 .5 2 1.5 2h13.4c1 0 1.8-1 1.5-2l-1.2-4.2"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.7 18.1h1.6"/>
+</svg>
diff --git a/public/icons/navbar-icons/Checklists-Icon.svg b/public/icons/navbar-icons/Checklists-Icon.svg
new file mode 100644
index 0000000..8d31a51
--- /dev/null
+++ b/public/icons/navbar-icons/Checklists-Icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M9 6.7H7c-.8 0-1.5.7-1.5 1.5v10.4c0 .9.7 1.5 1.5 1.5h4.5m2.7-13.4H16c.9 0 1.5.7 1.5 1.5V15"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M8.6 8.5V7.1c0-.2.2-.4.4-.4s.3-.1.4-.3c0-.7.5-1.9 2.2-1.9 1.6 0 2 1.2 2.2 1.9 0 .2.2.3.4.3s.3.2.3.4v1.4c0 .3-.2.5-.4.5h-5a.4.4 0 0 1-.5-.5Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.2 19 1.5 1.5 3.7-3.7"/>
+</svg>
diff --git a/public/icons/navbar-icons/Clients-Icon.svg b/public/icons/navbar-icons/Clients-Icon.svg
new file mode 100644
index 0000000..e5dc9d5
--- /dev/null
+++ b/public/icons/navbar-icons/Clients-Icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M2.1 20.5v-1a6.6 6.6 0 1 1 13.2 0v1"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M13.4 14.9a4.7 4.7 0 0 1 9.5 0v.4"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.7 13a3.8 3.8 0 1 0 0-7.6 3.8 3.8 0 0 0 0 7.6Zm9.4-2.9a2.8 2.8 0 1 0 0-5.6 2.8 2.8 0 0 0 0 5.6Z"/>
+</svg>
diff --git a/public/icons/navbar-icons/Home-Icon.svg b/public/icons/navbar-icons/Home-Icon.svg
new file mode 100644
index 0000000..04260b7
--- /dev/null
+++ b/public/icons/navbar-icons/Home-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m4.8 10 7.7-5.5 7.8 5.5m-1.8 3.5v6.4c0 .3-.2.6-.5.6H7c-.3 0-.5-.3-.5-.6v-6.4"/>
+</svg>
diff --git a/public/icons/navbar-icons/Nav-Indicator-Icon-Closed.svg b/public/icons/navbar-icons/Nav-Indicator-Icon-Closed.svg
new file mode 100644
index 0000000..852303d
--- /dev/null
+++ b/public/icons/navbar-icons/Nav-Indicator-Icon-Closed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9.6 1 5 5-5 5M1 1l5 5-5 5"/>
+</svg>
diff --git a/public/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg b/public/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg
new file mode 100644
index 0000000..72d7a73
--- /dev/null
+++ b/public/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m14.6 11-5-5 5-5M6 11 1 6l5-5"/>
+</svg>
diff --git a/public/icons/navbar-icons/Solutions-Icon.svg b/public/icons/navbar-icons/Solutions-Icon.svg
new file mode 100644
index 0000000..01183ca
--- /dev/null
+++ b/public/icons/navbar-icons/Solutions-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.8 17.8h5.4m-4.5 2.7h3.6m-4.5-5.3c0-1.8-.4-2.3-1.3-3.1a4.1 4.1 0 0 1-1.3-3.2c0-2.7 1.7-4.4 5.3-4.4 3.6 0 5.4 1.7 5.3 4.4a4 4 0 0 1-1.3 3.2c-.9.8-1.3 1.3-1.3 3"/>
+</svg>
diff --git a/public/icons/settings-icons/Appearance-Icon.svg b/public/icons/settings-icons/Appearance-Icon.svg
new file mode 100644
index 0000000..0adccdd
--- /dev/null
+++ b/public/icons/settings-icons/Appearance-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 15">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.5 6.9a6.6 6.6 0 0 1 12 0"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.5 10.1a1.6 1.6 0 1 1 0-3.2 1.6 1.6 0 0 1 0 3.2Z"/>
+</svg>
diff --git a/public/icons/settings-icons/Profile-Icon.svg b/public/icons/settings-icons/Profile-Icon.svg
new file mode 100644
index 0000000..50dfd74
--- /dev/null
+++ b/public/icons/settings-icons/Profile-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 15">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.5 2.5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.6 10.7s1.2-1.4 3.9-1.4c2.8 0 3.9 1.4 3.9 1.4M7.5 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
+</svg>
diff --git a/public/icons/settings-icons/Settings-NavBar-Indicator-Icon-Opened.svg b/public/icons/settings-icons/Settings-NavBar-Indicator-Icon-Opened.svg
new file mode 100644
index 0000000..852303d
--- /dev/null
+++ b/public/icons/settings-icons/Settings-NavBar-Indicator-Icon-Opened.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9.6 1 5 5-5 5M1 1l5 5-5 5"/>
+</svg>
diff --git a/public/icons/settings-icons/Settings-Navbar-Indicator-Icon-Closed.svg b/public/icons/settings-icons/Settings-Navbar-Indicator-Icon-Closed.svg
new file mode 100644
index 0000000..72d7a73
--- /dev/null
+++ b/public/icons/settings-icons/Settings-Navbar-Indicator-Icon-Closed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m14.6 11-5-5 5-5M6 11 1 6l5-5"/>
+</svg>
diff --git a/public/tüit-logo.svg.png b/public/tüit-logo.svg.png
new file mode 100644
index 0000000000000000000000000000000000000000..39a9a7b93618af3053bfaef5836350328a5ac199
GIT binary patch
literal 12409
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

literal 0
HcmV?d00001

diff --git a/public/vue.svg b/public/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/public/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file