Parcourir la source

NEW #6 Intégration du Layout, du CSS et du JS sur le modèle MVC

antoine.horvat il y a 9 ans
Parent
commit
fc0f285ab7

+ 62 - 3
CD67.ModeleMVC.MVC/CD67.ModeleMVC.MVC.csproj

@@ -17,8 +17,8 @@
     <MvcBuildViews>false</MvcBuildViews>
     <UseIISExpress>true</UseIISExpress>
     <IISExpressSSLPort />
-    <IISExpressAnonymousAuthentication />
-    <IISExpressWindowsAuthentication />
+    <IISExpressAnonymousAuthentication>disabled</IISExpressAnonymousAuthentication>
+    <IISExpressWindowsAuthentication>enabled</IISExpressWindowsAuthentication>
     <IISExpressUseClassicPipelineMode />
     <UseGlobalApplicationHostFile />
   </PropertyGroup>
@@ -67,6 +67,7 @@
     </Reference>
     <Reference Include="System" />
     <Reference Include="System.Data" />
+    <Reference Include="System.DirectoryServices" />
     <Reference Include="System.Drawing" />
     <Reference Include="System.Net.Http.Extensions, Version=2.2.29.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a, processorArchitecture=MSIL">
       <HintPath>..\packages\Microsoft.Net.Http.2.2.29\lib\net45\System.Net.Http.Extensions.dll</HintPath>
@@ -156,17 +157,72 @@
     <Compile Include="Global.asax.cs">
       <DependentUpon>Global.asax</DependentUpon>
     </Compile>
-    <Compile Include="Internal\MvcHtmlHelpers.cs" />
+    <Compile Include="Internal\Utilisateur.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App_Start\FilterConfig.cs" />
     <Compile Include="App_Start\RouteConfig.cs" />
     <Compile Include="App_Start\WebApiConfig.cs" />
+    <Content Include="bin\Antlr3.Runtime.dll" />
+    <Content Include="bin\Antlr3.Runtime.pdb" />
+    <Content Include="bin\CD67.ModeleMVC.Entity.dll" />
+    <Content Include="bin\CD67.ModeleMVC.Entity.pdb" />
+    <Content Include="bin\CD67.ModeleMVC.Factory.dll" />
+    <Content Include="bin\CD67.ModeleMVC.Factory.pdb" />
+    <Content Include="bin\CD67.ModeleMVC.MVC.dll" />
+    <Content Include="bin\CD67.ModeleMVC.MVC.pdb" />
+    <Content Include="bin\EntityFramework.dll" />
+    <Content Include="bin\EntityFramework.SqlServer.dll" />
+    <Content Include="bin\EntityFramework.SqlServer.xml" />
+    <Content Include="bin\EntityFramework.xml" />
+    <Content Include="bin\fr\EntityFramework.resources.dll" />
+    <Content Include="bin\fr\EntityFramework.SqlServer.resources.dll" />
+    <Content Include="bin\fr\System.Net.Http.Formatting.resources.dll" />
+    <Content Include="bin\fr\System.Web.Helpers.resources.dll" />
+    <Content Include="bin\fr\System.Web.Http.resources.dll" />
+    <Content Include="bin\fr\System.Web.Http.WebHost.resources.dll" />
+    <Content Include="bin\fr\System.Web.Mvc.resources.dll" />
+    <Content Include="bin\fr\System.Web.Razor.resources.dll" />
+    <Content Include="bin\fr\System.Web.WebPages.Deployment.resources.dll" />
+    <Content Include="bin\fr\System.Web.WebPages.Razor.resources.dll" />
+    <Content Include="bin\fr\System.Web.WebPages.resources.dll" />
+    <Content Include="bin\Microsoft.Web.Infrastructure.dll" />
+    <Content Include="bin\Newtonsoft.Json.dll" />
+    <Content Include="bin\Newtonsoft.Json.xml" />
+    <Content Include="bin\Oracle.ManagedDataAccess.dll" />
+    <Content Include="bin\Oracle.ManagedDataAccess.EntityFramework.dll" />
+    <Content Include="bin\System.Net.Http.Extensions.dll" />
+    <Content Include="bin\System.Net.Http.Extensions.xml" />
+    <Content Include="bin\System.Net.Http.Formatting.dll" />
+    <Content Include="bin\System.Net.Http.Formatting.xml" />
+    <Content Include="bin\System.Net.Http.Primitives.dll" />
+    <Content Include="bin\System.Net.Http.Primitives.xml" />
+    <Content Include="bin\System.Web.Helpers.dll" />
+    <Content Include="bin\System.Web.Helpers.xml" />
+    <Content Include="bin\System.Web.Http.dll" />
+    <Content Include="bin\System.Web.Http.WebHost.dll" />
+    <Content Include="bin\System.Web.Http.WebHost.xml" />
+    <Content Include="bin\System.Web.Http.xml" />
+    <Content Include="bin\System.Web.Mvc.dll" />
+    <Content Include="bin\System.Web.Mvc.xml" />
+    <Content Include="bin\System.Web.Optimization.dll" />
+    <Content Include="bin\System.Web.Optimization.xml" />
+    <Content Include="bin\System.Web.Razor.dll" />
+    <Content Include="bin\System.Web.Razor.xml" />
+    <Content Include="bin\System.Web.WebPages.Deployment.dll" />
+    <Content Include="bin\System.Web.WebPages.Deployment.xml" />
+    <Content Include="bin\System.Web.WebPages.dll" />
+    <Content Include="bin\System.Web.WebPages.Razor.dll" />
+    <Content Include="bin\System.Web.WebPages.Razor.xml" />
+    <Content Include="bin\System.Web.WebPages.xml" />
+    <Content Include="bin\WebGrease.dll" />
     <Content Include="Content\bootstrap-theme.css" />
     <Content Include="Content\bootstrap-theme.min.css" />
     <Content Include="Content\bootstrap.css" />
     <Content Include="Content\bootstrap.min.css" />
