@digigov/css 0.34.1 → 0.36.0

package/src/components/nav.css

@@ -1,7 +1,7 @@
 .govgr-header {
   @apply relative;
   .govgr-burger-icon {
-    fill: var(--color-header-content);
+    fill: var(--color-white);
   }
   .govgr-drawer__close-icon {
     @apply sm:hidden;
@@ -9,21 +9,22 @@
       fill: var(--color-link) !important;
     }
   }
-  .govgr-horizontal-nav {
+  .govgr-nav {
     @apply fixed;
   }
-  .govgr-horizontal-nav__list {
+  .govgr-nav__list {
     @apply sm:flex !important;
-    @apply sm:w-min xs:hidden;
+    @apply sm:w-min xs:hidden m-0 max-w-5xl sm:mx-auto sm:gap-x-6 static sm:py-1 xs:px-3 sm:px-0
+  flex flex-wrap flex-col sm:flex-row;
   }
-  .govgr-horizontal-nav__list-item {
-    @apply sm:mr-auto sm:ml-auto sm:text-center sm:underline mr-0 xs:px-2;
+  .govgr-nav__list-item {
+    @apply text-base-content sm:mr-auto sm:ml-auto sm:text-center sm:underline mr-0 xs:px-2 xs:py-1 sm:gap-x-6;
     .govgr-svg-icon {
       fill: var(--color-white) !important;
     }
   }
-  .govgr-horizontal-nav__list-item-link,
-  .govgr-horizontal-nav__list-item-btn {
+  .govgr-nav__list-item-link,
+  .govgr-nav__list-item-btn {
     @apply underline xs:text-white text-lg sm:flex !important;
     @apply xs:hidden items-center xs:gap-1;
     &:focus {
@@ -33,8 +34,8 @@
       }
     }
   }
-  .govgr-horizontal-nav__list--active {
-    @apply sm:bg-secondary600 !important;
+  .govgr-nav__list--active {
+    @apply sm:bg-tertiary !important;
   }
 }
 .govgr-burger-icon {
@@ -76,25 +77,50 @@
     transform-origin: 3px 16px;
   }
 }
-/* --- HORIZONTAL NAV ---  */
-.govgr-horizontal-nav {
+
+/* --- NAV ---  */
+.govgr-nav {
   @apply sm:block !important;
-  @apply xs:hidden w-3/4 sm:w-full h-full bg-white
-   sm:h-auto sm:bg-white xs:text-content
+  @apply xs:hidden w-3/4 sm:w-full h-full bg-base-100
+   sm:h-auto sm:bg-base-100 xs:text-base-content
   z-30 sm:z-auto 
   opacity-100 right-0 top-0 sm:top-auto overflow-x-scroll sm:overflow-visible;
-  .govgr-horizontal-nav {
-    @apply sm:mt-2 sm:border-b-0 static w-full z-1;
+}
+.govgr-nav--fixed {
+  @apply fixed sm:relative;
+}
+.govgr-nav--border {
+  @apply sm:border-b sm:border-base-400;
+}
+.govgr-nav--open {
+  @apply xs:block;
+}
+.govgr-nav--hidden {
+  @apply hidden !important;
+}
+.govgr-nav__list-item {
+  @apply text-base-content
+  xs:py-1;
+}
+.govgr-nav--horizontal {
+  .govgr-nav--horizontal {
+    @apply sm:mt-2 sm:border-b-0 static w-full z-1 sm:order-1;
     @apply block overflow-x-visible;
-    .govgr-nav-horizontal__container {
-      @apply sm:border-b-0;
-    }
-    .govgr-horizontal-nav__list {
+    .govgr-nav__list {
       @apply sm:px-0 sm:pb-0 sm:ml-6 !important;
     }
   }
-  .govgr-horizontal-nav--order {
-    @apply sm:order-1;
+  .govgr-nav__list {
+    @apply w-full m-0 max-w-5xl sm:mx-auto sm:gap-x-6 static sm:py-1 xs:px-3 sm:px-0
+    flex flex-wrap flex-col sm:flex-row;
+    .govgr-section-break {
+      margin-top: 41px !important;
+      @apply sm:flex !important;
+      @apply xs:hidden sm:p-0 absolute left-0 right-0;
+    }
+  }
+  .govgr-nav__list-item {
+    @apply sm:gap-x-6;
   }
   .govgr-drawer__close-icon {
     @apply sm:hidden mt-3;
@@ -103,42 +129,30 @@
     @apply mb-0;
   }
 }
-.govgr-nav-horizontal--fixed {
-  @apply fixed sm:relative;
-}
-.govgr-nav-horizontal--border {
-  @apply sm:border-b sm:border-base150;
-}
-.govgr-nav-horizontal__container {
-  @apply sm:border-b border-base150;
-}
-.govgr-horizontal-nav--open {
-  @apply xs:block;
-}
-.govgr-horizontal-nav--hidden {
-  @apply hidden !important;
+.govgr-nav--vertical {
+  .govgr-nav--vertical {
+    @apply sm:mt-2 sm:border-b-0 static w-full z-1;
+    @apply block overflow-x-visible;
+  }
+  .govgr-nav__list {
+    @apply w-full m-0 max-w-5xl static xs:px-3
+    flex flex-wrap flex-col;
+  }
+  .govgr-drawer__close-icon {
+    @apply sm:hidden mt-3;
+  }
+  .govgr-heading-m {
+    @apply mb-0;
+  }
 }
-
-.govgr-horizontal-nav__list,
+.govgr-nav__list,
 .govgr-main-wrapper {
   .govgr-drawer__heading {
     @apply flex-row-reverse;
   }
 }
-.govgr-horizontal-nav__list {
-  @apply w-full m-0 max-w-5xl sm:mx-auto sm:gap-x-6 static sm:py-1 xs:px-3 sm:px-0
-  flex flex-wrap flex-col sm:flex-row;
-  .govgr-section-break {
-    margin-top: 41px !important;
-    @apply sm:flex !important;
-    @apply xs:hidden sm:p-0 absolute left-0 right-0;
-  }
-}
-.govgr-horizontal-nav__list-item {
-  @apply text-base-content xs:py-1 sm:gap-x-6;
-}
-.govgr-horizontal-nav__list-item-link,
-.govgr-horizontal-nav__list-item-btn {
+.govgr-nav__list-item-link,
+.govgr-nav__list-item-btn {
   @apply md:no-underline !important;
   .govgr-svg-icon {
     @apply ml-0.5;
@@ -151,8 +165,8 @@
     @apply underline !important;
   }
 }
-.govgr-horizontal-nav__list-item-link--active,
-.govgr-horizontal-nav__list-item-btn--active {
+.govgr-nav__list-item-link--active,
+.govgr-nav__list-item-btn--active {
   @apply text-base-content !important;
   @apply font-semibold;
   > .govgr-svg-icon {
@@ -160,26 +174,36 @@
   }
 }
 
-/* --- VERTICAL  NAV --- */
-.govgr-vertical-nav__list {
-  @apply w-full m-0 max-w-5xl static xs:px-3
-  flex flex-wrap flex-col;
-}
-.govgr-vertical-nav__list-item {
-  @apply text-base-content
-  xs:py-1;
-}
-.govgr-vertical-nav-list__menu {
+/* --- NAV-MENU --- */
+.govgr-nav-menu {
   @apply flex z-1 w-full;
 }
-.govgr-vertical-nav-list__content-list {
-  @apply p-0 grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
+.govgr-nav-menu--hidden {
+  @apply hidden;
+}
+.govgr-nav-menu--horizontal {
+  @apply sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-base-100;
+  .govgr-main-wrapper {
+    @apply xs:gap-y-2;
+  }
+  .govgr-nav-menu__content-list {
+    @apply sm:grid-cols-2 sm:grid-rows-1 !important;
+    @apply p-0 sm:grid grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
+  }
 }
-.govgr-vertical-nav-list__container-title {
-  @apply mt-3;
+.govgr-nav-menu--vertical {
+  .govgr-nav-menu__content-list {
+    @apply p-0 grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
+  }
+  .govgr-nav-menu__container-title {
+    @apply mt-3;
+  }
+  .govgr-nav-menu__container-title-heading {
+    @apply hidden;
+  }
 }
-.govgr-vertical-nav-list__container-title-heading {
-  @apply hidden;
+.govgr-nav-menu__content-list-item {
+  @apply relative pt-0 pb-5 pr-3 pl-0  box-border;
 }
 
 /* --- VERTICAL LIST --- */
@@ -192,21 +216,3 @@
 .govgr-vertical-nav__item--active {
   @apply font-semibold !important;
 }
-/* ---------- --- */
-
-.govgr-nav-list__menu {
-  @apply flex sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-white z-1 w-full;
-  .govgr-main-wrapper {
-    @apply xs:gap-y-2;
-  }
-}
-.govgr-nav-list__menu-hidden {
-  @apply hidden;
-}
-.govgr-nav-list__content-list {
-  @apply sm:grid-cols-2 sm:grid-rows-1 !important;
-  @apply p-0 sm:grid grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
-}
-.govgr-nav-list__content-list-item {
-  @apply relative pt-0 pb-5 pr-3 pl-0  box-border;
-}

package/src/components/notification-banner.css

@@ -1,6 +1,6 @@
 .govgr-notification-banner {
-  @apply bg-secondary600 border-5 border-secondary600 mb-6 md:mb-8 font-normal
-  print:bg-white;
+  @apply bg-info border-5 border-info mb-6 md:mb-8 font-normal
+  print:bg-base-100;
 }
 .govgr-notification-banner--success{
   @apply bg-success border-success
@@ -13,13 +13,13 @@
 }
 .govgr-notification-banner__header {
   @apply text-white p-0 m-0 text-base md:text-lg
-  print:border-b print:border-gray200 print:text-base-content print:pt-2;
+  print:border-b print:border-base-400 print:text-base-content print:pt-2;
 }
 .govgr-notification-banner__title {
   @apply border-b border-transparent pt-1 px-4 sm:px-5 pb-2 font-bold;
 }
 .govgr-notification-banner__content {
-  @apply bg-white text-base-content p-4 md:p-5;
+  @apply bg-base-100 text-base-content p-4 md:p-5;
   &>* {
     @apply box-border max-w-xl;
   }

package/src/components/pagination.css

@@ -24,9 +24,9 @@
 }
 .govgr-pagination__item--inactive {
   .govgr-link {
-    @apply flex text-gray600 cursor-not-allowed no-underline font-normal;
+    @apply flex text-base-800 cursor-not-allowed no-underline font-normal;
   }
   .govgr-arrow--left, .govgr-arrow--right {
-    fill:var(--color-gray600);
+    fill:var(--color-base-800);
   }
 }

package/src/components/panel.css

@@ -7,8 +7,16 @@
   print:border-4 print:border-success print:text-base-content print:bg-white;
 }
 .govgr-panel__title {
-  @apply text-4xl md:text-5xl print:text-4xl mt-0 mb-6 font-bold;
+  @apply mx-auto mt-0;
+  font-size: var(--panel__title-font-size);
+  line-height:var(--panel__title-line-height);
+  margin-bottom:var(--panel__title-margin-bottom);
+  font-weight: var(--panel__title-font-weight);
+  letter-spacing: var(--panel__title-letter-spacing);
 }
 .govgr-panel__body {
-  @apply text-2xl md:text-4xl print:text-2xl;
+  font-size: var(--panel__body-font-size);
+  line-height:var(--panel__body-line-height);
+  margin:var(--panel__body-margin);
+  letter-spacing: var(--panel__body-letter-spacing);
 }

package/src/components/phase-banner.css

@@ -2,21 +2,21 @@
   @apply py-2 mb-4;
 }
 .govgr-phase-banner__underline {
-  @apply border-gray300 border-b;
+  @apply border-base-500 border-b;
 }
 .govgr-phase-banner__content {
   font-size: var(--phase-banner__content-font-size);
   @apply table;
 }
 .govgr-phase-banner__content__tag {
-  @apply px-2 py-1 mr-2 inline-block bg-secondary600 font-sans text-white text-sm uppercase tracking-widest
-  print:bg-white print:border-2 print:border-secondary600 print:text-secondary600 print:mr-4;
+  @apply px-2 py-1 mr-2 inline-block bg-info font-sans text-white text-sm uppercase tracking-widest
+  print:bg-white print:border-2 print:border-info print:text-info print:mr-4;
 }
 .govgr-phase-banner__text {
   @apply table-cell text-base-content;
 }
 .govgr-header .govgr-phase-banner__text, .govgr-masthead--primary .govgr-phase-banner__text {
-  @apply text-header-content print:text-base-content;
+  @apply text-white print:text-base-content;
 }
 .govgr-phase-banner_header {
   @apply bg-focus top-0 z-30

package/src/components/radios.css

@@ -19,7 +19,7 @@
 .govgr-radios__input {
   @apply absolute z-1 left-0.5 -top-1 m-0 rounded-3xl
   w-10 h-10 opacity-100 cursor-pointer
-  bg-white m-0;
+  bg-base-100 m-0;
   appearance: none;
   width: 40px;
   height: 40px;
@@ -27,7 +27,7 @@
   border-radius: 50%;
   &::before {
     content: "";
-    @apply absolute bg-white opacity-0 w-0 h-0;
+    @apply absolute bg-base-100 opacity-0 w-0 h-0;
     top: 6px;
     left: 6px;
     border: 12px solid currentColor;

package/src/components/stepnav.css

@@ -18,12 +18,12 @@
       height: calc(100% - 2rem);
     }
     &:after {
-      @apply absolute z-/1 w-0 h-full bg-white left-0 top-8 border-2 border-gray200 border-r-0 border-t-0 border-b-0 md:border-l-3;
+      @apply absolute z-/1 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
       content: "";
       margin-left: calc(0.75rem + 1px);
     }
     &:last-child:before {
-      @apply absolute z-1 left-0 h-0 bottom-0 ml-2 w-3 border border-gray200;
+      @apply absolute z-1 left-0 h-0 bottom-0 ml-2 w-3 border border-base-400;
       @apply md:border-t-2 md:ml-2 md:w-5;
       content: "";
     }
@@ -46,7 +46,7 @@
   text-shadow: 0 -0.1em 0 var(--color-white), 0.1em 0 0 var(--color-white), 0 0.1em 0 var(--color-white), -0.1em 0 0 var(--color-white);
 }
 .govgr-step-nav__circle--number {
-  @apply border-2 border-gray200;
+  @apply border-2 border-base-400;
 }
 
 .govgr-step-nav__circle--number {
@@ -60,7 +60,7 @@
   @apply md:border-0 border-0;
 }
 .govgr-step-nav__accordion {
-  @apply  border-gray200;
+  @apply  border-base-400;
 
   &:first-child {
     @apply border-t-2;

package/src/components/summary-list.css

@@ -15,7 +15,7 @@
 
 .govgr-summary-list__row {  
   @apply block sm:flex
-  pb-4 mb-4 border-b border-solid border-gray100
+  pb-4 mb-4 border-b border-solid border-base-300
   sm:pb-0 sm:mb-0 sm:border-0 print:flex print:flex-row print:flex-nowrap;
 }
 .govgr-summary-list--no-border .govgr-summary-list__row {  
@@ -67,7 +67,7 @@
 .govgr-summary-list__value, 
 .govgr-summary-list__actions {
   @apply m-0 
-  sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-gray100; 
+  sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-base-300; 
 }
 .govgr-summary-list--no-border {
   .govgr-summary-list__key, 

package/src/components/svg-icons.css

@@ -43,11 +43,11 @@
 .govgr-header, .govgr-admin-header {
   .govgr-link {
     .govgr-svg-icon {
-      fill:var(--color-header-content);
+      fill:var(--color-white);
     }
     &:hover {
       .govgr-svg-icon {
-        fill:var(--color-header-content);
+        fill:var(--color-white);
       }
     }
     &:focus {
@@ -64,7 +64,7 @@
   fill: var(--color-white) !important;
 }
 .govgr-svg-icon--gray {
-  fill: var(--color-gray200) !important;
+  fill: var(--color-base-400) !important;
 }
 .govgr-svg-icon--primary {
   fill: var(--color-primary) !important;

package/src/components/table.css

@@ -24,7 +24,7 @@
   }
 }
 .govgr-table-container--border {
-  @apply border border-gray100 p-2;
+  @apply border border-base-300 p-2;
 }
 .govgr-table {
   @apply w-full border-collapse table;
@@ -33,10 +33,29 @@
 }
 .govgr-table--with-vertical-lines {
   .govgr-table__cell, .govgr-table__header {
-    @apply border-l border-r border-solid border-gray100 px-4;
+    @apply border-l border-r border-solid border-base-300 px-4;
   } 
   .govgr-table__head {
-    @apply border-t border-gray100 ;
+    @apply border-t border-base-300 text-base-content !important;
+  }
+}
+.govgr-table__header {
+  .govgr-dropdown__button {
+    @apply no-underline font-bold text-base-content !important;
+  }
+  .govgr-dropdown__button--underline:not(:focus){
+    @apply underline !important;
+    text-decoration-thickness: 2px !important;
+  }
+  .govgr-dropdown__content{
+    @apply py-0;
+  }
+  .govgr-vertical-nav__item {
+     @apply flex font-normal no-underline;
+     
+   } 
+  .govgr-vertical-nav__item--active:not(:focus){
+    @apply bg-base-200 font-normal !important
   }
 }
 .govgr-table__body {
@@ -52,19 +71,19 @@
       @apply border-t;
       @apply border-r-0 !important;
       &:last-child {
-        @apply border-r border-solid border-gray100 px-4 !important;
+        @apply border-r border-solid border-base-300 px-4 !important;
       }
     }
     .govgr-table__cell {
       @apply border-r-0 !important;
       &:last-child {
-        @apply border-r border-solid border-gray100 px-4 !important;
+        @apply border-r border-solid border-base-300 px-4 !important;
       }
     }
   }
 }
 .govgr-table__row {
-  @apply bg-white;
+  @apply bg-base-100;
 }
 .govgr-table__row--warning {
   @apply border-l-4 border-warning;
@@ -87,7 +106,7 @@
 }
 .govgr-table--with-vertical-lines.govgr-table--light {
   .govgr-table__body .govgr-table__header {
-      @apply border-l border-solid border-gray100 !important;
+      @apply border-l border-solid border-base-300 !important;
     }
 }
 .govgr-table--with-vertical-lines.govgr-table--dark{
@@ -105,7 +124,7 @@
 .govgr-table--zebra {
   .govgr-table__body {
     .govgr-table__row:nth-child(even) {
-      @apply bg-gray100 print:bg-white;
+      @apply bg-base-200 print:bg-white;
     }
   }
 }
@@ -117,7 +136,7 @@
   }
 }
 .govgr-table__header, .govgr-table__cell {
-  @apply pr-5 py-2.5 pl-0 border-b border-solid border-gray100 text-left align-middle;
+  @apply pr-5 py-2.5 pl-0 border-b border-solid border-base-300 text-left align-middle;
    &:last-child {
       @apply pr-0;
     }

package/src/components/tabs.css

@@ -12,10 +12,10 @@
     }
     .govgr-tabs__list-item {
       @apply relative  px-4 py-2 m-0 shadow-none cursor-pointer;
-      @apply md:float-left  md:border md:border-gray100 md:bg-gray100 md:rounded-t-sm md:mr-2 ;
+      @apply md:float-left  md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2 ;
       @apply print:hidden;
       &.govgr-tabs__list-item-selected {
-        @apply no-underline md:border-gray200 md:border bg-white md:border-b-0 md:px-5 md:pb-4 md:-mt-1 md:pt-4;
+        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:pb-4 md:-mt-1 md:pt-4;
         margin-bottom: -1px;
         &:hover {
           text-decoration-thickness: 2px;
@@ -45,7 +45,7 @@
     }
   }
   .govgr-tabs__panel {
-    @apply bg-white md:hidden block md:px-4 py-4 pt-8 md:border md:border-gray200 mb-0
+    @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
     print:block print:border-0 print:py-3;
     &.govgr-tabs__panel-visible {
       @apply block;

package/src/components/task-list.css

@@ -20,10 +20,10 @@
   }
   .govgr-summary-list__row:first-child  {
     &>dt {
-      @apply border-t-2 border-gray200;
+      @apply border-t-2 border-base-400;
     }
     &>dd {
-      @apply sm:border-t-2 sm:border-gray200;
+      @apply sm:border-t-2 sm:border-base-400;
     }
   }
   .govgr-summary-list__key {
@@ -34,11 +34,11 @@
   @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest;
 }
 .govgr-tag__primary {
-  @apply bg-secondary600 text-white print:border-2 print:bg-white print:border-secondary800 print:text-secondary800 print:mr-4; 
+  @apply bg-info text-white print:border-2 print:bg-white print:border-info-hover print:text-info-hover print:mr-4; 
 }
 .govgr-tag__secondary {
-  @apply bg-secondary50 text-primary print:border-2 print:bg-white print:border-secondary600 print:text-secondary600 print:mr-4;
+  @apply bg-secondary text-base-content print:border-2 print:bg-white print:border-info print:text-info print:mr-4;
 }
 .govgr-tag__gray {
-  @apply bg-gray100 print:border-2 print:bg-white print:border-gray600 print:text-gray600 print:mr-4;
+  @apply bg-base-300 print:border-2 print:bg-white print:border-base-800 print:text-base-800 print:mr-4;
 }

package/src/components/typography.css

@@ -140,7 +140,7 @@
   line-height: var(--body-s-line-height);
 }
 .govgr-hint-l {
-  @apply mb-4 lg:text-2xl text-lg text-gray600;
+  @apply mb-4 lg:text-2xl text-lg text-base-800;
 }
 .govgr-hint {
   font-size: var(--hint-font-size);
@@ -150,7 +150,7 @@
   letter-spacing: var(--hint-letter-spacing);
 }
 .govgr-hint-s {
-  @apply mb-4 lg:text-base text-sm text-gray600;
+  @apply mb-4 lg:text-base text-sm text-base-800;
 }
 .govgr-background-dark, .govgr-masthead--primary {
   .govgr-hint {
@@ -171,7 +171,7 @@
   font-size: var(--link-font-size);
   line-height: var(--link-line-height);
   letter-spacing: var(--link-letter-spacing);
-  &:hover {
+  &:hover:not(:focus) {
     text-decoration-thickness: 2px;
     color: var(--link-color-hover);
   }
@@ -184,10 +184,10 @@
 }
 .govgr-header {
   .govgr-header__container > .govgr-link {
-    @apply text-header-content focus:text-link-active print:text-base-content;
+    @apply text-white focus:text-link-active print:text-base-content;
   }
   .govgr-header__content > .govgr-link {
-    @apply text-header-content focus:text-link-active print:text-base-content;
+    @apply text-white focus:text-link-active print:text-base-content;
   }
 }
 .govgr-link--no-underline {
@@ -237,7 +237,7 @@
   }
   &.dark {
     .govgr-link {
-      @apply bg-gray100;
+      @apply bg-base-300;
     }
   }
 }

package/src/pages/form.js

@@ -18,13 +18,13 @@ export default function Home() {
           </div>
         </header>
       </div>
-      <nav className="govgr-horizontal-nav govgr-horizontal-nav--active">
-        <div className="govgr-horizontal-nav__container">
-          <a className="govgr-horizontal-nav__item govgr-horizontal-nav__item-active" href="/"> Αρχική </a>
-          <a className="govgr-horizontal-nav__item" href=""> Καταχώρηση φόρμας </a>
-          <a className="govgr-horizontal-nav__item" href=""> Νέα</a>
-          <a className="govgr-horizontal-nav__item" href=""> Επικοινωνία </a>
-        </div>
+      <nav className="govgr-nav govgr-nav--horizontal">
+        <ul className="govgr-nav__list">
+          <a className="govgr-nav__list-item-link govgr-nav__list-item-link--active" href="/"> Αρχική </a>
+          <a className="govgr-nav__list-item-link" href=""> Καταχώρηση φόρμας </a>
+          <a className="govgr-nav__list-item-link" href=""> Νέα</a>
+          <a className="govgr-nav__list-item-link" href=""> Επικοινωνία </a>
+        </ul>
       </nav>
       <div className="govgr-width-container">
         <div className="govgr-main-wrapper">

package/src/pages/index.js

@@ -19,13 +19,13 @@ export default function Home() {
           <svg className="govgr-burger-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <rect id="govgr-burger-icon__line-1" width="20" height="3.3" /><rect id="govgr-burger-icon__line-2" width="20" height="3.3" /><rect id="govgr-burger-icon__line-3" width="20" height="3.3" /></svg>
         </div>
       </header>
-      <nav className="govgr-horizontal-nav">
-        <div className="govgr-horizontal-nav__container">
-          <a href="" className="govgr-horizontal-nav__item govgr-horizontal-nav__item-active"> Home </a>
-          <a href="#" className="govgr-horizontal-nav__item"> Form registration </a>
-          <a href="#" className="govgr-horizontal-nav__item"> News </a>
-          <a href="#" className="govgr-horizontal-nav__item"> Contact </a>
-        </div>
+      <nav className="govgr-nav govgr-nav--horizontal">
+        <ul className="govgr-nav__list">
+          <a href="" className="govgr-nav__list-item-link govgr-nav__list-item-link--active"> Home </a>
+          <a href="#" className="govgr-nav__list-item-link"> Form registration </a>
+          <a href="#" className="govgr-nav__list-item-link"> News </a>
+          <a href="#" className="govgr-nav__list-item-link"> Contact </a>
+        </ul>
       </nav>
 
       <svg className="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" >