From fa60dd77d252dfcf047e1925cd168cb3c3ebb5ca Mon Sep 17 00:00:00 2001 From: Lucie GOIGOUX Date: Mon, 8 Jan 2024 18:22:48 +0100 Subject: [PATCH] ajout de la bar de navigation --- .../adminBlazor/Shared/MainLayout.razor | 7 +- .../adminBlazor/Shared/MainLayout.razor.css | 33 +- .../adminBlazor/Shared/NavBar.razor | 27 +- .../adminBlazor/Shared/NavBar.razor.css | 648 +----------------- .../adminBlazor/Shared/NavMenu.razor | 16 +- 5 files changed, 49 insertions(+), 682 deletions(-) diff --git a/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor b/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor index cf319b6..edca698 100644 --- a/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor +++ b/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor @@ -3,14 +3,11 @@ adminBlazor
-
- +
+
-
- About -
@Body diff --git a/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor.css b/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor.css index 1ded576..f1c12a7 100644 --- a/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor.css +++ b/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor.css @@ -4,16 +4,24 @@ flex-direction: column; } + +.content { + flex: 1; + padding: 20px; +} + main { flex: 1; } -.sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); +.navbar { + background-color: #7464a1; + justify-content:flex-end; + padding-right: 7rem; } .top-row { - background-color: #f7f7f7; + background-color: #7464a1; border-bottom: 1px solid #d6d5d5; justify-content: flex-end; height: 3.5rem; @@ -41,25 +49,23 @@ main { } .top-row a, .top-row .btn-link { - margin-left: 0; + margin-left: 1rem; } } @media (min-width: 641px) { - .page { - flex-direction: row; - } + - .sidebar { - width: 250px; - height: 100vh; + .navbar { + width: 100vw; + min-height:5rem; position: sticky; top: 0; } .top-row { position: sticky; - top: 0; + top: 5rem; z-index: 1; } @@ -67,5 +73,10 @@ main { padding-left: 2rem !important; padding-right: 1.5rem !important; } + + px-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } } diff --git a/Project/adminBlazor/adminBlazor/Shared/NavBar.razor b/Project/adminBlazor/adminBlazor/Shared/NavBar.razor index 9fd2288..808857e 100644 --- a/Project/adminBlazor/adminBlazor/Shared/NavBar.razor +++ b/Project/adminBlazor/adminBlazor/Shared/NavBar.razor @@ -1,24 +1,17 @@ -
- - - - -
- -
-
+ + +
+ Accueil + Users + My Account + Vocabulary Lists +
+ @code { private bool isNavMenuVisible = false; - private string navMenuStyle => isNavMenuVisible ? "display: flex;" : "display: none;"; + private string navMenuStyle => isNavMenuVisible ? "display: flex;" : "display: show;"; private void ToggleNavMenu() { diff --git a/Project/adminBlazor/adminBlazor/Shared/NavBar.razor.css b/Project/adminBlazor/adminBlazor/Shared/NavBar.razor.css index 525ee40..d7be557 100644 --- a/Project/adminBlazor/adminBlazor/Shared/NavBar.razor.css +++ b/Project/adminBlazor/adminBlazor/Shared/NavBar.razor.css @@ -1,644 +1,20 @@ -.container, -.container-fluid, -.container-xxl, -.container-xl, -.container-lg, -.container-md, -.container-sm { - --bs-gutter-x: 1.5rem; - --bs-gutter-y: 0; - width: 100%; - padding-right: calc(var(--bs-gutter-x) * 0.5); - padding-left: calc(var(--bs-gutter-x) * 0.5); - margin-right: auto; - margin-left: auto; -} - -@media (min-width: 576px) { - .container-sm, .container { - max-width: 540px; - } -} - -@media (min-width: 768px) { - .container-md, .container-sm, .container { - max-width: 720px; - } -} - -@media (min-width: 992px) { - .container-lg, .container-md, .container-sm, .container { - max-width: 960px; - } -} - -@media (min-width: 1200px) { - .container-xl, .container-lg, .container-md, .container-sm, .container { - max-width: 1140px; - } -} - -@media (min-width: 1400px) { - .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { - max-width: 1320px; - } -} - -.navbar > .container, -.navbar > .container-fluid, -.navbar > .container-sm, -.navbar > .container-md, -.navbar > .container-lg, -.navbar > .container-xl, -.navbar > .container-xxl { - display: flex; - flex-wrap: inherit; - align-items: center; - justify-content: space-between; -} - -.navbar-brand { - padding-top: var(--bs-navbar-brand-padding-y); - padding-bottom: var(--bs-navbar-brand-padding-y); - margin-right: var(--bs-navbar-brand-margin-end); - font-size: var(--bs-navbar-brand-font-size); - color: var(--bs-navbar-brand-color); - text-decoration: none; - white-space: nowrap; -} - - .navbar-brand:hover, .navbar-brand:focus { - color: var(--bs-navbar-brand-hover-color); - } - -.navbar-nav { - --bs-nav-link-padding-x: 0; - --bs-nav-link-padding-y: 0.5rem; - --bs-nav-link-font-weight:; - --bs-nav-link-color: var(--bs-navbar-color); - --bs-nav-link-hover-color: var(--bs-navbar-hover-color); - --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color); - display: flex; - flex-direction: column; - padding-left: 0; - margin-bottom: 0; - list-style: none; -} - - .navbar-nav .show > .nav-link, - .navbar-nav .nav-link.active { - color: var(--bs-navbar-active-color); - } - - .navbar-nav .dropdown-menu { - position: static; - } - -.navbar-text { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - color: var(--bs-navbar-color); -} - - .navbar-text a, - .navbar-text a:hover, - .navbar-text a:focus { - color: var(--bs-navbar-active-color); - } - -.navbar-collapse { - flex-basis: 100%; - flex-grow: 1; - align-items: center; -} - -.navbar-toggler { - padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x); - font-size: var(--bs-navbar-toggler-font-size); - line-height: 1; - color: var(--bs-navbar-color); - background-color: transparent; - border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color); - border-radius: var(--bs-navbar-toggler-border-radius); - transition: var(--bs-navbar-toggler-transition); -} - -@media (prefers-reduced-motion: reduce) { - .navbar-toggler { - transition: none; - } -} - -.navbar-toggler:hover { - text-decoration: none; -} - -.navbar-toggler:focus { - text-decoration: none; - outline: 0; - box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width); -} - -.navbar-toggler-icon { - display: inline-block; - width: 1.5em; - height: 1.5em; - vertical-align: middle; - background-image: var(--bs-navbar-toggler-icon-bg); - background-repeat: no-repeat; - background-position: center; - background-size: 100%; -} - -.navbar-nav-scroll { - max-height: var(--bs-scroll-height, 75vh); - overflow-y: auto; -} - -@media (min-width: 576px) { - .navbar-expand-sm { - flex-wrap: nowrap; - justify-content: flex-start; - } - - .navbar-expand-sm .navbar-nav { - flex-direction: row; - } - - .navbar-expand-sm .navbar-nav .dropdown-menu { - position: absolute; - } - - .navbar-expand-sm .navbar-nav .nav-link { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); - } - - .navbar-expand-sm .navbar-nav-scroll { - overflow: visible; - } - - .navbar-expand-sm .navbar-collapse { - display: flex !important; - flex-basis: auto; - } - - .navbar-expand-sm .navbar-toggler { - display: none; - } - - .navbar-expand-sm .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; - } - - .navbar-expand-sm .offcanvas .offcanvas-header { - display: none; - } - - .navbar-expand-sm .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} - -@media (min-width: 768px) { - .navbar-expand-md { - flex-wrap: nowrap; - justify-content: flex-start; - } - - .navbar-expand-md .navbar-nav { - flex-direction: row; - } - - .navbar-expand-md .navbar-nav .dropdown-menu { - position: absolute; - } - - .navbar-expand-md .navbar-nav .nav-link { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); - } - - .navbar-expand-md .navbar-nav-scroll { - overflow: visible; - } - - .navbar-expand-md .navbar-collapse { - display: flex !important; - flex-basis: auto; - } - - .navbar-expand-md .navbar-toggler { - display: none; - } - - .navbar-expand-md .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; - } - - .navbar-expand-md .offcanvas .offcanvas-header { - display: none; - } - - .navbar-expand-md .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} - -@media (min-width: 992px) { - .navbar-expand-lg { - flex-wrap: nowrap; - justify-content: flex-start; - } - - .navbar-expand-lg .navbar-nav { - flex-direction: row; - } - - .navbar-expand-lg .navbar-nav .dropdown-menu { - position: absolute; - } - - .navbar-expand-lg .navbar-nav .nav-link { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); - } - - .navbar-expand-lg .navbar-nav-scroll { - overflow: visible; - } - - .navbar-expand-lg .navbar-collapse { - display: flex !important; - flex-basis: auto; - } - - .navbar-expand-lg .navbar-toggler { - display: none; - } - - .navbar-expand-lg .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; - } - - .navbar-expand-lg .offcanvas .offcanvas-header { - display: none; - } - - .navbar-expand-lg .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} - -@media (min-width: 1200px) { - .navbar-expand-xl { - flex-wrap: nowrap; - justify-content: flex-start; - } - - .navbar-expand-xl .navbar-nav { - flex-direction: row; - } - - .navbar-expand-xl .navbar-nav .dropdown-menu { - position: absolute; - } - - .navbar-expand-xl .navbar-nav .nav-link { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); - } - - .navbar-expand-xl .navbar-nav-scroll { - overflow: visible; - } - - .navbar-expand-xl .navbar-collapse { - display: flex !important; - flex-basis: auto; - } - - .navbar-expand-xl .navbar-toggler { - display: none; - } - - .navbar-expand-xl .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; - } - - .navbar-expand-xl .offcanvas .offcanvas-header { - display: none; - } - - .navbar-expand-xl .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} - -@media (min-width: 1400px) { - .navbar-expand-xxl { - flex-wrap: nowrap; - justify-content: flex-start; - } - - .navbar-expand-xxl .navbar-nav { - flex-direction: row; - } - - .navbar-expand-xxl .navbar-nav .dropdown-menu { - position: absolute; - } - - .navbar-expand-xxl .navbar-nav .nav-link { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); - } - - .navbar-expand-xxl .navbar-nav-scroll { - overflow: visible; - } - - .navbar-expand-xxl .navbar-collapse { - display: flex !important; - flex-basis: auto; - } - - .navbar-expand-xxl .navbar-toggler { - display: none; - } - - .navbar-expand-xxl .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; - } - - .navbar-expand-xxl .offcanvas .offcanvas-header { - display: none; - } - - .navbar-expand-xxl .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} - -.navbar-expand { - flex-wrap: nowrap; - justify-content: flex-start; -} - - .navbar-expand .navbar-nav { - flex-direction: row; - } - - .navbar-expand .navbar-nav .dropdown-menu { - position: absolute; - } - - .navbar-expand .navbar-nav .nav-link { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); - } - - .navbar-expand .navbar-nav-scroll { - overflow: visible; - } - - .navbar-expand .navbar-collapse { - display: flex !important; - flex-basis: auto; - } - - .navbar-expand .navbar-toggler { - display: none; - } - - .navbar-expand .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; - } - - .navbar-expand .offcanvas .offcanvas-header { - display: none; - } - - .navbar-expand .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } - -.navbar-dark { - --bs-navbar-color: rgba(255, 255, 255, 0.55); - --bs-navbar-hover-color: rgba(255, 255, 255, 0.75); - --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25); - --bs-navbar-active-color: #fff; - --bs-navbar-brand-color: #fff; - --bs-navbar-brand-hover-color: #fff; - --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); -} - -.px-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; -} - -.px-lg-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; +body { + margin-right: 0; + font-family: Arial, sans-serif; } .navbar { - --bs-navbar-padding-x: 0; - --bs-navbar-padding-y: 0.5rem; - --bs-navbar-color: rgba(0, 0, 0, 0.55); - --bs-navbar-hover-color: rgba(0, 0, 0, 0.7); - --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3); - --bs-navbar-active-color: rgba(0, 0, 0, 0.9); - --bs-navbar-brand-padding-y: 0.3125rem; - --bs-navbar-brand-margin-end: 1rem; - --bs-navbar-brand-font-size: 1.25rem; - --bs-navbar-brand-color: rgba(0, 0, 0, 0.9); - --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9); - --bs-navbar-nav-link-padding-x: 0.5rem; - --bs-navbar-toggler-padding-y: 0.25rem; - --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-font-size: 1.25rem; - --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); - --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1); - --bs-navbar-toggler-border-radius: 0.375rem; - --bs-navbar-toggler-focus-width: 0.25rem; - --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out; - position: relative; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x); + background-color: #7464a1; + padding: 15px; + color: #fff; } -.logo { - margin-top: 10%; - max-height: 8vh; -} - -#mainNav { - min-height: 3.5rem; - background-color: transparent; -} - - #mainNav .navbar-toggler { - font-size: 80%; - padding: 0.75rem; - color: #64a19d; - border: 1px solid #64a19d; - } - - #mainNav .navbar-toggler:focus { - outline: none; - } - - #mainNav .navbar-brand { - color: #000; - font-weight: 700; - padding: 0.9rem 0; - } - - #mainNav .navbar-nav .nav-item:hover { - color: #faf4e0; - outline: none; - background-color: transparent; - } - - #mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus { - outline: none; - background-color: transparent; + .navbar a { + color: #fff; + text-decoration: none; + margin: 0 15px; } -@media (min-width: 992px) { - #mainNav { - padding-top: 0; - padding-bottom: 0; - border-bottom: none; - transition: background-color 0.3s ease-in-out; + .navbar a:hover { + color: #463c61; } - - #mainNav .navbar-brand { - padding: 0.5rem 0; - color: #000; - } - - #mainNav .nav-link { - transition: none; - padding: 2rem 1.5rem; - color: #fff; - } - - #mainNav .nav-link:hover { - color: #faf4e0; - } - - #mainNav .nav-link:active { - color: #fff; - } - - #mainNav.navbar-shrink { - background-color: #fff; - } - - #mainNav.navbar-shrink .navbar-brand { - color: #000; - } - - #mainNav.navbar-shrink .nav-link { - color: #000; - padding: 1.5rem 1.5rem 1.25rem; - border-bottom: 0.25rem solid transparent; - } - - #mainNav.navbar-shrink .nav-link:hover { - color: #64a19d; - } - - #mainNav.navbar-shrink .nav-link:active { - color: #467370; - } - - #mainNav.navbar-shrink .nav-link.active { - color: #64a19d; - outline: none; - border-bottom: 0.25rem solid #64a19d; - } -} - -.ms-auto { - margin-left: auto !important; -} diff --git a/Project/adminBlazor/adminBlazor/Shared/NavMenu.razor b/Project/adminBlazor/adminBlazor/Shared/NavMenu.razor index bb2bdef..9c500e4 100644 --- a/Project/adminBlazor/adminBlazor/Shared/NavMenu.razor +++ b/Project/adminBlazor/adminBlazor/Shared/NavMenu.razor @@ -9,26 +9,16 @@