+    <Content Include="Content\cd67-custom.css" />
+    <Content Include="Content\cd67-model.css" />
     <Content Include="Content\font-awesome.css" />
     <Content Include="Content\font-awesome.min.css" />
     <Content Include="fonts\fontawesome-webfont.svg" />
@@ -185,7 +241,9 @@
     <Content Include="Content\bootstrap.css.map" />
     <Content Include="Content\bootstrap-theme.min.css.map" />
     <Content Include="Content\bootstrap-theme.css.map" />
+    <Content Include="bin\CD67.ModeleMVC.MVC.dll.config" />
     <None Include="Scripts\jquery-3.1.0-vsdoc.js" />
+    <Content Include="Images\LogoCD67.png" />
     <Content Include="Scripts\bootstrap.js" />
     <Content Include="Scripts\bootstrap.min.js" />
     <Content Include="Scripts\jquery-3.1.0.js" />
@@ -197,6 +255,7 @@
     <Content Include="Scripts\jquery.validate.min.js" />
     <Content Include="Scripts\jquery.validate.unobtrusive.js" />
     <Content Include="Scripts\jquery.validate.unobtrusive.min.js" />
+    <Content Include="Scripts\sidebar_menu.js" />
     <Content Include="style\ModeleStyleSheet.css" />
     <Content Include="style\AppStyleSheet.css" />
     <Content Include="Web.config">

+ 26 - 0
CD67.ModeleMVC.MVC/Content/cd67-custom.css

@@ -0,0 +1,26 @@
+
+.color1{
+    color : dodgerblue;
+}
+
+.background-color1 {
+    background-color : darkorange ;
+}
+
+
+#breadcrumbs-one a::after  {
+    border-left-color: darkorange;
+}
+
+
+.color2{
+    color : grey;
+}
+
+#wrapper.toggled-2 #sidebar-wrapper{
+     background-color: #5a5555;
+}
+
+.background-color2{
+    background-color : #5a5555;
+}

+ 395 - 0
CD67.ModeleMVC.MVC/Content/cd67-model.css

@@ -0,0 +1,395 @@
+.navbar-login {
+    width: 300px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+
+.navbar-login-session {
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+
+.icon-size {
+    font-size: 87px;
+}
+
+.navigation {
+    /* Collapsed */
+    width: 0;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+}
+
+.page-wrap {
+    width: 100%;
+    float: right;
+}
+
+
+
+.navigation {
+    transition: width 0.3s ease;
+}
+
+#menu-toggle-2 {
+    margin-left: -10px;
+}
+
+#wrapper {
+    padding-left: 0;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+    overflow: hidden;
+}
+
+#sidebar-wrapper {
+    z-index: 1000;
+    position: absolute;
+    left: 250px;
+    width: 0;
+    height: calc(100% - 63px);
+    margin-left: -250px;
+    overflow-y: auto;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+    overflow: hidden;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    width: 250px;
+}
+
+.fixed-brand {
+    width: auto;
+}
+
+.navbar {
+    margin-bottom: 0;
+}
+
+.navbar-brand {
+    margin-top: -12px;
+}
+
+
+h1 {
+    margin-right: 12%;
+    margin-top: 2%;
+}
+
+.navbar-inner ul li {
+    float: left;
+    display: block;
+}
+
+#topbar {
+    text-align: center;
+}
+
+#titre {
+    display: inline-block;
+}
+
+.row {
+    margin-right: 0;
+}
+
+.sidebar-nav {
+    position: absolute;
+    top: 0;
+    width: 250px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    margin-top: 2px;
+}
+
+    .sidebar-nav li {
+        text-indent: 15px;
+        line-height: 40px;
+    }
+
+        .sidebar-nav li a {
+            display: block;
+            text-decoration: none;
+            color: white;
+        }
+
+.active_tab {
+    background-color: white;
+    /*height : 16px;*/
+    border-radius: 5px;
+    padding-bottom: 1px;
+}
+
+
+.sidebar-nav li a:hover {
+    text-decoration: none;
+    color: #fff;
+    background: rgba(255,255,255,0.2);
+}
+
+#menu_horizontal {
+    padding: 0;
+    margin-bottom: 40px;
+    text-align: center;
+    color: black;
+    width: auto;
+    max-width: 50%;
+    margin-left: 25%;
+    height: auto;
+    min-height: 32px;
+    padding-top: 8px;
+    border-radius: 8px;
+    padding-bottom: 8px;
+}
+
+/*.navbar-toggle{
+    border : 0;
+}*/
+
+.navbar-default .navbar-toggle:hover {
+    background-color: #f8f8f8;
+}
+
+#menu_horizontal li {
+    display: inline-block;
+    list-style: none;
+    padding: 5px 0px 2px 0px;
+}
+
+#tab {
+    color: white;
+}
+
+#menu_horizontal a {
+    display: inline-block;
+    margin: 0 30px;
+}
+
+#content_title {
+    margin-bottom: 18px;
+    padding-top: 34px;
+}
+
+
+
+.sidebar-nav .active {
+    border-left: 7px;
+    border-left-style: solid;
+}
+
+    .sidebar-nav .active i {
+        left: -7px;
+    }
+
+
+footer {
+    padding: 1rem;
+    background-color: #efefef;
+    text-align: center;
+}
+
+
+p {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.sidebar-nav > .sidebar-brand {
+    height: 65px;
+    font-size: 18px;
+    line-height: 60px;
+}
+
+    .sidebar-nav > .sidebar-brand a {
+        color: #999999;
+    }
+
+        .sidebar-nav > .sidebar-brand a:hover {
+            color: #fff;
+            background: none;
+        }
+
+.no-margin {
+    margin: 0;
+}
+
+
+
+@media(max-width:520px) {
+    #menu_horizontal li {
+        width: 97%;
+    }
+
+    #menu_horizontal {
+        width: 100%;
+        max-width: 100%;
+        margin-left: 0%;
+    }
+}
+
+@media(min-width:521px) and (max-width:767px) {
+    #menu_horizontal {
+        max-width: 60%;
+        margin-left: 20%;
+    }
+}
+
+@media(min-width:768px) {
+    #wrapper {
+        padding-left: 50px;
+        width: auto;
+    }
+
+    .fixed-brand {
+        width: 200px;
+    }
+
+    #wrapper.toggled {
+        padding-left: 0;
+    }
+
+    #sidebar-wrapper {
+        width: 50px;
+    }
+
+        #sidebar-wrapper:hover {
+            width: 200px;
+        }
+}
+
+#wrapper.toggled-2 #sidebar-wrapper {
+    width: 200px;
+}
+
+#wrapper.toggled-2 {
+    padding-left: 200px;
+    width: auto;
+}
+
+
+
+
+#page-content-wrapper {
+    padding: 20px;
+    position: relative;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+
+#wrapper.toggled #page-content-wrapper {
+    position: relative;
+    margin-right: 0;
+    padding-left: 250px;
+}
+
+#wrapper.toggled-2 #page-content-wrapper {
+    position: relative;
+    margin-right: 0;
+    margin-left: -200px;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+    width: auto;
+}
+
+.tabulation{
+    text-indent:20px;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+#breadcrumbs-one {
+    background: #eee;
+    overflow: hidden;
+    width: 100%;
+    margin-bottom : 15px;
+}
+
+    #breadcrumbs-one li {
+        float: left;
+    }
+
+    #breadcrumbs-one a {
+        padding: .7em 1em .7em 4em;
+        float: left;
+        text-decoration: none;
+        color: #444;
+        position: relative;
+    }
+
+    #breadcrumbs-one li:first-child a {
+        padding-left: 1em;
+        border-radius: 5px 0 0 5px;
+    }
+
+
+    #breadcrumbs-one a::after,
+    #breadcrumbs-one a::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        margin-top: -1.5em;
+        border-top: 1.5em solid transparent;
+        border-bottom: 1.7em solid transparent;
+        border-left: 1em solid;
+        right: -1em;
+    }
+
+    #breadcrumbs-one a::after {
+        z-index: 2;
+        border-left-color: white;
+    }
+
+    #breadcrumbs-one a::before {
+        border-left-color: white;
+        right: -1.1em;
+        z-index: 1;
+    }
+
+
+
+    #breadcrumbs-one .current,
+    #breadcrumbs-one .current:hover {
+        font-weight: bold;
+        background: none;
+    }
+
+        #breadcrumbs-one .current::after,
+        #breadcrumbs-one .current::before {
+            content: normal;
+        }
+
+    #breadcrumbs-one :hover {
+        filter: brightness(110%);
+    }
+
+        #breadcrumbs-one :hover::after {
+            filter: brightness(90%);
+        }
+
+.current {
+    background-color: transparent;
+}
+
+#content {
+    padding-left : 15px;
+  
+    min-height : 400px;
+}

BIN
CD67.ModeleMVC.MVC/Images/LogoCD67.png


+ 0 - 27
CD67.ModeleMVC.MVC/Internal/MvcHtmlHelpers.cs

@@ -1,27 +0,0 @@
-using System;
-using System.Linq.Expressions;
-using System.Web.Mvc;
-
-namespace CD67.ModeleMVC.MVC
-{
-    public static class MvcHtmlHelpers
-    {
-        /// <summary>
-        /// Pour utiliser ce Helper :
-        /// Ajouter un using en haut de la page cshtml : @using CD67.Jarvis.MVC.Internal
-        /// Appeler comme les autres méthodes le nouveau helper : @Html.DescriptionFor(model => model.CHAMPBDD)
-        /// </summary>
-        /// <typeparam name="TModel"></typeparam>
-        /// <typeparam name="TValue"></typeparam>
-        /// <param name="self"></param>
-        /// <param name="expression"></param>
-        /// <returns></returns>
-        public static MvcHtmlString DescriptionFor<TModel, TValue>(this HtmlHelper<TModel> self, Expression<Func<TModel, TValue>> expression)
-        {
-            var metadata = ModelMetadata.FromLambdaExpression(expression, self.ViewData);
-            var description = metadata.Description;
-
-            return MvcHtmlString.Create(string.Format(@"<span>{0}</span>", description));
-        }
-    }
-}

+ 116 - 0
CD67.ModeleMVC.MVC/Internal/Utilisateur.cs

@@ -0,0 +1,116 @@
+using System;
+using System.DirectoryServices;
+using System.Web;
+
+namespace CD67.ModeleMVC.MVC.Internal
+{ 
+    public static class Utilisateur
+    {
+        /// <summary>
+        /// Retourne une chaine prise dans l'AD correspondant au paramètre donné à la fonction :
+        /// prenomnom , nom , prenom , email , login
+        /// Une fois récupéré, la valeur est stocké en variable de session, et ne sera récupéré à nouveau depuis l'AD que si nécessaire.
+        /// Si le paramètre ne correspond à aucun de ces cas, la fonction retourne une erreur.
+        /// </summary>
+        /// <param name="paramAD"></param>
+        /// <returns>"Prenom Nom" ou "NOM" ou "Prenom" ou "email" ou "login"</returns>  
+        public static string getInfoUtilisateur(string paramAD)
+        {
+            HttpContext context = HttpContext.Current;
+            string resultat = "";
+            string sessionIndex = "UserAD-" + paramAD;
+            if (context.Session[sessionIndex] == null)
+            {
+                try
+                {
+                    DirectoryEntry userEntry = getUserEntry();
+                    resultat = userEntry.Properties[paramAD].Value.ToString();
+                    context.Session[sessionIndex] = resultat;
+                }
+                catch (NullReferenceException ex)
+                {
+                    throw new NullReferenceException("Paramètre AD non reconnu", ex);
+
+                }
+            }
+            else
+            {
+                resultat = context.Session[sessionIndex].ToString();
+            }
+            return resultat;
+        }
+        /// <summary>
+        /// Pour chacune des info standard que sont prenom_nom, prenom, nom, email et login,
+        /// Renvoie la valeur qui lui correspond pour l'utilisateur courrant.
+        /// L'info renvoyée dependra du paramètre donné à la fonction, qui devra correspondre à une des occurences de l'enum InfoStandard.
+        /// </summary>
+        /// <param name="infoStandard"></param>
+        /// <returns name="resultat">Retourne l'information de l'AD correspondant au paramètre donné.</returns>
+        public static string getInfoUtilisateur(InfoStandard infoStandard)
+        {
+            string resultat = "";
+
+            switch (infoStandard)
+            {
+                case InfoStandard.prenom_nom:
+                    resultat = $"{getInfoUtilisateur("givenName")} {getInfoUtilisateur("sn").ToUpper()}";
+                    break;
+                case InfoStandard.prenom:
+                    resultat = getInfoUtilisateur("givenName");
+                    break;
+                case InfoStandard.nom:
+                    resultat = getInfoUtilisateur("sn").ToUpper();
+                    break;
+                case InfoStandard.email:
+                    resultat = getInfoUtilisateur("mail");
+                    break;
+                case InfoStandard.login:
+                    resultat = getInfoUtilisateur("sAMAccountName");
+                    break;
+            }
+
+            return resultat;
+        }
+
+        public enum InfoStandard
+        {
+            prenom_nom,
+            prenom,
+            nom,
+            email,
+            login
+        }
+
+
+        /// <summary>
+        /// Retourne l'entrée dans l'AD de l'utilisateur courant.
+        /// Exemple d'accès aux propriétés : userEntry.Properties["givenName"].Value
+        /// </summary>
+        /// <returns>Entrée utilisateur</returns>
+        private static DirectoryEntry getUserEntry()
+        {
+            try
+            {
+                string login = HttpContext.Current.User.Identity.Name.ToLower().Replace("cg67\\", "");
+                if (login == null) throw new Exception("Impossible de récupérer le login de l'utilisateur courant.");
+
+                DirectoryEntry ldap = new DirectoryEntry("LDAP://CG67.fr/OU=Organisation,dc=CG67,dc=fr", "LectureAD", "Adlecture!");
+                DirectorySearcher searcher = new DirectorySearcher(ldap);
+
+                searcher.Filter = $"(sAMAccountName={login})";
+                SearchResult result = searcher.FindOne();
+
+                DirectoryEntry userEntry = result.GetDirectoryEntry();
+                return userEntry;
+            }
+            catch (NullReferenceException ex)
+            {
+                throw new Exception("Le nom d'utilisateur courant n'a pas été retrouvé dans l'AD.", ex);
+            }
+            catch (Exception ex)
+            {
+                throw new Exception("Erreur dans la récupération des infos de l'utilisateur.", ex);
+            }
+        }
+    }
+}

+ 40 - 0
CD67.ModeleMVC.MVC/Scripts/sidebar_menu.js

@@ -0,0 +1,40 @@
+$("#menu-toggle").click(function (e) {
+    e.preventDefault();
+    $("#wrapper").toggleClass("toggled");
+    
+    
+});
+$("#menu-toggle-2").click(function (e) {
+    e.preventDefault();
+    $("#wrapper").toggleClass("toggled-2");
+   
+    $('#menu ul').hide();
+ 
+});
+
+function initMenu() {
+    $('#menu ul').hide();
+    $('#menu ul').children('.current').parent().show();
+    //$('#menu ul:first').show();
+    $('#menu li a').click(
+      function () {
+          var checkElement = $(this).next();
+          if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
+              return false;
+          }
+          if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
+              $('#menu ul:visible').slideUp('normal');
+              checkElement.slideDown('normal');
+              return false;
+          }
+      }
+      );
+}
+
+function collapseMenu() {
+   
+                $('#menu ul:visible').slideUp('normal');
+                
+}
+
+$(document).ready(function () { initMenu(); });

+ 144 - 21
CD67.ModeleMVC.MVC/Views/Shared/_AppLayout.cshtml

@@ -1,36 +1,159 @@
-@{
-    Layout = null;
+@using CD67.ModeleMVC.MVC.Internal
+@{
     var controllerName = ViewContext.RouteData.Values["controller"].ToString();
     var actionName = ViewContext.RouteData.Values["action"].ToString();
 }
 
 <!DOCTYPE html>
-
-<html>
+<html lang="fr">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
-    <title>@ViewBag.Title</title>
-    @Styles.Render("~/Content/fontawesome")
-    @Styles.Render("~/Content/css")
+
+    <title>page1</title>
+
+    <link href="~/Content/bootstrap.min.css" rel="stylesheet">
+    <link href="~/Content/cd67-model.css" rel="stylesheet">
+    <link href="~/Content/cd67-custom.css" rel="stylesheet">
+    <link href="~/Content/font-awesome.min.css" rel="stylesheet">
+
 </head>
+
 <body>
-    <h1>
-        <a href="@Url.Action("Index", "Home")">
-            <span class="glyphicon glyphicon-home"></span> <!-- Exemple de Glyphicon Bootstrap -->
-            <i class="fa fa-rocket" aria-hidden="true"></i> <!-- Exemple d'icône fontAwesome -->
-            Application Modèle
-        </a>
-    </h1>
-    <hr />
-    <div>
-        @RenderBody()
+    <nav class="navbar navbar-default no-margin" onmouseover=collapseMenu()>
+        <!-- Menu en mode mobile et tablette -->
+
+        <div class="navbar-toggle">
+
+            <a class="brand" href="#"><img src="~/Images/LogoCD67.png" alt=""></a>
+
+            <button type="button" class="collapsed" data-toggle="collapse" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>
+        </div>
+        <!-- Menu en mode PC -->
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
+            <div id="topbar" class="navbar">
+                <div class="navbar-inner">
+                    <ul>
+                        <li class="active"><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button></li>
+                        <li><a class="brand" href="#"><img src="~/Images/LogoCD67.png" alt=""></a></li>
+
+                    </ul>
+                    <ul id="titre" class="nav navbar ">
+                        <li><h1>Titre</h1></li>
+                    </ul>
+                    <ul class="nav navbar-nav navbar-right">
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                                <span class="glyphicon glyphicon-user"></span>
+                                <strong>@Utilisateur.getInfoUtilisateur(Utilisateur.InfoStandard.prenom_nom)</strong>
+                                <span class="glyphicon glyphicon-chevron-down"></span>
+                            </a>
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <div class="navbar-login">
+                                        <div class="row">
+                                            <div class="col-lg-4">
+                                                <p class="text-center">
+                                                    <span class="glyphicon glyphicon-user icon-size"></span>
+                                                </p>
+                                            </div>
+                                            <div class="col-lg-8">
+                                                <p class="text-left"><strong>@Utilisateur.getInfoUtilisateur(Utilisateur.InfoStandard.login)</strong></p>
+                                                <p class="text-left small">@Utilisateur.getInfoUtilisateur(Utilisateur.InfoStandard.email)</p>
+                                                @*<p class="text-left">
+                                                     <a href="#" class="btn btn-primary btn-block btn-sm">Paramètres</a>
+                                                </p>*@
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                                @*<li>
+                                        <div class="navbar-login navbar-login-session">
+                                            <div class="row">
+                                                <div class="col-lg-12">
+                                                    <p>
+                                                        <a href="#" class="btn btn-danger btn-block">Fermer la session</a>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </li>*@
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+        </div>
+    </nav>
+    <div id="wrapper">
+        <!-- Sidebar -->
+        <div class="background-color2" id="sidebar-wrapper">
+            <ul class="sidebar-nav nav-stacked" id="menu">
+
+                <li>
+                    <a class="active" href="#"><span class="fa-stack fa-lg pull-left "><i class="fa fa-home fa-stack-1x  "></i></span> Accueil</a>
+                </li>
+                <li>
+                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-gg fa-stack-1x "></i></span>Vikings</a>
+                    <ul class="nav-pills nav-stacked" style="list-style-type:none;">
+                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-plus fa-stack-1x "></i></span>Nouveau</a></li>
+                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-search fa-stack-1x "></i></span>Recherche</a></li>
+
+                    </ul>
+                </li>
+                <li>
+                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-leanpub fa-stack-1x "></i></span>Types de Vikings</a>
+                    <ul class="nav-pills nav-stacked" style="list-style-type:none;">
+                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-plus fa-stack-1x "></i></span>Nouveau</a></li>
+                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-search fa-stack-1x "></i></span>Recherche</a></li>
+
+                    </ul>
+                </li>
+                <li>
+                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-connectdevelop fa-stack-1x "></i></span>Contact</a>
+                </li>
+            </ul>
+        </div>
+
+
+        <div class="page-wrap" onmouseover=collapseMenu()>
+            <ul id="breadcrumbs-one">
+                <li class="background-color1"><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
+                <li class="background-color1"><a href="">Librairie</a></li>
+                <li class="background-color1"><a href="">Dossier</a></li>
+            </ul>
+        </div>
+        <div id="content" onmouseover=collapseMenu()>
+            @RenderBody()
+        </div>
     </div>
 
-    @Scripts.Render("~/bundles/jquery")
-    @Scripts.Render("~/bundles/bootstrap")
+    <!-- /#wrapper -->
+    <!-- jQuery -->
+    <script src="~/Scripts/jquery-3.1.0.min.js" defer></script>
+    <script src="~/Scripts/bootstrap.min.js" defer></script>
+    <script src="~/Scripts/sidebar_menu.js" async></script>
+    <footer onmouseover=collapseMenu()>
+        <div class="container">
+            <div class="row">
+
+                <div class="col-lg-12">
+                    <div class="col-md-1">
+
+                    </div>
+                    <div class="col-md-7">
+                        <a href="#">Contact</a> | <a href="#">Plan du site</a> | <a href="#">F.A.Q.</a><i class="muted pull-right">© 2017 CD67. Tous droits réservés.</i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
 </body>
-</html>
+
+</html>